Friday, June 6, 2014

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:

Post a Comment