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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
