jquery - How to add a transition to a navbar dropdown -


i finished making navbar mobile , add transition drops down slower currently.

here jquery:

(function( $ ){       $(document).ready(function(){        $(".burguer-nav").on("click", function(){           $("header nav ul").toggleclass("open");         });     });     })(jquery); 

and css:

span.burguer-nav {     display: none; } @media screen , (max-width: 845px){     .main-navigation li {         display: block;         text-align:center;     }     .burguer-nav{         display: block !important;         height: 40px;         cursor: pointer;         font-size: 18pt;     }     header nav ul{         overflow:hidden;         height:0;         background-color: #505050;     }     header nav ul.open{         height:auto;     } } 

how , can add transition?

@media screen , (max-width: 845px){     .main-navigation li {         display: block;         text-align:center;     }     .burguer-nav{         display: block !important;         height: 40px;         cursor: pointer;         font-size: 18pt;     }     header nav ul{         overflow:hidden;         max-height:0;         background-color: #505050;         transition: 0.3s ease-in-out;     }     header nav ul.open{         max-height: 10000px;     } } 

you can't put transitions in height property. try this. exaggerating max-height doesn't affect performace of application.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -