当前位置：首页 > jquery

jquery 导航栏

2026-03-02 17:36:45jquery

使用 jQuery 创建导航栏

导航栏是网站的重要组成部分，jQuery 可以简化导航栏的交互效果实现。以下是几种常见导航栏的实现方法。

基础导航栏结构

HTML 结构通常使用无序列表 <ul> 构建导航栏，搭配 CSS 实现样式：

<nav class="navbar">
  <ul>
    <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>
</nav>

添加下拉菜单

通过 jQuery 实现鼠标悬停时显示下拉菜单：

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

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

响应式导航栏

针对移动设备添加汉堡菜单的响应式导航栏：

<button class="menu-toggle">☰</button>
<nav class="responsive-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
  </ul>
</nav>

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

固定顶部导航栏

实现页面滚动时固定导航栏在顶部：

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

nav.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

平滑滚动效果

为导航链接添加平滑滚动到页面锚点：

jquery 导航栏

$('nav a').on('click', function(e) {
  if (this.hash !== '') {
    e.preventDefault();
    const hash = this.hash;
    $('html, body').animate(
      {
        scrollTop: $(hash).offset().top
      },
      800
    );
  }
});

这些方法展示了 jQuery 在创建各种导航栏交互效果中的应用，可以根据具体需求组合使用或单独实现。

标签: jquery