使用 HTML 和 CSS 创建动画侧边导航栏
htmlcssweb developmentfront end technology更新于 2025/2/16 8:44:17
导航栏是一种 GUI 元素，允许用户在网站或应用程序中导航。它通常是屏幕顶部或侧面的链接列表，帮助用户导航到网站内的各个区域或页面。
导航栏在操作系统、文件浏览器、Web 浏览器、应用程序、网站和其他类似的用户界面中都有实现。
在本文中，我们将使用 HTML、CSS 和 JavaScript 设计一个动画侧边导航栏。
如何创建动画侧边导航栏
以下是使用 HTML、CSS 和 JavaScript 设计动画侧边导航栏的步骤 -
步骤 1 - 添加以下 HTML 代码。
<body>
<div id="sidemenu">
<a href="javscript:void(0)" class="btn-area" onclick="closeBtn()">Close</a>
<!—Side navigation bar content-->
<div class="mainNav">
<a href="#">Home</a>
<a href="#">Coding Ground</a>
<a href="#">Jobs</a>
<a href="#">Whiteboard</a>
<a href="#">Tools</a>
<a href="#">Corporate Training</a>
</div>
</div>
<div>
<span class="material-symbols-outlined" onclick="openBtn()">MENU</span>
</div>
<div class="content">
<h2>Tutorialspoint</h2>
</div>
</body>
步骤 2 − 添加以下 CSS 代码。
对于动画效果，我们使用了 CSS :hover 选择器 和 transform 属性。
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 700,
'GRAD' 0,
'opsz' 48
}
body {
background-color: #50C878;
}
#sidemenu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: whitesmoke;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mainNav {
margin-top: 70px;
}
.mainNav a {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 15px;
}
.content {
display: grid;
place-items: center;
height: 100vh;
}
.content h2 {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 50px;
color: white;
}
#sidemenu a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.4s;
text-align: center;
text-transform: uppercase;
}
#sidemenu a:hover {
color: black;
background: #50C878;
}
#sidemenu .btn-area {
position: absolute;
top: 0;
right: 15px;
}
span {
position: absolute;
right: 90px;
top: 30px;
font-size: 30px;
transition: 0.3s;
cursor: grab;
color: #000;
}
</style>
步骤 3:添加以下脚本。
以下代码描述了打开和关闭按钮的功能。
<script>
function openBtn(){
document.getElementById("sidemenu").style.width = "250px";
}
function closeBtn(){
document.getElementById("sidemenu").style.width = "0";
}
</script>
完整示例
现在，让我们将以上所有 HTML、CSS 和 JavaScript 代码块组合起来 -
<!DOCTYPE html>
<head>
<title>Animated Sidebar Navigation</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 700,
'GRAD' 0,
'opsz' 48
}
body {
background-color: #50C878;
}
#sidemenu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: whitesmoke;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mainNav {
margin-top: 70px;
}
.mainNav a {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 15px;
}
.content {
display: grid;
place-items: center;
height: 100vh;
}
.content h2 {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 50px;
color: white;
}
#sidemenu a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.4s;
text-align: center;
text-transform: uppercase;
}
#sidemenu a:hover {
color: black;
background: #50C878;
}
#sidemenu .btn-area {
position: absolute;
top: 0;
right: 15px;
}
span {
position: absolute;
right: 90px;
top: 30px;
font-size: 30px;
transition: 0.3s;
cursor: grab;
color: #000;
}
</style>
</head>
<body>
<div id="sidemenu">
<a href="javscript:void(0)" class="btn-area" onclick="closeBtn()">Close</a>
<div class="mainNav">
<a href="#">Home</a>
<a href="#">Coding Ground</a>
<a href="#">Jobs</a>
<a href="#">Whiteboard</a>
<a href="#">Tools</a>
<a href="#">Corporate Training</a>
</div>
</div>
<div>
<span class="material-symbols-outlined" onclick="openBtn()">MENU</span>
</div>
<div class="content">
<h2>Tutorialspoint</h2>
</div>
<script>
function openBtn(){
document.getElementById("sidemenu").style.width = "250px";
}
function closeBtn(){
document.getElementById("sidemenu").style.width = "0";
}
</script>
</body>
</html>
执行上述程序后，我们会在右上角看到菜单符号。点击该按钮，即可打开侧边导航栏。要关闭导航栏，请点击侧边导航栏右上角的"关闭"按钮。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
