div的高度不变CSS

Question

我正在制作一个动画导航栏。现在我想创建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%; 
} 

Answer 1

您需要设置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>

Answer 2

你也可以使用一个CSS规则：在#mobileMenu display:none，并通过与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%; 
 
}

<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>

JS改变设置