資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何為移動裝置建立漢堡包選單？
漢堡包選單圖示有三個垂直條，導航欄使用它在移動裝置和平板電腦上展開和摺疊選單。本教程將教我們從頭開始建立漢堡包選單。
在這裡，我們將使用 HTML、CSS、JavaScript 和 Bootstrap 建立一個帶有導航欄的時尚漢堡包選單。
步驟
使用者可以按照以下步驟建立帶有漢堡包選單圖示的導航欄。
步驟 1 − 建立一個帶有容器類的 div，其中包含一個導航欄和一個可擴充套件選單。
步驟 2 − 然後，在容器類內部建立一個帶有標題類的 div，該 div 應該包含一個帶有 menu_icon 的 div 和另一個帶有文字的 div。
步驟 3 − 在選單圖示 div 中，建立三個空 div 並相應地設定其樣式，就像漢堡包選單一樣。
步驟 4 − 使用 CSS 設定可擴充套件選單及其元素的樣式。
步驟 5 − 現在，透過 JavaScript 中的 id 訪問 menu_icon div 並新增一個點選事件監聽器。
步驟 6 − 在點選事件監聽器中，當用戶點選漢堡包選單圖示時，切換可擴充套件選單的顯示。
示例
在下面的示例中，我們使用了純 HTML、CSS 和 JavaScript 從頭開始建立了一個漢堡包選單。此外，我們還為選單圖示和可擴充套件選單 div 提供了背景顏色和不同的樣式。
在輸出中，使用者可以觀察到，當他們點選選單圖示時，帶有選單項的 div 會出現，當他們再次點選時，它會消失。
<html>
<head>
<style>
.container {
width: 100%;
}
.navbar {
width: 100%;
height: 3rem;
background-color: aqua;
border-radius: 12px;
padding: 5px 10px;
align-items: center;
display: flex;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
}
.menu_icon {
position: absolute;
width: 100%;
cursor: pointer;
}
.text {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.menu_icon div {
width: 35px;
height: 5px;
background-color: black;
margin: 8px 0;
}
.menu_items {
display: flex;
flex-direction: column;
font-size: 1.2rem;
text-decoration: none;
height: 10rem;
background-color: blue;
border-radius: 12px;
margin-top: 0.5rem;
}
.menu_items a {
padding: 5px;
color: white;
cursor: pointer;
}
.menu_items a:hover {
background-color: grey;
}
</style>
</head>
<body>
<div class = "container">
<div class = "navbar">
<div class = "header">
<div class = "menu_icon" id = "ham_burger">
<div> </div>
<div> </div>
<div> </div>
</div>
<div class = "text"> Logo </div>
</div>
</div>
<div class = "menu_items" id = "menu_items">
<a href = "link1"> Link 1 </a>
<a href = "link2"> Link 2 </a>
<a href = "link3"> Link 3 </a>
<a href = "link4"> Link 4 </a>
<a href = "link5"> Link 5 </a>
</div>
</div>
<h2> Creating the hamburger menu using HTML, CSS, and JavaScript. </h2>
</body>
<script>
let menu = document.getElementById('ham_burger');
let items = document.getElementById('menu_items');
menu.addEventListener('click', () => {
if (items.style.display != "none") {
items.style.display = "none";
} else {
items.style.display = "flex";
}
})
</script>
</html>
示例
在下面的示例中，我們使用了 Bootstrap 來設定導航欄和漢堡包選單圖示的樣式。使用者可以看到，我們在下面的程式碼中透過 CDN 匯入了 Bootstrap 並將其新增到 head 部分。
使用者可以透過更改 HTML 中的 Bootstrap 類輕鬆更改導航欄的樣式。此外，我們還實現了 JavaScript 來切換可擴充套件選單，就像我們在第一個示例中所做的那樣。
<html>
<head>
<style>
.fa-1x {
font-size: 1.5rem;
}
.navbar-toggler.toggler-example {
cursor: pointer;
}
.dark-blue-text {
color: #0A38F5;
}
</style>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel = "stylesheet" />
<link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel = "stylesheet" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css" rel = "stylesheet" />
</head>
<body>
<nav class = "navbar navbar-light light-blue lighten-4">
<a class = "navbar-brand" href = "#">Menu</a>
<button class = "dark-blue-text toggler-example" type = "button" id = "toggle"> <span class="dark-blue-text"> <i
Class = "fas fa-bars fa-1x"> </i> </span> </button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent1">
<ul class = "navbar-nav mr-auto">
<li class = "nav-item active">
<a class = "nav-link" href="#">Item 1 <span class = "sr-only"> (current) </span> </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Item 2 </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Item 3 </a>
</li>
</ul>
</div>
</nav>
<h2> Creating the hamburger menu icon using Bootstrap.</h2>
</body>
<script>
let item = document.getElementById('navbarSupportedContent1');
let button = document.getElementById('toggle');
button.addEventListener('click', () => {
if (item.style.display != "block") {
item.style.display = "block";
} else {
item.style.display = "none";
}
})
</script>
</html>
在本教程中，我們學習瞭如何為移動裝置建立帶有導航欄的漢堡包選單。在第一個示例中，我們沒有使用任何庫來建立漢堡包選單，甚至我們還使用 HTML、CSS 和 JavaScript 建立了一個選單圖示。
在第二個示例中，我們使用了透過 CDN 的 Bootstrap 來為導航欄設定樣式。但是，使用者可以根據自己的需求自定義 Bootstrap 導航欄的樣式，為此，使用者可以閱讀 Bootstrap 的文件。
1K+ 瀏覽量
