我正在制作动画导航栏。现在我想使div 0px的高度,所以如果我点击一个按钮,菜单将弹出。但如果我将其更改为0px,则高度保持不变:
我希望有人可以帮助我。
HTML:
<div id="mobileMenu">
<a href="#"> <h1> Home </h1> </a>
<a href="#"> <h1> Blog </h1> </a>
<a href="#"> <h1> Lorem ipsum </h1> </a>
<a href="#"> <h1> Lorem ipsum </h1> </a>
<a href="#"> <h1> Contact </h1> </a>
</div>
CSS:
#mobileMenu {
position: fixed;
height: 0px;
z-index: 10;
top: 0;
margin-top: 50px;
width: 100%;
}
#mobileMenu a {
text-decoration: none;
color: white;
}
#mobileMenu h1 {
padding: 20px 0px;
font-size: 15px;
background-color: white;
color: black;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-family: OpenSans-Regular;
padding-left: 15%;
}
答案 0 :(得分:3)
您需要设置overflow: hidden;
。高度为0
但内容溢出,默认情况下overflow
为visible
。
div {
height: 0;
overflow: hidden;
}
<div id="mobileMenu">
<a href="#">
<h1> Home </h1> </a>
<a href="#">
<h1> Blog </h1> </a>
<a href="#">
<h1> Lorem ipsum </h1> </a>
<a href="#">
<h1> Lorem ipsum </h1> </a>
<a href="#">
<h1> Contact </h1> </a>
</div>
答案 1 :(得分:0)
您还可以使用CSS规则:在#mobileMenu display:none
中设置并通过JS动态更改display:block
#mobileMenu {
position: fixed;
display: none;
height: 0;
z-index: 10;
top: 0;
margin-top: 50px;
width: 100%;
}
#mobileMenu a {
text-decoration: none;
color: white;
}
#mobileMenu h1 {
padding: 20px 0px;
font-size: 15px;
background-color: white;
color: black;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-family: OpenSans-Regular;
padding-left: 15%;
}
&#13;
<div id="mobileMenu">
<a href="#">
<h1> Home </h1>
</a>
<a href="#">
<h1> Blog </h1>
</a>
<a href="#">
<h1> Lorem ipsum </h1>
</a>
<a href="#">
<h1> Lorem ipsum </h1>
</a>
<a href="#">
<h1> Contact </h1>
</a>
</div>
&#13;