jquery导航栏

jQuery 导航栏实现方法

使用 jQuery 可以快速实现动态导航栏效果，包括下拉菜单、高亮当前页面、平滑滚动等。以下是几种常见的实现方式：

基础导航栏结构

HTML 结构通常使用 <ul> 和 <li> 元素构建导航栏框架：

<nav class="main-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li class="has-submenu">
      <a href="#products">产品</a>
      <ul class="submenu">
        <li><a href="#product1">产品1</a></li>
        <li><a href="#product2">产品2</a></li>
      </ul>
    </li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

下拉菜单实现

通过 jQuery 控制子菜单的显示/隐藏：

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

当前页面高亮

为当前页面链接添加 active 类：

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

平滑滚动效果

实现点击导航链接平滑滚动到页面相应部分：

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

响应式导航栏

添加移动端菜单切换功能：

$('.menu-toggle').click(function(){
  $('.main-nav ul').slideToggle();
});

对应的 CSS 媒体查询：

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

注意事项

• 确保在 $(document).ready() 中执行 jQuery 代码
• 考虑添加 ARIA 属性增强可访问性
• 对移动端触摸事件进行优化
• 使用 CSS 过渡效果配合 jQuery 动画

这些方法可以根据具体需求组合使用，创建功能丰富且用户体验良好的导航栏。