如何 - 窗帘式菜单
了解如何创建窗帘式导航菜单。
点击下面的按钮查看效果
自己动手试一试 »创建窗帘式菜单
步骤 1) 添加 HTML
示例
<!-- 覆盖层 -->
<div id="myNav" class="overlay">
<!-- 关闭覆盖层导航的按钮 -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<!-- 覆盖层内容 -->
<div class="overlay-content">
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">客户</a>
<a href="#">联系</a>
</div>
</div>
<!-- 使用任意元素打开/显示覆盖层导航菜单 -->
<span onclick="openNav()">打开</span>
步骤 2) 添加 CSS
示例
/* 覆盖层 (背景) */
.overlay {
/* 高度 & 宽度取决于您希望如何显示覆盖层 (见下方的 JS) */
height: 100%;
width: 0;
position: fixed; /* 固定在原地 */
z-index: 1; /* 位于顶部 */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* 黑色备用颜色 */
background-color: rgba(0,0,0, 0.9); /* 黑色带透明度 */
overflow-x: hidden; /* 禁用水平滚动 */
transition: 0.5s; /* 0.5 秒过渡效果，用于滑动进入或滑出覆盖层 (高度或宽度，取决于显示方式) */
}
/* 定位覆盖层内的内容 */
.overlay-content {
position: relative;
top: 25%; /* 距离顶部 25% */
width: 100%; /* 100% 宽度 */
text-align: center; /* 居中文本/链接 */
margin-top: 30px; /* 30px 顶部边距，以避免在小屏幕上与关闭按钮冲突 */
}
/* 覆盖层内的导航链接 */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* 显示为块状而不是内联 */
transition: 0.3s; /* 悬停时的过渡效果 (颜色) */
}
/* 当鼠标悬停在导航链接上时，改变它们的颜色 */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* 定位关闭按钮 (右上角) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* 当屏幕高度小于 450 像素时，更改链接的字体大小并重新定位关闭按钮，以免重叠 */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
步骤 3) 添加 JavaScript
下面的示例在触发时从左到右滑动显示覆盖层导航菜单 (宽度从 0 到 100%)
从侧边滑动进入
/* 点击 span 元素时打开 */
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* 点击覆盖层中的“x”符号时关闭 */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
自己动手试一试 »
下面的示例从顶部向下滑动显示覆盖层导航菜单 (高度从 0 到 100%)。
注意: 在此示例中，请注意 CSS 与上面的示例略有不同 (默认高度现在为 0，宽度为 100%，overflow-y 为 hidden (禁用垂直滚动，小屏幕除外))
从顶部向下滑动
/* 打开 */
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
/* 关闭 */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
自己动手试一试 »
此示例在没有动画的情况下打开导航菜单
无动画打开菜单
/* 打开 */
function openNav() {
document.getElementById("myNav").style.display = "block";
}
/* 关闭 */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
自己动手试一试 »
提示：访问我们的 CSS 导航栏教程 了解更多关于导航栏的信息。
