資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
廣告