响应式菜单隐藏在窗口调整大小上 [英] Responsive menu hidden on window resize
问题描述
我在这里有一个jsfiddle- http://jsfiddle.net/2r3Ap/
I have a jsfiddle here - http://jsfiddle.net/2r3Ap/
和此处的演示- 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.
我的问题是:
如果将窗口调整为较小的尺寸，并使用按钮打开和关闭垂直菜单，然后将窗口放大，则导航保持隐藏状态.
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>
推荐答案
@ jimjimmy1995是最简单的解决方案，但是另一种解决方法是使用jQuery的
@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();
}
});
});
这篇关于响应式菜单隐藏在窗口调整大小上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
