jquery导航菜单

jQuery 导航菜单实现方法

基础导航菜单实现

使用 jQuery 创建一个简单的水平导航菜单，HTML 结构如下：

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

添加基础 CSS 样式：

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav-menu li {
  margin-right: 15px;
}
.nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

添加下拉菜单功能

扩展 HTML 结构支持下拉菜单：

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li class="has-dropdown">
    <a href="#">产品</a>
    <ul class="dropdown">
      <li><a href="#">软件</a></li>
      <li><a href="#">硬件</a></li>
    </ul>
  </li>
</ul>

对应的 jQuery 代码实现下拉效果：

$(document).ready(function() {
  $('.has-dropdown').hover(
    function() {
      $(this).find('.dropdown').stop(true, true).slideDown(200);
    },
    function() {
      $(this).find('.dropdown').stop(true, true).slideUp(200);
    }
  );
});

响应式移动端菜单

创建适应移动设备的菜单切换功能，添加移动端按钮：

<button class="mobile-menu-toggle">菜单</button>

jQuery 实现响应式切换：

$('.mobile-menu-toggle').click(function() {
  $('.nav-menu').slideToggle();
});

添加动画效果

为菜单项添加悬停动画：

$('.nav-menu li a').hover(
  function() {
    $(this).animate({paddingLeft: '20px'}, 100);
  },
  function() {
    $(this).animate({paddingLeft: '10px'}, 100);
  }
);

当前菜单项高亮

标记当前活动菜单项：

$('.nav-menu li a').click(function() {
  $('.nav-menu li a').removeClass('active');
  $(this).addClass('active');
});

注意事项

• 确保在 HTML 中正确引入 jQuery 库
• 对于复杂导航，考虑使用 jQuery UI 或其他插件
• 移动端设计要测试不同设备尺寸
• 动画效果不宜过多以免影响性能