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改變設置