我正在尝试构建一个响应式网站,并且在移动菜单上遇到了一些困难。当我在移动设备上滚动页面时,菜单消失。我希望通过单击标题(具有隐藏/显示jquery代码)来控制它。我也遇到了子菜单下拉列表的问题 - 他们正在覆盖我的主要类别 - 如果有人对这个问题有任何建议或资源,我会很感激。谢谢。
源代码
<header><a class="mobile_menu"></a></header>
<nav>
<ul id="mobile_active">
<li><a href="#">Home</a></li>
<li><a href="#">Corporate Profile</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">News, Updates & Articles</a></li>
<li><a href="#">Partners</a></li>
</ul>
</li>
<li><a href="#">Our Technology</a>
<ul>
<li><a href="#">Clean Energy Overview</a></li>
<li><a href="#">Statistics</a></li>
</ul>
</li>
<li><a href="#">Photo Gallery</a>
<ul>
<li><a href="#">Video</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
</ul>
</nav>
CSS
#mobile_active {
display:none;
padding:0;
margin:0;}
a.mobile_menu {
display:block;
width:100%;
height:35px;
background:#395f96
url(../links/mobile_link_menu.png)no-repeat 4px 4px;
position:absolute;
top:0px;
cursor:pointer;}
a.mobile_menu.selected {
background-position: 4px -26px;}
#mobile_active li a {
padding-top:0.5em;}
#mobile_active ul li a {
padding:0.5;
line-height:2em;}
nav {
width:100%;
height:auto;
position:relative;}
nav ul {
list-style:none;
display:block;
margin:0 auto;}
nav ul li {
width:100%;
margin:0;
padding:0;
position:relative;
background-color:#FFF;}
nav ul li a {
color: #353433;
font-size:1em;
text-align:center;
border-bottom: 1px solid #CCC;
display:block;
padding:3%;
width:94%;
margin:0;}
nav ul ul {
position:absolute;
visibility:hidden;
display:none;
background-color:#FFF;
border: 0px solid #CCC;
width:100%;}
nav ul li a:hover {
color: #395f96;
background-color:#e4ecf7;}
nav ul ul li:hover {
background: #e4ecf7;
width:100%;}
#mobile_active li ul li a {
display:none;}
Jquery的
var screensize = document.documentElement.clientWidth;
$(document).ready(function(){
var resizeTimer;
$(window).on('resize', function (e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if ($(window).width() >= 600) {
$('#mobile_active').show();
} else {
$('#mobile_active').hide(); }
}, 50);
});
$('header').on('click touch', function() {
$('#mobile_active').slideToggle(500);
e.preventDefault();
});
$('#mobile_active li a').on('click touch',function() {
$( '#mobile_active li ul li a' ).slideToggle(150);
e.preventDefault();
});
});
答案 0 :(得分:1)
所以,我认为我找到了解决方案!
用户滚动时调用$(window).resize函数。如果宽度没有改变,您可以忽略调整大小事件,它将解决您的问题。
$(window).resize(function(){
if ( width == GetWidth() ) {
return;
}
width = GetWidth();
if(width < 600){
$('#mobile_active').hide();
} else {
$('#mobile_active').show();
}
});
当然,真正的功劳在于使用用户名 chili434 在本网站上发布的旧帖子,非常感谢!