数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 和 JavaScript 创建一个侧边栏菜单？
在这篇文章中，我们将使用 CSS 和 JavaScript 创建一个侧边栏菜单。
侧边栏菜单允许您在激活按钮时将内容显示为侧边栏。这有助于您在侧边导航面板中显示网站的某些方面，从而为您的访客提供用户友好的熟悉感。
侧边栏菜单也可以通过左右滑动来访问（如果您使用的是触摸屏设备），具体取决于您网站的设计。这通常用于网站链接过多，无法容纳在顶部水平导航栏中的情况。
在以下示例中，我们正在进行侧边栏菜单，如果您单击菜单栏，则导航将可见，页面内容将被隐藏。
Example.html
创建一个 HTML 文件，我们将在其中定义页面的结构（视图）。在本例中，使用 HTML 代码，我们正在创建当前页面，其中包含所需的文本、侧边栏覆盖菜单和菜单的空导航链接。
<body>
<div id="mySide-nav" class="side-nav">
<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>
<div id="main">
<span style="font-size: 30px; cursor: pointer" onclick="openNav()">☰</span>
<h2>Side Navigation bar</h2>
<p>click on the above menu bar to see how off-canvas menu work.</p>
</div>
Example.css
添加 CSS 样式以使网页元素具有动画效果，使其外观更佳。在本例中，我们正在设置侧边导航栏的样式（添加颜色，指定导航栏的宽度）并添加菜单元素的悬停效果（红色）。
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(60, 198, 136);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
font-weight: bold;
font-style: italic;
}
.side-nav a:hover {
color: red;
}
.side-nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
#main span:hover {
color: green;
}
@media screen and (max-height: 450px) {
.side-nav {
padding-top: 15px;
}
.side-nav a {
font-size: 18px;
}
}
</style>
Example.js
使用 JavaScript，我们可以执行验证并在页面上处理事件。在本例中，我们将使用 JavaScript 代码来打开和关闭侧边栏菜单。
为此，我们可以使用监听器来捕获（监听）菜单和关闭按钮上的鼠标点击操作，并执行相应的操作。
<script>
function openNav() {
document.getElementById("mySide-nav").style.width = "250px";
document.getElementById("main").style.display = "none";
}
function closeNav() {
document.getElementById("mySide-nav").style.width = "0";
document.getElementById("main").style.display = "block";
}
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(60, 198, 136);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
font-weight: bold;
font-style: italic;
}
.side-nav a:hover {
color: red;
}
.side-nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
#main span:hover {
color: green;
}
@media screen and (max-height: 450px) {
.side-nav {
padding-top: 15px;
}
.side-nav a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="mySide-nav" class="side-nav">
<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>
<div id="main">
<span style="font-size: 30px; cursor: pointer" onclick="openNav()">☰</span>
<h2>Side Navigation bar</h2>
<p>click on the above menu bar to see how off-canvas menu work.</p>
</div>
<script>
function openNav() {
document.getElementById("mySide-nav").style.width = "250px";
document.getElementById("main").style.display = "none";
}
function closeNav() {
document.getElementById("mySide-nav").style.width = "0";
document.getElementById("main").style.display = "block";
}
</script>
</body>
</html>
更新于： 2022-12-19
1K+ 阅读量
广告