极客教程JavaScript 如何为移动设备创建汉堡包菜单
汉堡包菜单图标有三个竖条，导航条用来在移动和平板设备上展开和收拢菜单。本教程将教我们从头开始创建一个汉堡包菜单。
在这里，我们将使用HTML、CSS、JavaScript和Bootstrap来创建一个带有导航条的时尚汉堡包菜单。
操作步骤
用户可以按照下面的步骤来创建一个带有汉堡包菜单图标的导航条。
- 第1步– 创建一个带有容器类的div，包含一个导航条和一个可扩展的菜单。
-
第2步 – 之后，在容器类内创建一个带有标题类的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，并将其添加到头部部分。
用户可以通过改变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的文档。