資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用HTML和CSS建立動畫側邊導航欄
導航欄是一個GUI元素，允許使用者瀏覽網站或應用程式。它通常是螢幕頂部或側邊的一系列連結，幫助使用者瀏覽網站內的各個區域或頁面。
導航欄在作業系統、檔案瀏覽器、網頁瀏覽器、應用程式、網站和其他類似的使用者介面中都有實現。
在本文中，我們將使用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>
如果我們執行上述程式，我們可以在右上角看到選單符號。如果點選該按鈕，側邊導航欄將開啟。要關閉導航欄，請點選側邊導航欄右上角的“關閉”按鈕。
更新於：2023年8月29日
瀏覽量：518
廣告