如何使CSS響應式topnav滑入和滑出

Question

我有來自w3schools的有效代碼。 它是一個響應迅速的頂級導航，在媒體查詢660px上震動，但是當我單擊時，它沒有任何樣式，它只會顯示並消失。 如何使其緩慢滑入和滑出？

javascript-

<script>
   function myFunction() {
    var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
    x.className += " responsive";
   } else {
    x.className = "topnav";
 }
   } 
   </script>

html

 <div class="topnav" id="myTopnav"  >  
 <b>
     <a href="javascript:void(0);" class="icon"   onclick="myFunction()">&#9778;      </a></b>
        <a href="index.php"><div class="ordinary">  Home </div></a>
         <a href="contact.php"><div class="ordinary">   About </div></a>
         <a href="faqs.php"><div class="ordinary">   FAQ </div></a>
         <a href="login.php"> <div class="butt">   Login </div></a>
         <a href="register_now.php"><div class="butt">   Register </div></a>
        </div>

css很長，但是僅html和js就足夠了，謝謝。

Answer 1

您可以使用CSS3過渡和轉換來緩慢地滑入和滑出。

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #fff;
    transition: transform .4s;
    transform: translateY(-100%);
}

.reveal-header{
    transform: translateY(0px)!important;
    box-shadow: 0 0 10px 0 #999;
}

單擊某些按鈕時，將.reveal-header類添加到.header 。

這就是我在代碼中進行滑入和滑出的操作。 :)

Answer 2

您可以通過多種方法來實現。

使用jQuery slideToggle類-參考（ http://api.jquery.com/slidetoggle/ ）

在您的情況下，這似乎是通過使用與類“ .topnav”和“。響應”關聯的CSS發生的，因此您可以使用具有高度的CSS過渡效果來實現您的目標。 因為我看不到您的CSS，所以我只提供示例供參考。 例如.topnav {-webkit-transition：.5s easy-in; }檢查此鏈接（ https://codepen.io/mubarik/pen/XagxeL ）

的HTML

<div class="topnav" id="myTopnav"  >
<b><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9778;</a></b>
    <a href="index.php"><div class="ordinary">  Home </div></a>
    <a href="contact.php"><div class="ordinary">   About </div></a>
    <a href="faqs.php"><div class="ordinary">   FAQ </div></a>
    <a href="login.php"> <div class="butt">   Login </div></a>
    <a href="register_now.php"><div class="butt">   Register </div></a>
</div>

的CSS

.topnav{ height : auto; transition: .5s ease-in;}
.topnav > a { display: block; overflow: hidden;}
.topnav:not(responsive) > a {max-height: 0;transition: .5s ease-in;}
.topnav.responsive > a {max-height: 20px; transition: .5s ease-in;}

JS

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    }else{
        x.className = "topnav";
    }
}