Question

<script>
$(function () {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();

    $('#pull').click(function (e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $('.link').click(function (e) {
        e.preventDefault();
        menu.slideToggle('1200');
    });

    $(window).resize(function () {
        var w = $(window).width();
        if (w < 600 && menu.is(':hidden')) {
            menu.removeAttr('style');
            enter code here
        }
    });
});
</script>

<nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#home" class="link">Home</a></li>
        <li><a href="#about" class="link">How-to</a></li>
        <li><a href="#work" class="link">Icons</a></li>
        <li><a href="#contact" class="link">Design</a></li>
    </ul>
<a href="#" id="pull"><img src="images/logo.png"/></a>
</nav>

I found this code online from a tutorial, and I have tweaked it a bit to make it what I want the navigation to do.I am having an issue with being able to toggle this menu up and down. I want it to be where I click on the #pull id, that it will toggle down and show me the links. Then, when I click on a link, I want it to toggle back up and hide the links, but I only want it to do that for the responsive aspect of the navigation, not when it is on the normal view of it. It toggles up whether it is responsive or not. PLEASE HELP ME!

Here Is A Link To The Files http://www.mediafire.com/download/cz1q3rg3fqm5pxh/Demo-Files.7z

Was it helpful?

Solution

trigger both responsively

var menu = $('nav ul'), plink = $('#pull, .link'), go;
function acdc() {
    var ww = $(window).width();
    if (ww>600 && go) {//on desktop
        if (menu.is(':hidden')) { menu.removeAttr('style'); }
        plink.unbind();
        go=false;
    } else if (ww<600 && !go) {//on small screen
        plink.on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
        go=true;
    }
}
acdc();
$(window).resize(function () { acdc(); });

made a fiddle: http://jsfiddle.net/filever10/Lt9V3/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top