如何使css響應topnav滑入和滑出

我有這個代碼w3schools工作。它是一個響應式頂級導航，在媒體上查詢660px，但當我點擊時，它沒有天賦，它只是出現並消失。我怎樣才能讓它進出緩慢？如何使css響應topnav滑入和滑出

的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可能就足夠了，在此先感謝。

來源

2017-08-11 Manuel E

發佈你的CSS還，或創建一個js小提琴。 – Muhammad

給CSS轉換一下：https://www.w3schools.com/css/css3_transitions.asp –

你可以通過各種方法實現這一點。

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

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

來源

2017-08-11 06:09:04

謝謝，你這個人 –

您可以使用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當你點擊一些按鈕。

這就是我所做的幻燈片和滑出我的代碼。 :)

來源

2017-08-11 06:03:42

如何使css響應topnav滑入和滑出

回答

相關問題