导航栏是几乎所有网站都必备的组件，一个好的响应式导航栏需要在不同设备上都能提供出色的用户体验。本节将介绍如何使用 Tailwind CSS 实现功能完善的响应式导航栏。

基础导航栏结构

桌面端导航

移动端菜单按钮

  
    打开主菜单
    
    
    
    
  

移动端菜单面板

  

    
      首页
    
    
      产品
    
    
      关于
    
    
      联系我们
    
  
  

    

      
        登录
      
      
        注册
      
    
  

交互功能实现

菜单切换功能

function setupMobileMenu() {
  const button = document.querySelector('[aria-controls="mobile-menu"]')
  const menu = document.getElementById('mobile-menu')
  const icons = button.querySelectorAll('svg')

  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true'
    button.setAttribute('aria-expanded', !expanded)
    menu.classList.toggle('hidden')
    icons[0].classList.toggle('hidden')
    icons[1].classList.toggle('hidden')
  })
}

滚动处理

function handleNavbarScroll() {
  const navbar = document.querySelector('nav')
  let lastScroll = 0

  window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset

    if (currentScroll <= 0 navbar.classlist.remove-translate-y-full return if currentscroll> lastScroll && !navbar.contains(document.activeElement)) {
      // 向下滚动时隐藏
      navbar.classList.add('-translate-y-full')
    } else {
      // 向上滚动时显示
      navbar.classList.remove('-translate-y-full')
    }

    lastScroll = currentScroll
  })
}

高级功能实现

下拉菜单

  
    产品
    
  

  

    
      分类一
    
    
      分类二
    
    
      分类三
    
  

搜索框集成

  

    搜索
    

      

        
      
      
    
  

样式优化

活跃状态

  产品

滚动动效

深色模式支持

性能优化

延迟加载

// 延迟加载非关键资源
function lazyLoadNavResources() {
  const images = document.querySelectorAll('nav img[data-src]')
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target
        img.src = img.dataset.src
        observer.unobserve(img)
      }
    })
  })

  images.forEach(img => observer.observe(img))
}

动画性能

/* 使用 transform 而不是 margin/top 来实现动画 */
.nav-animation {
  transform: translateY(0);
  transition: transform 0.3s ease;
  will-change: transform;
}

.nav-hidden {
  transform: translateY(-100%);
}

可访问性增强

键盘导航

function setupKeyboardNav() {
  const menuItems = document.querySelectorAll('nav a, nav button')

  menuItems.forEach((item, index) => {
    item.addEventListener('keydown', (e) => {
      switch (e.key) {
        case 'ArrowRight':
          e.preventDefault()
          menuItems[(index + 1) % menuItems.length].focus()
          break
        case 'ArrowLeft':
          e.preventDefault()
          menuItems[(index - 1 + menuItems.length) % menuItems.length].focus()
          break
      }
    })
  })
}

ARIA 属性支持

最佳实践

1. 响应式设计原则
2. 移动优先设计
3. 断点设置合理
4. 内容优先级排序
5. 交互设计要点
6. 清晰的视觉反馈
7. 平滑的动画过渡
8. 直观的操作方式
9. 性能优化策略
10. 合理使用 CSS transforms
11. 避免布局抖动
12. 资源按需加载
13. 可访问性建议
14. 完善的键盘支持
15. 适当的 ARIA 属性
16. 合理的颜色对比度