如何 - 全屏覆盖导航
学习如何创建全屏覆盖导航菜单。
点击下面的按钮查看它的工作原理
自己试试 »创建全屏覆盖导航
步骤 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; /* 30 像素顶部边距，以避免在较小屏幕上与关闭按钮冲突 */
}
/* 覆盖层内的导航链接 */
.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 为隐藏（禁用垂直滚动，除了小屏幕）
从顶部向下滑动
/* 打开 */
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 导航栏教程，了解更多关于导航栏的信息。
