导航栏是几乎所有网站都必备的组件，一个好的响应式导航栏需要在不同设备上都能提供出色的用户体验。本节将介绍如何使用 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 属性支持
最佳实践
- 响应式设计原则
- 移动优先设计
- 断点设置合理
- 内容优先级排序
- 交互设计要点
- 清晰的视觉反馈
- 平滑的动画过渡
- 直观的操作方式
- 性能优化策略
- 合理使用 CSS transforms
- 避免布局抖动
- 资源按需加载
- 可访问性建议
- 完善的键盘支持
- 适当的 ARIA 属性
- 合理的颜色对比度