how to make css responsive topnav slide in and out

Question

I have this code from w3schools that works. Its a responsive top nav, shriks on media query 660px, but when I click, it has no flair,it just appears and disappears. How can I make it slide in and out slowly?

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>

The css is quite long, but just the html and js might be enough, Thanks in advance.

Answer 1

You can use CSS3 transition and transform to make slide in and slide out slowly.

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

add .reveal-header class to .header when you click on some button.

This is what I have done for slide in and slide out in my code. :)

Answer 2

You can acheive this by various methods.

Using jQuery slideToggle class - reference ( http://api.jquery.com/slidetoggle/ )

In your case this appears to be happening using CSS associated with class '.topnav' and '.responsive ', so you can achieve your objective using CSS transition effects with height. since I can't have a look at your CSS so I can just provide example for reference. eg .topnav { -webkit-transition: .5s ease-in; } check this link ( 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";
    }
}