如何 - 全屏覆盖导航
了解如何创建全屏覆盖导航菜单。
点击下面的按钮查看效果
自己动手试一试 »创建全屏覆盖导航
步骤 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 导航栏教程 了解更多关于导航栏的信息。
