javascript - 当我按下图标时,移动幻灯片菜单位于文本下方/文本超出 ul
解决方案
欢迎来到 StackOverflow。
这是一个可以帮助您的示例:
a {
color: #fff;
text-decoration: none;
}
/* Hamburger */
.hamburger1 {
height: 45px;
margin: 10px;
display: -ms-grid;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
z-index: 120;
}
.hamburger1 div {
background-color: rgb(61, 61, 61);
position: relative;
width: 40px;
height: 5px;
margin-top: 7px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#toggle1 {
display: none;
}
#toggle1:checked+.hamburger1 .top {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 22.5px;
}
#toggle1:checked+.hamburger1 .meat {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -5px;
}
#toggle1:checked+.hamburger1 .bottom {
-webkit-transform: scale(0);
transform: scale(0);
}
#toggle1:checked~.menu1 {
height: 340px;
}
/* Menu */
.menu1 {
width: 100%;
background-color: #02173F;
margin: 0;
display: -ms-grid;
display: grid;
grid-template-rows: 1fr repeat(4, 0.5fr);
grid-row-gap: 25px;
padding: 0;
list-style: none;
clear: both;
width: auto;
text-align: center;
height: 0px;
overflow: hidden;
transition: height .4s ease;
z-index: 120;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu1 a:first-child {
margin-top: 40px;
}
.menu1 a:last-child {
margin-bottom: 40px;
}
.navlink {
width: 100%;
margin: 0;
padding: 10px 0;
font: 700 20px 'Oswald', sans-serif;
}
.navlink:hover {
background-color: #fff;
color: rgb(61, 61, 61);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
<section class="p-menu1">
<nav id="navbar" class="navigation" role="navigation">
<input id="toggle1" type="checkbox" />
<label class="hamburger1" for="toggle1">
<div class="top"></div>
<div class="meat"></div>
<div class="bottom"></div>
</label>
<nav class="menu1">
<a class="navlink" href="#">Home</a>
<a class="navlink" href="#">About</a>
<a class="navlink" href="#">Blog</a>
<a class="navlink" href="#">Contact</a>
</nav>
</nav>
</section>
我还建议你看看W3Schools。