Отзывчивая панель навигации с jQuery

Question

Я пытаюсь сделать свой навигационный бар для моего сайта отзывчивым. У меня есть все, что работает с представлением на рабочем столе и планшете, но когда меню рушится в мобильном режиме, оно не расширяется, когда я нажимаю на него. Ниже приведен мой html, который включает встроенный 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> 

и ниже это CSS стиль его все

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; 
    } 
} 

там что-то не так с моей JQuery кода, сохраняя панель навигации работать в мобильном режиме?

Answer 1

Вы не закрывал ваш $(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 

Answer 2

, которого не закрыл готовую функцию, попробуйте это

$(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'); 
    } 
});