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
Post a Comment