第三章：组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现

导航栏是几乎所有网站都必备的组件，一个好的响应式导航栏需要在不同设备上都能提供出色的用户体验。本节将介绍如何使用 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. 性能优化策略

   • 合理使用 CSS transforms
   • 避免布局抖动
   • 资源按需加载

4. 可访问性建议

   • 完善的键盘支持
   • 适当的 ARIA 属性
   • 合理的颜色对比度