如何 - 隐藏式菜单
学习如何创建隐藏式菜单。
尝试一下 »
创建隐藏式菜单
步骤 1) 添加 HTML
示例
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">客户</a>
<a href="#">联系</a>
</div>
<!-- 使用任何元素来打开侧边导航栏 -->
<span onclick="openNav()">打开</span>
<!-- 如果您希望侧边导航栏将页面内容推到右侧，请将所有页面内容放在此 div 中（如果您只需要侧边导航栏位于页面顶部，则不需要使用） -->
<div id="main">
...
</div>
步骤 2) 添加 CSS
示例
/* 侧边导航栏 */
.sidenav {
height: 100%; /* 全高 */
width: 0; /* 宽度为 0 - 使用 JavaScript 更改 */
position: fixed; /* 固定位置 */
z-index: 1; /* 位于顶部 */
top: 0;
left: 0;
background-color: #111; /* 黑色 */
overflow-x: hidden; /* 禁用水平滚动 */
padding-top: 60px; /* 将内容放置在距离顶部 60px 的位置 */
transition: 0.5s; /* 0.5 秒过渡效果，以滑动侧边导航栏 */
}
/* 导航栏链接 */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* 当您将鼠标悬停在导航链接上时，更改其颜色 */
.sidenav a:hover {
color: #f1f1f1;
}
/* 定位和设置关闭按钮的样式（右上角） */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* 页面内容样式 - 如果您希望在打开侧边导航栏时将页面内容推到右侧，请使用此样式 */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* 在较小的屏幕上，如果高度小于 450 像素，请更改侧边导航栏的样式（较小的填充和较小的字体大小） */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
步骤 3) 添加 JavaScript
画布外菜单
/* 将侧边导航栏的宽度设置为 250 像素，并将页面内容的左侧边距设置为 250 像素 */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* 将侧边导航栏的宽度设置为 0，并将页面内容的左侧边距设置为 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
尝试一下 »
下面的示例还将侧边导航栏滑入，并将页面内容推到右侧，只是这一次，我们在 body 元素中添加了一个不透明度为 40% 的黑色背景颜色，以“突出显示”侧边导航栏。
画布外菜单（含不透明度）
/* 将侧边导航栏的宽度设置为 250 像素，并将页面内容的左侧边距设置为 250 像素，并为 body 添加黑色背景颜色 */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 将侧边导航栏的宽度设置为 0，并将页面内容的左侧边距设置为 0，并将 body 的背景颜色设置为白色 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
尝试一下 »
提示：访问我们的 CSS 导航栏教程，了解更多关于导航栏的信息。
