0

I am trying to make my navigation bar for my website responsive. I have everything working from the desktop and tablet view, but when the menu collapses in the mobile view, it does not expand when I click on it. Below is my html, which includes inline jQuery.

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

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

$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});

</script>
<nav class="clearfix">  
    <ul class="clearfix"; style="width:100%">  
                <li><a href="homepage.html">Home</a>
                </li>
                <li><a href="mobilestrategy.html">Mobile Strategy</a>

                </li>
                <li><a href="uiux.html">UI/UX</a>

                </li>
                <li><a href="development.html">Development</a>

                </li>
                <li><a href="qa.html">QA</a></li>
            </ul>
<a href="homepage.html" id="pull">Menu</a> 
</nav>

and below is the CSS to style it all

nav {  
    height: 40px;  
    width: 99%;  
    background:#bbddff;  
    font-size: .8em;  
    font-family:Gills Sans Light, Arial, sans-serif;  
    position: relative;  
    border-bottom: 2px solid #283744;
    color: #121976 /*dark blue*/;
    text-decoration: none;
    -webkit-box-shadow: 5x 5px 5px #88ccff;
    -moz-box-shadow: 5px 5px 5px #88ccff;
    box-shadow: 5px 5px 5px #88ccff;
    border: 3px ridge #aaccff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}


nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 100%;
    height:50px;}


nav li {  
    display: inline;  
    float: left;  
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

nav a {  
    color: #121976;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    text-shadow: 1px 1px 0px #283744;  
}  

nav li a {  
    border-right: 3px ridge #aaccff;;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 1 px solid #576979;  
}  
nav a:hover, nav a:active {  
    background-color: #121976;
    color:#bbddff;  
} 

nav a#pull {  
    display: none;  
}

/*Tablet styling*/

@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {   
        border-right: 1px solid #576979;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
} 
/*small tablet*/
@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #bbddff;
        color:#121976;
        width: 100%;  
        position: relative;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }  
    nav a#pull:after {  
        content:"";  
        /*background: url('nav-icon.png') no-repeat;*/  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;  
        top: 10px;
    }  
}  

/*Mobile view*/
@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #576979;  
    }  
}  

is there something wrong with my jQuery code that is keeping the navigation bar from working in the mobile view?

1

2 Answers 2

0

You didnt closed the ready function, try this

$(document).ready(function() {  
    var pull        = $('#pull');  
        menu        = $('nav ul');  
        menuHeight  = menu.height(); 
alert(pull.width());        

    $(pull).on('click', function(e) { 

        e.preventDefault();  
        menu.slideToggle();  
    });  
});
$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});
0

You didn't close your $(document).ready(

jsFiddle joy

$(document).ready(function() {  
    var pull        = $('#pull');   
    var menu        = $('nav ul'); // don't miss the var
    var menuHeight  = menu.height();  // don't miss the var

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

    $(window).resize(function(){  
        var w = $(window).width();  
        if(w > 320 && menu.is(':hidden')) {  
            menu.removeAttr('style');  
        }  
    });
}); // close

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.