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