数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何使用 CSS 和 JavaScript 创建可折叠侧边栏菜单？
可折叠面板是一个基本的容器教练视图，它创建一个可以包含其他控件的区域。此区域可以是冗长的，也可以折叠以显示或隐藏数据。
要创建可折叠侧边栏菜单，我们需要HTML、CSS和javascript。可折叠侧边栏将与主页面一起折叠。简单来说，这意味着菜单栏及其相应宽度显示在页面上；页面的主要内容采用最小边距在页面上显示。
以下是创建可折叠侧边栏菜单的步骤。在这个例子中，我们正在创建一个显示“可折叠侧边栏菜单”的网页。点击后会显示一个包含 4 个链接的菜单。
Example.html
创建一个HTML文件，我们将在其中定义页面的结构（视图）。在这个例子中，我们使用 HTML 代码创建当前页面，其中包含所需的文本、可折叠侧边栏菜单和菜单的空导航链接。
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="hide()">×</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Career</a>
<a href="#">ContactUs</a>
</div>
<div id="content">
<button class="openbtn" id="openbtn" onclick="show()">☰</button>
<h2>Collapsed Sideber</h2>
<p>
Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim.
</p>
</div>
Example.css
添加CSS样式以在可折叠侧边栏菜单上提供悬停效果，使其看起来更好。在这个例子中，我们正在设置可折叠侧边栏的样式，如果悬停在链接上，背景颜色将发生改变。
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: black;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#content {
transition: margin-left 0.5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
Example.js
使用 Javascript，我们可以执行验证并在页面上处理事件。在这个例子中，创建显示和隐藏按钮。导航将通过点击菜单栏按钮打开，并通过点击关闭按钮关闭。
让我们看看 javascript 代码以便更好地理解：
<script>
function show() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}
function hide() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
}
</script>
完整示例
让我们看一个完整的示例，说明如何使用CSS、HTML和Javascript折叠侧边栏。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: black;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#content {
transition: margin-left 0.5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="hide()">×</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Career</a>
<a href="#">ContactUs</a>
</div>
<div id="content">
<button class="openbtn" id="openbtn" onclick="show()">☰</button>
<h2>Collapsed Sideber</h2>
<p>
Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim.
</p>
</div>
<script>
function show() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}
function hide() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
}
</script>
</body>
</html>
更新于：2022年12月19日
7K+ 浏览量
广告