jquery菜单导航

jQuery 菜单导航实现方法

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

水平下拉菜单

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

<style>
.submenu {
  display: none;
  position: absolute;
}
</style>

<script>
$(document).ready(function(){
  $('.menu > ul > li').hover(
    function(){ $(this).find('.submenu').stop().slideDown(200); },
    function(){ $(this).find('.submenu').stop().slideUp(200); }
  );
});
</script>

垂直手风琴菜单

<div class="accordion">
  <div class="item">
    <h3>菜单1</h3>
    <div class="content">
      <p>内容1</p>
    </div>
  </div>
  <div class="item">
    <h3>菜单2</h3>
    <div class="content">
      <p>内容2</p>
    </div>
  </div>
</div>

<style>
.content {
  display: none;
}
</style>

<script>
$(document).ready(function(){
  $('.accordion .item h3').click(function(){
    $(this).next('.content').slideToggle();
    $(this).parent().siblings().find('.content').slideUp();
  });
});
</script>

响应式移动菜单

<button class="menu-toggle">菜单</button>
<nav class="main-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
  </ul>
</nav>

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

<script>
$(document).ready(function(){
  $('.menu-toggle').click(function(){
    $('.main-nav').slideToggle();
  });
});
</script>

高亮当前菜单项

$(document).ready(function(){
  var path = window.location.pathname;
  $('.menu a[href="'+path+'"]').addClass('active');
});

注意事项

• 确保在 DOM 加载完成后执行 jQuery 代码，使用 $(document).ready()
• 考虑添加 CSS 过渡效果提升用户体验
• 对于移动设备，可能需要添加触摸事件支持
• 大型项目可考虑使用 jQuery UI 或专门的菜单插件

这些方法可以根据具体需求进行组合和调整，创建出符合项目要求的导航菜单系统。