如何 - 窗帘菜单
了解如何创建窗帘导航菜单。
单击下面的按钮以查看它的工作原理
自己试试 »创建窗帘菜单
步骤 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 与上面的 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 导航栏教程，以了解更多关于导航栏的信息。
