当前位置：首页 > jquery

jquery 导航

2026-01-14 15:02:44jquery

jQuery 导航实现方法

使用jQuery创建动态导航菜单

通过jQuery可以轻松实现导航菜单的动态效果，如下拉菜单、滑动菜单等。以下是一个基础的下拉导航实现示例：

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li class="dropdown">
    <a href="#">产品</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
    </ul>
  </li>
</ul>

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

响应式导航实现

对于移动设备，通常需要实现汉堡菜单。以下是一个响应式导航的示例：

jquery 导航

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

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

平滑滚动导航

实现点击导航链接平滑滚动到页面指定位置：

jquery 导航

$('a[href*="#"]').on('click', function(e){
  e.preventDefault();
  $('html, body').animate(
    {scrollTop: $($(this).attr('href')).offset().top},
    500
  );
});

当前页面高亮显示

为当前所在页面的导航项添加高亮样式：

$(function(){
  var current = location.pathname;
  $('.nav-menu li a').each(function(){
    var $this = $(this);
    if($this.attr('href').indexOf(current) !== -1){
      $this.addClass('active');
    }
  });
});

注意事项