Javascript 如何使css响应topnav滑入滑出

我从w3schools获得了这段代码。 它是一个反应灵敏的顶部导航，在媒体查询660px上尖叫，但当我点击时，它没有任何天赋，它只是出现和消失。 我怎样才能让它慢慢地滑进滑出呢

javascript-

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

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
} 

html

css很长，但只要html和js就足够了，

---

提前感谢。

您可以使用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;
}

当您单击某个按钮时，将

.discover header

类添加到

.header

---

这是我为代码中的滑入和滑出所做的工作。：）

您可以使用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;
}

当您单击某个按钮时，将

.discover header

类添加到

.header

---

这是我为代码中的滑入和滑出所做的工作。：）

您可以通过各种方法实现这一点

使用jQuery slideToggle类-引用（）

在您的例子中，这似乎是使用与类“.topnav”和“.responsive”关联的CSS实现的，因此您可以使用CSS转换效果和高度来实现您的目标。因为我不能看你们的CSS，所以我可以提供一个例子供参考。 e、 g.topnav{-webkit转换：.5s易用；} 检查此链接（）

HTML

JS

---

你可以通过各种方法来实现这一点

使用jQuery slideToggle类-引用（）

在您的例子中，这似乎是使用与类“.topnav”和“.responsive”关联的CSS实现的，因此您可以使用CSS转换效果和高度来实现您的目标。因为我不能看你们的CSS，所以我可以提供一个例子供参考。 e、 g.topnav{-webkit转换：.5s易用；} 检查此链接（）

HTML

JS

---

同时发布css，或创建js提琴。查看css转换：同时发布css，或创建js提琴。查看css转换：

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

.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;}

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