Reputation: 4986
I have a jsfiddle here - http://jsfiddle.net/2r3Ap/
and a demo here - http://www.ttmt.org.uk/forum/
It's a simple responsive menu. When the window is resized the horizontal menu is moved to a vertical one and hidden. The red button then controls the nav menu scrolling up and down. When the window is resized larger the horizontal menu should show again.
Lots of these around, I thought it would be easy to recreate.
My Problem is:
If the window is resized smaller and vertical menu is open and closed with the button and then window is made bigger the navigation stays hidden.
I need the horizontal menu to appear when the window is resized larger when the vertical menu is open or closed.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
header{
max-width:600px;
margin:0 auto;
background:#aaa;
overflow:auto;
padding:30px 50px 0 50px;
border-left:10px solid #fff;
border-right:10px solid #fff;
}
button{
width:30px;
height:30px;
background:red;
display:none;
border:none;
}
nav{
margin:10px 0 0 0;
}
nav li{
display:inline;
}
nav li a{
float:left;
display:inline-block;
padding:5px;
background:yellow;
margin:0 5px 0 0 ;
}
nav li a:hover{
background:#fff;
}
@media only screen and (max-width:400px){
button{
display:block;
}
nav{
display:none;
}
nav li{
display:block;
}
nav li a{
float:none;
display:block;
padding:5px;
background:yellow;
margin:0 5px 0 0 ;
}
}
</style>
</head>
<body>
<div id="wrap">
<header>
<button></button>
<nav>
<ul>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</nav>
</header>
</div><!-- #wrap -->
<script>
$(function(){
$('button').click(function(){
$('nav').slideToggle();
})
})
</script>
</body>
</html>
Upvotes: 2
Views: 8474
Reputation: 1516
Another way that might be less resource-expensive is to use a callback function on the slideToggle
method. The callback function will say, "When the animation is over, remove the inline display
property and add a class to the element."
The new call to slideToggle
will look like this:
$(function(){
$('button').click(function(){
$('nav').slideToggle(400, function(){
$('nav').toggleClass('mobile-down').css('display', '');
});
});
});
And the CSS:
.mobile-down {
display: block;
}
Here is a modified fiddle.
For a further explanation, I just finished a self-answered question before finding this.
Upvotes: 2
Reputation: 10428
The problem is that it doesn't know that it should show the navigation bar when the screen is big enough. Simply add display: block
to the nav
styles outside of the media query.
nav{
margin:10px 0 0 0;
display: block;
}
As a rule: anything you define in a media query should have a 'default' value outside of it.
Upvotes: 2
Reputation: 20425
@jimjimmy1995 has the simplest solution, but another way of going about it would be to use jQuery's .resize()
method:
$(function ()
{
var $window = $(window),
$nav = $('nav'),
$button = $('button');
$button.on('click', function ()
{
$nav.slideToggle();
});
$window.on('resize', function ()
{
if ($window.width() > 400)
{
$nav.show();
}
});
});
Upvotes: 2