侧边导航

创建于 2024-12-03 / 48

字体： [默认] [大] [更大]

了解如何创建动画、可关闭的侧边导航菜单。

× About Services Clients Contact × About Services Clients Contact × About Services Clients Contact

亲自试一试 »

创建动画侧边导航

步骤 1) 添加 HTML:

实例

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>


<span onclick="openNav()">open</span>


<div id="main">
...
</div>

步骤 2) 添加 CSS:

实例

/* 侧边导航菜单 */
.sidenav {
  height: 100%; /* 100% 全高 */
  width: 0; /* 0 宽度 - 使用 JavaScript 更改 */
  position: fixed; /* 原地不动 */
  z-index: 1; /* 保持在顶部 */
  top: 0; /* 保持在顶部 */
  left: 0;
  background-color: #111; /* Black*/
  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 像素的小屏幕上，更改 sidenav 的样式（更少的填充和更小的字体大小）*/
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

步骤 3) 添加 JavaScript:

下面的示例在侧边导航中滑动，使其宽度为 250 像素:

Sidenav Overlay 实例

/* 设置侧边导航的宽度为 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

/* 设置侧边导航的宽度为 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} 亲自试一试 »

下例在侧边导航中滑动，将页面内容推送到右侧（用于设置侧边导航宽度的值也用于设置"页面内容"的左边距）:

侧边导航推送内容

/* 设置侧边导航的宽度为250px，页面内容的左边距为250px */
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% 的黑色背景色，以"突出显示"侧边导航:

带不透明度的侧边导航推送内容

/* 设置侧边导航的宽度为250px，页面内容的左边距为250px，并为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";
} 亲自试一试 »

下面的示例从左侧滑入侧边导航并覆盖整个页面（100% 宽度）:

侧边导航 Full-width:

/* 打开侧导航 */
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}

/* 关闭/隐藏侧导航 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} 亲自试一试 »

下面的示例打开和关闭没有动画的侧导航菜单:

没有动画的没边导航

/* 打开侧导航 */
function openNav() {
document.getElementById("mySidenav").style.display = "block";
}

/* 关闭/隐藏侧导航 */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
} 亲自试一试 »

下面的示例显示了如何创建右侧导航菜单:

右侧导航:

.sidenav {
right: 0;
} 亲自试一试 »

下面的示例显示了如何创建始终显示（固定）的侧边导航菜单:

始终显示侧边导航:

/* 侧导航 */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}

/* 页面内容 */
.main {
margin-left: 200px; /* 与 sidenav 的宽度相同 */
} 亲自试一试 »

提示: 转到我们的 CSS 导航栏教程，了解有关导航栏的更多信息。

0 人点赞过