Auto collapse jquery menu depending on screen size - html

Question

I have created a responsive menu that can opens and collabses when i push the open menu.
But the problem is that when i resize the screen it is auto opened when it hits 680 px or lower and if i then collapse the menu when i'm mobile size and try to resize it to desktop again(over 680px) the menu stays hidden.
html code
<img src="assets/img/nav-icon.png" alt="Menu">
<div class="bar">
<div class="lang">
<div class="langDK"></div>
<div class="langUK"></div>
</div>
<ul class="navigation">
<img src="assets/img/logo.png" alt="">
<li class="item">Home</li>
<li class="item">Products</li>
<li class="item">Work</li>
<li class="item">About</li>
<li class="item">Contact</li>
</ul>
</div>
jquery
$(function(){
var pull = $('#pull');
menu = $('.bar .item');
w = $(window).width();
if(w > 680 ) {
menu.show()
}
if(w < 680){
menu.hide();
}
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
i also have some css and media querys but dont think the problem lies there.

Answer 1

Set up the event listener for the window's resize:
$(window).on('resize', function(){
var menu = $('.bar .item');
var w = $(window).width();
if(w >= 680 ) {
menu.show()
}else{
menu.hide();
}
})
If you'd like to hide the li items by default, add the CSS class as below:
li.item {display:none;}

Answer 2

try this one
$(function() {
var pull = $('#pull');
menu = $('.navigation .dropdown');
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');
}
});
});
Html
<div class="navigation">
<ul class="nav pull-right group dropdown">
<li class="nav-line-image"></li>
<li>Home</li>
<li>About Us</li>
<li>Design Gallery</li>
<li>Designer Collection</li>
<li>Silver Collection</li>
<li>Promotion/Events</li>
<li class="active">Branch Details</li>
<li>Contact Us</li>
<li class="nav-line-image"></li>
</ul>
</div><!--navigation end-->
css for mobile and tabs
.nav{
display : none;
position: relative;
}
#pull {
position: absolute;
display : block;
width : 17px;
height : 20px;
color : #5a504c;
margin : 15px 0 0 20px;
background : #ccc;
text-decoration :none;
}