Question

我有来自w3schools的代码。它是一个响应性的顶级导航，shriks媒体查询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”和“.responsive”类相关联的CSS发生的，因此您可以使用带有高度的CSS过渡效果来实现您的目标。因为我无法查看你的CSS所以我可以提供示例供参考。例如.topnav {-webkit-transition：.5s ease-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";
    }
}

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

2 个答案: