当前位置：首页 > jquery

jquery 导航栏

2026-04-08 02:42:38jquery

jQuery 导航栏实现方法

使用 jQuery 可以轻松创建动态导航栏，以下是一个完整的实现示例：

HTML 结构

<nav class="navbar">
  <ul class="nav-menu">
    <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>
  <div class="menu-toggle">☰</div>
</nav>

CSS 样式

.navbar {
  background-color: #333;
  padding: 10px;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
}

.menu-toggle {
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .nav-menu.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

jQuery 代码

$(document).ready(function() {
  // 响应式菜单切换
  $('.menu-toggle').click(function() {
    $('.nav-menu').toggleClass('active');
  });

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

  // 高亮当前菜单项
  $(window).scroll(function() {
    $('section').each(function() {
      if($(window).scrollTop() >= $(this).offset().top - 100) {
        const id = $(this).attr('id');
        $('nav a').removeClass('active');
        $('nav a[href="#'+id+'"]').addClass('active');
      }
    });
  });
});

下拉菜单实现

要添加下拉菜单功能，可以扩展上述代码：

HTML 修改

<li class="dropdown">
  <a href="#">产品</a>
  <ul class="dropdown-menu">
    <li><a href="#">产品1</a></li>
    <li><a href="#">产品2</a></li>
    <li><a href="#">产品3</a></li>
  </ul>
</li>

CSS 新增

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #444;
  min-width: 160px;
  z-index: 1;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
  }
}

jQuery 新增

// 移动端下拉菜单
$('.dropdown > a').click(function(e) {
  if($(window).width() <= 768) {
    e.preventDefault();
    $(this).siblings('.dropdown-menu').slideToggle();
  }
});

固定导航栏

实现滚动时固定导航栏：

CSS 新增

.navbar.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  animation: slideDown 0.3s;
}

@keyframes slideDown {
  from {transform: translateY(-100%);}
  to {transform: translateY(0);}
}

jQuery 新增

jquery 导航栏

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

这些代码组合可以创建一个响应式的、功能齐全的 jQuery 导航栏，包含平滑滚动、下拉菜单和固定导航等功能。根据实际需求可以进一步调整样式和功能。

标签: jquery