我正在制作动画导航栏。现在我想让 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%;
}
最佳答案
需要设置overflow: hidden;
。高度为0
但内容溢出,overflow
默认可见
。
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>
关于html - div 的高度不会改变 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42560791/