Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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


}






This post first appeared on Css Zilla, please read the originial post: here

Share the post

Mobile menu toggle with jquery

×

Subscribe to Css Zilla

Get updates delivered right to your inbox!

Thank you for your subscription

×