汉堡菜单代码
时间: 2023-07-02 14:05:13 浏览: 77
以下是一个简单的汉堡菜单代码示例:
HTML代码:
```
<nav>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style:none;
margin:0;
padding:0;
}
nav ul li {
margin:0 10px;
}
nav .hamburger-menu {
display: none;
}
@media screen and (max-width: 768px) {
nav ul {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: #333;
padding: 20px;
transition: transform 0.3s ease-in-out;
transform: translateY(-100%);
}
nav ul.open {
transform: translateY(0%);
}
nav ul li {
margin: 10px 0;
}
nav .hamburger-menu {
display: block;
cursor: pointer;
}
nav .bar {
height: 3px;
width: 25px;
background-color: #fff;
margin: 5px 0;
transition: transform 0.3s ease-in-out;
}
nav .hamburger-menu.open .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
nav .hamburger-menu.open .bar:nth-child(2) {
opacity: 0;
}
nav .hamburger-menu.open .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
```
JavaScript代码:
```
const hamburgerMenu = document.querySelector('.hamburger-menu');
const navList = document.querySelector('nav ul');
hamburgerMenu.addEventListener('click', () => {
hamburgerMenu.classList.toggle('open');
navList.classList.toggle('open');
});
```
这个代码示例创建了一个响应式汉堡菜单,当屏幕小于768像素时,菜单将变成一个汉堡按钮,点击按钮将展开一个下拉菜单。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)