如何创建 - 窗帘菜单
了解如何创建窗帘导航菜单。
单击下面的按钮以查看其工作原理:
亲自试一试 »创建窗帘菜单
步骤 1) 添加 HTML:
实例
<!-- 叠加层 -->
<div id="myNav" class="overlay">
<!-- 用于关闭覆盖导航的按钮 -->
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<!-- 叠加内容 -->
<div
class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!-- 使用任何元素打开/显示覆盖导航菜单 -->
<span onclick="openNav()">open</span>
步骤 2) 添加 CSS:
实例
/* 叠加层（背景） */
.overlay {
/* Height & width 取决于您希望如何显示叠加层（请参阅下面的 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); /* Black w/opacity */
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% 宽度）在覆盖导航菜单中滑动:
Slide in from the side
/* 当有人点击 span 元素时打开 */
function openNav() {
document.getElementById("myNav").style.width
= "100%";
}
/* 当有人点击覆盖层内的 "x" 符号时关闭 */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
亲自试一试 »
下面的示例在覆盖导航菜单中从顶部向下滑动（0 到 100% 高度）。
注释: 在此示例中，请注意 CSS 与上面的稍有不同（默认高度现在为 0，宽度为 100%，并且溢出-y 被隐藏（禁用垂直滚动，小屏幕除外））:
从顶部向下滑动
/* Open */
function openNav() {
document.getElementById("myNav").style.height
= "100%";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
亲自试一试 »
此示例打开没有动画的导航菜单:
打开没有动画的菜单
/* Open */
function openNav() {
document.getElementById("myNav").style.display
= "block";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
亲自试一试 »
提示: 转到我们的 CSS 导航栏教程，了解有关导航栏的更多信息。
