当前位置：首页 > jquery

jquery导航栏

2026-03-02 17:35:11jquery

jQuery 导航栏实现方法

基础 HTML 结构

导航栏通常使用 <nav> 和 <ul> 结构构建，示例代码如下：

<nav class="main-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

添加下拉菜单功能

通过 jQuery 实现鼠标悬停显示子菜单：

$(document).ready(function(){
  $('.main-nav li').hover(
    function(){ $(this).find('ul').stop().slideDown(200); },
    function(){ $(this).find('ul').stop().slideUp(200); }
  );
});

对应的 HTML 需要嵌套子菜单：

<li>
  <a href="#services">服务</a>
  <ul class="submenu">
    <li><a href="#web">网页设计</a></li>
    <li><a href="#app">应用开发</a></li>
  </ul>
</li>

响应式导航栏

针对移动设备添加汉堡菜单功能：

$('.mobile-menu-btn').click(function(){
  $('.main-nav ul').toggleClass('show');
});

CSS 需要配合媒体查询：

@media (max-width: 768px) {
  .main-nav ul { display: none; }
  .main-nav ul.show { display: block; }
}

滚动高亮效果

根据页面滚动位置自动高亮导航项：

$(window).scroll(function(){
  var scrollPos = $(document).scrollTop();
  $('.main-nav a').each(function(){
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('.main-nav li').removeClass("active");
      currLink.parent().addClass("active");
    }
  });
});

平滑滚动动画

点击导航时实现平滑滚动：

jquery导航栏

$('.main-nav a').click(function(e){
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 500);
});