css菜单制作
CSS 菜单制作方法
水平导航菜单
使用 display: inline-block 或 flexbox 创建水平菜单。HTML 结构为无序列表，CSS 设置列表项横向排列。
<ul class="horizontal-menu">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>.horizontal-menu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
.horizontal-menu li {
display: inline-block;
}
.horizontal-menu a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.horizontal-menu a:hover {
background-color: #111;
}垂直导航菜单
通过默认的块级元素特性或明确设置 display: block 实现垂直布局。
<ul class="vertical-menu">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>.vertical-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
.vertical-menu a {
display: block;
color: #000;
padding: 12px 16px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #555;
color: white;
}下拉菜单
结合伪类 :hover 和绝对定位实现下拉效果。需要嵌套 HTML 结构。
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
</div>
</div>.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}响应式菜单
使用媒体查询和 JavaScript 实现移动端适配。常见方案包括汉堡菜单。
<nav class="responsive-nav">
<a href="#" class="active">首页</a>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">☰</a>
</nav>.responsive-nav a {
float: left;
display: block;
text-align: center;
padding: 15px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.responsive-nav a:not(:first-child) {display: none;}
.responsive-nav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.responsive-nav.responsive {position: relative;}
.responsive-nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.responsive-nav.responsive a {
float: none;
display: block;
text-align: left;
}
}function toggleMenu() {
const nav = document.querySelector(".responsive-nav");
nav.classList.toggle("responsive");
}动画效果菜单
通过 CSS 过渡或动画属性增强交互体验。例如淡入或滑动效果。
.animated-menu a {
transition: all 0.3s ease;
}
.animated-menu a:hover {
transform: translateY(-5px);
opacity: 0.8;
}固定定位菜单
使用 position: fixed 实现滚动时保持可见的菜单栏。
.fixed-menu {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}圆角与阴影
通过 border-radius 和 box-shadow 提升视觉效果。
.styled-menu {
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}图标菜单
结合 Font Awesome 或 SVG 图标创建图文并茂的导航。
<a href="#"><i class="fas fa-home"></i> 首页</a>.fas {
margin-right: 8px;
}
