极客笔记JavaScript 如何为移动设备创建汉堡菜单
汉堡菜单图标都有三根竖线，导航栏使用这个图标来在移动设备和平板电脑上展开和折叠菜单。本教程将教你从零开始创建一个汉堡菜单。
在这里，我们将使用HTML、CSS、JavaScript和Bootstrap创建一个带有导航栏的时尚汉堡菜单。
步骤
用户可以按照以下步骤创建一个带有汉堡菜单图标的导航栏。
- 步骤 1 - 创建一个包含导航栏和可展开菜单的容器类的div。
-
步骤 2 - 然后，在容器类内创建一个具有header类的div，该div应该包含一个具有menu_icon的div和一个带有文本的div。
-
步骤 3 - 在menu icon的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，并将其添加到头部部分的代码中。
用户可以通过在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的文档。