数据结构
网络
关系型数据库管理系统
操作系统
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.ac.cn/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+ 浏览量
