如何使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";
    }
}