資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 和 JavaScript 建立全屏疊加導航選單？
在本文中，我們將討論如何使用 CSS 和 JavaScript 建立全屏疊加導航選單。
Web 應用中的疊加層無非是在其他 HTML 元素之上疊加一個 HTML 元素。我們可以疊加影像、頁面、文字等。
建立**全屏疊加導航**欄有三種方法，如下所示。
從左側，
從頂部，以及
無動畫。
沒有直接建立疊加層的方法；您可以使用上面指定的技術疊加兩個 HTML 元素。
建立全屏疊加導航選單的步驟
以下是建立全屏疊加導航選單的步驟。
建立一個 div，類名為 overlay，將疊加層樣式設定為 **z-index:1, top:0, left:0, 和 overflow-x: hidden。**
建立一個 openNav 函式，並在函式內部使用樣式，透過使用 DOM (**document.getElementById("myNav").style.width = "100%"**) 將頁面顯示為 100%。
建立一個 closeNav 函式，並在函式內部使用樣式，透過使用 DOM (**document.getElementById("myNav").style.width = "0%"**) 隱藏頁面。
使用 **onClick** 方法呼叫這兩個函式，openNav 用於開啟按鈕，closeNav 用於關閉按鈕。
在下面的示例中，我們正在從左側建立一個全屏疊加導航欄。
Example.html
在本節中，我們建立四種類型的連結並新增開啟和關閉按鈕。
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Navigation </h2>
<p>Click on the element below menu bar.</p>
<span style="font-size: 30px; cursor: pointer; color: rgb(123, 234, 39)" onclick="openNav()">☰</span>
Example.css
在本節中，我們設定頁面的背景顏色，並在滑鼠懸停在連結上時更改連結的顏色。如果我們在 overlay 類中設定樣式 height: 100%; width: 0;，它將從左側疊加。
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 18, 18);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: absolute;
display: grid;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
width: 40%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
/*media query*/
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
Example.js
在本部分中，我們定義了兩個函式 - **openNav** 和 **closeNav**。如果您單擊選單按鈕，頁面將以其全寬顯示。如果您單擊關閉按鈕，頁面的寬度將為 0%。
<!-- Javascript -->
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 18, 18);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: absolute;
display: grid;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
width: 40%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
/*media query*/
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Navigation</h2>
<p>Click on the element below menu bar.</p>
<span style="font-size: 30px; cursor: pointer; color: rgb(123, 234, 39)" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
更新於：2022-12-19
2K+ 瀏覽量
廣告