隐藏在窗口调整大小的响应菜单 [英] 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 的 .resize() 方法:
@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屋！
