Responsive Slide-Down Side Navigation Menu
HTML:
<div id="outer" class="drop-down">
<div class="sideMenu">SIDE MENU</div>
<ul id="responsive" class="menu">
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a>
<ul class="child-menu">
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item"><a href="#">Link 3</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Link a</a></li>
</ul>
</div>
==============================
jQuery:
$(".sideMenu").click(function(){
$("#responsive").slideToggle( "slow", function() {});
});
============================
show it and hide it on window resize
$( window ).resize(function() {
if($( window ).width() >= 690) {
$("#responsive").show();
}
else {
$("#responsive").hide();
}
});
No comments: