css菜单制作小结
基础菜单结构
使用HTML的无序列表<ul>构建菜单框架，每个<li>代表一个菜单项。结构清晰且语义化，便于SEO和屏幕阅读器识别。
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>水平导航栏样式
通过display: inline-block或flex布局实现横向排列。移除列表默认样式，添加间距和悬停效果增强交互性。
.menu {
list-style: none;
padding: 0;
display: flex;
gap: 20px;
}
.menu a {
text-decoration: none;
color: #333;
padding: 8px 16px;
}
.menu a:hover {
background-color: #f0f0f0;
}垂直下拉菜单
结合:hover伪类和绝对定位实现二级菜单展开。注意设置position: relative作为定位基准点。
.menu li {
position: relative;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.menu li:hover .submenu {
display: block;
}响应式设计
使用媒体查询适配移动设备，通常将水平菜单转换为垂直汉堡菜单。需要配合JavaScript实现点击触发。
@media (max-width: 768px) {
.menu {
flex-direction: column;
display: none;
}
.menu.active {
display: flex;
}
}动画效果增强
通过CSS过渡或变换属性添加平滑动画。例如下拉菜单的淡入效果或按钮的颜色渐变。
.submenu {
opacity: 0;
transition: opacity 0.3s ease;
}
.menu li:hover .submenu {
opacity: 1;
}无障碍优化
确保菜单可通过键盘导航操作，使用ARIA属性标注角色状态。高对比度颜色和足够点击区域改善可用性。
<nav aria-label="主菜单">
<ul role="menubar">
<li role="none"><a role="menuitem" href="#">项目</a></li>
</ul>
</nav>
