在現代網頁設計中，導航選單是極大增強使用者體驗的重要組成部分。滑入式導航菜單是一種時尚且用戶友好的設計。在本部落格中，我們將逐步介紹如何使用 HTML、CSS 和 JavaScript 建立滑入式導覽選單。本教學非常適合希望透過時尚且實用的導航系統來增強其網站的 Web 開發人員。
CSS 中的過渡屬性
CSS 中的過渡屬性用於在 CSS 屬性從一種狀態變更為另一種狀態時建立平滑的動畫。它允許您指定哪些屬性應該被動畫化、動畫的持續時間、計時函數（動畫如何進行）以及動畫開始之前的延遲。以下是過渡屬性及其使用方法的詳細說明：
文法
1 | transition: property duration timing-function delay;
|
登入後複製
組件
- property：指定要設定動畫的 CSS 屬性。您幾乎可以為所有 CSS 屬性設定動畫，例如寬度、高度、背景顏色、不透明度等。您也可以使用關鍵字 all 為所有可轉換的屬性設定動畫。
- 持續時間：定義過渡需要多長時間。它以秒為單位（例如，1s 表示 1 秒）或毫秒（例如，500ms 表示 500 毫秒）。
- timing-function：這描述如何計算轉換的中間值。常見值包括：
- 線性：從開始到結束的過渡是均勻的。
- ease：過渡開始緩慢，然後加速，然後再次減慢（預設值）。
- 緩入：過渡緩慢開始。
- ease-out：過渡緩慢結束。
- 緩入：過渡緩慢地開始和結束。
- 您也可以使用三次貝塞爾函數定義自訂計時函數。
- 延遲：這定義了開始轉換之前等待的時間。與持續時間一樣，它以秒或毫秒為單位指定。預設值為 0s（無延遲）。
首先，讓我們從 HTML 結構開始。這將定義我們的滑入式選單所需的元素。 （了解更多）
輸出：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-in Navigation Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Menu Toggle Button -->
<button onclick="toggleMenu()">Toggle Menu</button>
<!-- Navigation Menu -->
<div class="menu" id="menu">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">About</a>
<a href="#" class="menu-item">Services</a>
<a href="#" class="menu-item">Contact</a>
<a href="#" class="menu-item" onclick="closeMenu()">Close</a>
</div>
<script src="script.js"></script>
</body>
</html>
|
登入後複製
接下來，讓我們加入 CSS 來設定選單樣式並控制其滑動行為。建立一個名為 styles.css 的檔案並加入以下樣式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .menu {
position: fixed;
top: 0;
left: -250px;
height: 100%;
width: 250px;
background-color: #ee3646;
transition: left 0.3s ease;
z-index: 1000;
}
.menu.active {
left: 0;
}
.menu-item {
padding: 10px;
color: #fff;
text-decoration: none;
display: block;
}
|
登入後複製
現在，讓我們加入 JavaScript 來處理選單的滑動行為。建立一個名為 script.js 的檔案並加入以下程式碼：
1 2 3 4 5 6 7 8 9 | function toggleMenu() {
const menu = document.getElementById('menu');
menu.classList.toggle('active');
}
function closeMenu() {
const menu = document.getElementById('menu');
menu.classList.remove('active');
}
|
登入後複製
這是 JavaScript 的作用：
- toggleMenu()：此函數切換選單上的活動類，使其滑入和滑出視圖。
- closeMenu()：此函數從選單中刪除活動類，確保點擊關閉連結時它會滑出視圖。
把它們放在一起
若要查看滑入式導覽功能表的實際效果，請確保所有三個檔案（index.html、styles.css、script.js）都位於同一目錄中，並在 Web 瀏覽器中開啟 index.html。點選「切換選單」按鈕應將選單從左側平滑地滑入視圖。點擊選單中的“關閉”連結會將其滑回視圖之外。
結論
使用 HTML、CSS 和 JavaScript 建立滑入式導覽功能表是一個簡單的過程，可以顯著增強網站上的使用者體驗。透過嘗試不同的樣式、動畫和功能，您可以根據網站的需求創建獨特且用戶友好的導航。
閱讀全文 - 掌握 CSS 翻譯屬性的藝術
以上是使用 HTML、CSS 和 JavaScript 建立滑入式導覽選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
