資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用HTML、CSS和JavaScript建立可懸停的側邊導航欄
導航欄是網頁的一部分，它包含指向網站中相應部分/頁面的連結，幫助使用者快速輕鬆地瀏覽網站。導航欄的實現方式有很多種，但傳統實現方式是水平和垂直欄。
在這篇文章中，我們將使用HTML、CSS和JavaScript設計一個垂直側邊導航欄。
建立可懸停的側邊導航欄
以下是使用HTML、CSS和JavaScript設計可懸停側邊導航按鈕的步驟：
步驟1 − 新增以下HTML程式碼。
<body>
<div class="sidenav">
<a href="#" id="home" onclick="showContent('homeContent')">Home</a>
<a href="#" id="codingground" onclick="showContent('codingGroundContent')">Coding Ground</a>
<a href="#" id="jobs" onclick="showContent('jobsContent')">Jobs</a>
<a href="#" id="library" onclick="showContent('libraryContent')">Library</a>
<a href="#" id="articles" onclick="showContent('articlesContent')">Articles</a>
<a href="#" id="corporatetraining" onclick="showContent('corporateTrainingContent')">Corporate Training</a>
</div>
<div id="homeContent" style="display: none;">
<h2>Home Content</h2>
<p>This is the content for the Home page.</p>
</div>
<div id="codingGroundContent" style="display: none;">
<h2>Coding Ground Content</h2>
<p>This is the content for the Coding Ground page.</p>
</div>
<div id="jobsContent" style="display: none;">
<h2>Jobs Content</h2>
<p>This is the content for the Jobs page.</p>
</div>
<div id="libraryContent" style="display: none;">
<h2>Library Content</h2>
<p>This is the content for the Library page.</p>
</div>
<div id="articlesContent" style="display: none;">
<h2>Articles Content</h2>
<p>This is the content for the Articles page.</p>
</div>
<div id="corporateTrainingContent" style="display: none;">
<h2>Corporate Training Content</h2>
<p>This is the content for the Corporate Training page.</p>
</div>
</body>
步驟2 − 新增以下CSS程式碼。
對於懸停效果，我們使用了CSS:hover選擇器。 每當我們將滑鼠懸停在元素上時，:hover選擇器將選擇它。
<style>
.sidenav a {
position: absolute;
left: -80px;
transition: 0.1s;
padding: 14px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0px 25px 25px 0px;
}
.sidenav a:hover {
left: 0;
}
#home {
top: 20px;
background-color: #003300;
}
#codingground {
top: 80px;
background-color: #004a00;
}
#jobs {
top: 165px;
background-color: #006100;
}
#library {
top: 225px;
background-color: #007800;
}
#articles {
top: 285px;
background-color: #008f00;
}
#corporatetraining {
top: 345px;
background-color: #00ad00;
}
#homeContent, #codingGroundContent, #jobsContent, #libraryContent, #articlesContent, #corporateTrainingContent{
margin: auto;
display: flex;
width: 60%;
text-align: center;
display: none;
}
</style>
步驟3 − 包含以下指令碼。
<script>
function showContent(contentId) {
var content = document.getElementById(contentId);
content.style.display = "block";
}
</script>
完整示例
現在，讓我們組合以上所有HTML、CSS和JavaScript程式碼塊：
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Side Navigation with HTML, CSS and JavaScript</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.sidenav a {
position: absolute;
left: -80px;
transition: 0.1s;
padding: 14px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0px 25px 25px 0px;
}
.sidenav a:hover {
left: 0;
}
#home {
top: 20px;
background-color: #003300;
}
#codingground {
top: 80px;
background-color: #004a00;
}
#jobs {
top: 165px;
background-color: #006100;
}
#library {
top: 225px;
background-color: #007800;
}
#articles {
top: 285px;
background-color: #008f00;
}
#corporatetraining {
top: 345px;
background-color: #00ad00;
}
#homeContent,
#codingGroundContent,
#jobsContent,
#libraryContent,
#articlesContent,
#corporateTrainingContent {
margin: auto;
display: flex;
width: 60%;
text-align: center;
display: none;
}
</style>
<script>
function showContent(contentId) {
var content = document.getElementById(contentId);
content.style.display = "block";
}
</script>
</head>
<body>
<div class="sidenav">
<a href="#" id="home" onclick="showContent('homeContent')">Home</a>
<a href="#" id="codingground" onclick="showContent('codingGroundContent')">Coding Ground</a>
<a href="#" id="jobs" onclick="showContent('jobsContent')">Jobs</a>
<a href="#" id="library" onclick="showContent('libraryContent')">Library</a>
<a href="#" id="articles" onclick="showContent('articlesContent')">Articles</a>
<a href="#" id="corporatetraining" onclick="showContent('corporateTrainingContent')">Corporate Training</a>
</div>
<div id="homeContent">
<h2>Home Content</h2>
<p>This is the content for the Home page.</p>
</div>
<div id="codingGroundContent">
<h2>Coding Ground Content</h2>
<p>This is the content for the Coding Ground page.</p>
</div>
<div id="jobsContent">
<h2>Jobs Content</h2>
<p>This is the content for the Jobs page.</p>
</div>
<div id="libraryContent">
<h2>Library Content</h2>
<p>This is the content for the Library page.</p>
</div>
<div id="articlesContent">
<h2>Articles Content</h2>
<p>This is the content for the Articles page.</p>
</div>
<div id="corporateTrainingContent">
<h2>Corporate Training Content</h2>
<p>This is the content for the Corporate Training page.</p>
</div>
</body>
</html>
執行上述程式後，我們可以在螢幕的左上角看到六個按鈕。如果我們將滑鼠懸停在任何按鈕上，它都會顯示過渡效果。如果我們嘗試點選它，它將在螢幕上顯示相關內容。
更新於：2023年8月29日
247 次瀏覽
廣告