我有一个用网格做的菜单,它分为 3 列。首先是我的 Logo ,其次是菜单项,最后是放置按钮的位置。我有媒体查询来隐藏菜单项并显示汉堡包图标。问题是,如何使菜单项在单击图标时下降到下方?
代码如下:
let menus = document.getElementsByClassName('hammburger-menu');
[].forEach.call(menus, function(m) {
m.addEventListener('click', function() {
m.classList.toggle('open');
})
});
body .navbar {
display: -ms-grid;
display: grid;
-ms-grid-rows: 50px;
grid-template-rows: 50px;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 10px;
}
body .navbar .brand {
width: 100%;
text-align: end;
}
body .navbar .hammburger-menu {
width: 40px;
height: 35px;
border: 0;
display: none;
margin: 0 auto;
cursor: pointer;
}
@media (max-width: 890px) {
body .navbar .hammburger-menu {
display: inline;
}
}
body .navbar .hammburger-menu div {
background-color: #fea100;
display: block;
width: 40px;
height: 4px;
margin: 5px auto;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
body .navbar .hammburger-menu.open .one {
-webkit-transform: translateY(9px) rotate(45deg);
transform: translateY(9px) rotate(45deg);
}
body .navbar .hammburger-menu.open .two {
opacity: 0;
}
body .navbar .hammburger-menu.open .three {
-webkit-transform: translateY(-9px) rotate(-45deg);
transform: translateY(-9px) rotate(-45deg);
}
body .navbar .navbar-nav {
text-align: center;
}
body .navbar .navbar-nav input {
position: relative;
top: 20%;
}
body .navbar .navbar-nav a {
color: #000000 !important;
font-family: "Sintony";
font-weight: 700;
size: 14px;
text-decoration: none;
padding: 10px;
}
@media (max-width: 890px) {
body .navbar .navbar-nav a {
display: none;
}
}
body .navbar .button {
width: 200px;
height: 47px;
background-color: #fea100;
border: none;
border-radius: 7px;
text-align: center;
}
body .navbar .button a {
border: 1px solid #ffffff;
color: #fff;
border-radius: 7px;
text-decoration: none !important;
padding: 10px;
position: relative;
top: 26%;
}
body .navbar .button img {
padding-right: 2px;
}
<nav class="navbar">
<a class="brand" href="#"><img src="https://via.placeholder.com/50
C/O https://placeholder.com/" alt=""></a>
<div class="navbar-nav slider-down">
<div for="nav-toggle" class="hammburger-menu">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<a class="nav-item nav-link " href="#">Home</a>
<a class="nav-item nav-link" href="#">Menu</a>
<a class="nav-item nav-link" href="#">Reservation</a>
<a class="nav-item nav-link" href="#">Recipe</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Pages</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
<div class="button">
<a href=""><img src="images/icon_plate_navbar_button.png">BOOK YOUR TABLE</a>
</div>
</nav>
最佳答案
首先,将链接分组到一个 div
<div class="hammburger-links">
<a class="nav-item nav-link " href="#">Home</a>
...
<a class="nav-item nav-link" href="#">Contact</a>
</div>
然后,当您应用 display: none
时,页面上将不存在任何内容。因此,我们改为应用 visibility: hidden
使其重新出现。
@media (max-width: 890px) {
.navbar-nav .hammburger-links {
visibility: hidden;
position: absolute;
}
.navbar-nav .hammburger-links a
{
display: block; /* make the links block element */
border: 1px solid black;
}
.navbar-nav.open .hammburger-links
{
visibility: visible; /* when the nav is opened, we make the links visible */
}
}
最后,我们没有将 .open
应用于汉堡包,而是将其应用于 .navbar-nav
[].forEach.call(menus, function(m) {
m.addEventListener('click', function() {
m.parentElement.classList.toggle('open');
});
});
Jsfiddle:https://jsfiddle.net/re9nu31k/
附言造型是你的工作;)
P.S.2 我不认为你需要在每个 css 选择器中包含 body
关于javascript - 如何在单击汉堡菜单按钮时显示网格菜单项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55531724/