jquery导航菜单

jQuery 导航菜单实现方法

使用 jQuery 可以轻松创建动态、交互式的导航菜单。以下是几种常见的实现方式：

基础下拉菜单实现

HTML 结构：

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li class="has-submenu">
    <a href="#">产品</a>
    <ul class="submenu">
      <li><a href="#">产品A</a></li>
      <li><a href="#">产品B</a></li>
    </ul>
  </li>
</ul>

jQuery 代码：

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

响应式移动菜单

HTML 结构：

<button class="menu-toggle">菜单</button>
<nav class="main-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

jQuery 代码：

$(document).ready(function(){
  $('.menu-toggle').click(function(){
    $('.main-nav').toggleClass('active');
  });
});

CSS 配合：

.main-nav {
  display: none;
}
.main-nav.active {
  display: block;
}
@media (min-width: 768px) {
  .main-nav {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
}

带动画效果的菜单

$(document).ready(function(){
  $('nav ul li a').hover(
    function(){
      $(this).animate({paddingLeft: '20px'}, 200);
    },
    function(){
      $(this).animate({paddingLeft: '0'}, 200);
    }
  );
});

固定顶部导航

$(window).scroll(function(){
  if($(this).scrollTop() > 100){
    $('nav').addClass('fixed');
  } else {
    $('nav').removeClass('fixed');
  }
});

注意事项

• 确保在 $(document).ready() 中执行 jQuery 代码
• 考虑使用事件委托处理动态添加的菜单项
• 移动端需添加 touch 事件支持
• 对于复杂菜单，可以考虑使用 jQuery UI 或插件如 Superfish

这些方法可以根据具体需求组合使用，创建出功能丰富、用户体验良好的导航菜单。