Mobile menu toggle with jquery

Hello Guys

For make responsive menu with jquery easily, follow these steps

1. Call this line above of your menu ul tag.
<a class="toggleMenu" style="display: inline-block;" href="#">menu</a>

2. Apply "nav" class on your menu ul tag.

3.  Just use this code in your footer 
<script type="text/javascript">

$(document).ready(function(){
    $(".toggleMenu").click(function(){
        $(".nav").slideToggle("slow");
    });
});




</script> 



4. call this css in your css style.


.toggleMenu { display:none !important;}






 /*---This css apply in screen less than 767 ----*/
@media (max-width: 767px) {


.toggleMenu { display:block !important;}
.nav { display:none;}


}




Comments

Popular posts from this blog

50 Beautiful Color Palettes for Your Next Web Project

Website Color Palettes: The Palettes of 50 Visually Impactful Websites to Inspire You Css Zilla