移动设备上的响应菜单在滚动时消失

Question

我正在尝试构建一个响应式网站，但在移动菜单方面遇到了一些困难。当我在移动设备上滚动页面时，菜单会消失。

我试图让菜单粘在顶部，当用户想要关闭时，菜单就会消失。有没有一种方法可以保持菜单打开，直到单击链接或关闭菜单按钮？

你可以在这里看到它的实时工作：www.nhadatsonnghia.com

任何帮助都将不胜感激！！！

非常感谢。

这是我的代码：

! function(n) {
n.fn.menumaker = function(s) {
var e = n(this),
i = n.extend({
title: "",
format: "dropdown",
sticky: !1
}, s);
return this.each(function() {
return e.prepend('<div id="menu-button">' + i.title + "</div>"), n(this).find("#menu-button").on("click", function() {
n(this).toggleClass("menu-opened");
var s = n(this).next("ul");
s.hasClass("open") ? s.hide().removeClass("open") : (s.show().addClass("open"), "dropdown" === i.format && s.find("ul").show())
}), e.find("li ul").parent().addClass("has-sub"), multiTg = function() {
e.find(".has-sub").prepend('<span class="submenu-button"></span>'), e.find(".submenu-button").on("click", function() {
n(this).toggleClass("submenu-opened"), n(this).siblings("ul").hasClass("open") ? n(this).siblings("ul").removeClass("open").hide() : n(this).siblings("ul").addClass("open").show()
})
}, "multitoggle" === i.format ? multiTg() : e.addClass("dropdown"), i.sticky === !0 && e.css("position", "fixed"), resizeFix = function() {
n(window).width() > 768 && e.find("ul").show(), n(window).width() <= 768 && e.find("ul").hide().removeClass("open")
}, resizeFix(), n(window).on("resize", resizeFix)
})
}
}(jQuery),
function(n) {
n(document).ready(function() {
n("#cssmenu").menumaker({
title: "",
format: "multitoggle"
})
})
}(jQuery);

@import url(http://fonts.googleapis.com/css?family=Arial:400,700); #cssmenu,#cssmenu > ul,#cssmenu > ul > li,#cssmenu > ul > li a,#cssmenu #menu-button {display: block;-moz-box-sizing: border-box;list-style: none;padding: 0;}
#cssmenu:after,#cssmenu > ul:after { content:" ." ; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
#cssmenu #menu-button { display:none; }
#cssmenu {position: relative;text-align: center;z-index: 15;float: right;}
#cssmenu > ul > li {position: relative;vertical-align: middle;display: inline-block;padding: 0;margin: 0;}
#cssmenu.align-center > ul { font-size:0; text-align:center; }
#cssmenu.align-center > ul > li { display:inline-block; float:none; }
#cssmenu.align-center ul ul { text-align:left; }
#cssmenu.align-right > ul > li { float:right; }
#cssmenu > ul > li > a {color: black;font-size: 16px;display: inline-block;text-decoration: none;letter-spacing: 1px;margin: 10px 0 0 0;padding: 0 12px;font-family: Open Sans,Helvetica,Arial,sans-serif;font-weight: 500;line-height: 40px;}
#cssmenu > ul > li:hover > a { color:#ffffff;background: #ffbd2f;border:1px;border-radius:5px; }
#cssmenu > ul > li.has-sub > a { padding-right:10px; }
#cssmenu > ul > li.has-sub > a:after { position:absolute; top:0; right:0; width:0; height:2px; display:block; background:#dddddd; content:' ' ; }
#cssmenu > ul > li.has-sub > a:before { position:absolute; top:0; right:0; display:block; width:2px; height:0; background:#dddddd; content:' ' ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu > ul > li.has-sub:hover > a:before { top:23px; height:0; }
#cssmenu ul ul { position:absolute; left:-9999px; z-index:9999; }
#cssmenu.align-right ul ul { text-align:right; }
#cssmenu ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;position: relative;list-style: none; }
#cssmenu ul ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu li:hover > ul { left:auto; }
#cssmenu.align-right li:hover > ul { left:auto; right:0; }
#cssmenu li:hover > ul > li { height:35px; }
#cssmenu ul ul ul { margin-left:100%; top:0; }
#cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; }
#cssmenu ul ul li a { border-bottom:1px solid rgba(150,150,150,0.15); padding:15px; width:250px; font-size:13px; text-decoration:none; color:#dddddd; font-weight:400; background:#333333; }
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom:0; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover { color:#ffffff; }
#cssmenu ul ul li.has-sub > a:after { position:absolute; top:16px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:' ' ; }
#cssmenu.align-right ul ul li.has-sub > a:after { right:auto; left:11px; }
#cssmenu ul ul li.has-sub > a:before { position:absolute; top:13px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:' ' ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu.align-right ul ul li.has-sub > a:before { right:auto; left:14px; }
#cssmenu ul ul > li.has-sub:hover > a:before { top:17px; height:0; }
@media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {
#menu-desktop {float:left;background: #ffbd2f;padding: 0 5px;display: block;}
#cssmenu { width:100%; }
#cssmenu ul { width:100%; display:none; }
#cssmenu.align-center > ul { text-align:left; }
#cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); }
#cssmenu ul ul li,#cssmenu li:hover > ul > li { height:auto; }
#cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; }
#cssmenu > ul > li { float:none; }
#cssmenu ul ul li a { padding-left:25px; }
#cssmenu ul ul ul li a { padding-left:35px; }
#cssmenu ul ul li a { color:#dddddd; background:none; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color:#ffffff; }
#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; }
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before { display:none; }
#cssmenu #menu-button { display:block; padding:32px; color:#dddddd; cursor:pointer; font-size:12px; text-transform:uppercase; font-weight:700; }
#cssmenu #menu-button:after { position:absolute; top:26px; right:13px; display:block; height:5px; width:40px; border-top:5px solid #ffffff; border-bottom:5px solid #ffffff; content:' ' ; }
#cssmenu #menu-button:before { position:absolute; top:16px; right:13px; display:block; height:5px; width:40px; background:#ffffff; content:' ' ; }
#cssmenu #menu-button.menu-opened:after { top:23px; border:0; height:10px; width:40px; background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
#cssmenu #menu-button.menu-opened:before { top:23px; background:#ffffff;width:40px;height:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }
#cssmenu .submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid rgba(120,120,120,0.2); height:46px; width:46px; cursor:pointer; }
#cssmenu .submenu-button.submenu-opened { background:#262626; } #cssmenu ul ul .submenu-button { height:34px; width:34px; }
#cssmenu .submenu-button:after { position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#dddddd; content:' ' ; }
#cssmenu ul ul .submenu-button:after { top:15px; right:13px; }
#cssmenu .submenu-button.submenu-opened:after { background:#ffffff; }
#cssmenu .submenu-button:before { position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#dddddd; content:' ' ; }
#cssmenu ul ul .submenu-button:before { top:12px; right:16px; }
#cssmenu .submenu-button.submenu-opened:before { display:none; }
}

<div id='menu-desktop'>
<div id='cssmenu'>
<ul>
<li><a href='#'>Nhà Đất Sơn Nghĩa</a></li>
<li class='active'><a href='#'>Nhà Đất Gò Vấp</a>
<ul>
<li><a href='#'>Bán Nhà Gò Vấp mặt phố, mặt tiền</a></li>
<li><a href='#'>Nhà Gò Vấp giá dưới 1 tỷ</a></li>
<li><a href='#'>Nhà Gò Vấp giá 1 đến 2 tỷ</a></li>
<li><a href='#'>Nhà Gò Vấp giá 2 đến 3 tỷ</a></li>
<li><a href='#'>Nhà Gò Vấp giá 3 đến 4 tỷ</a></li>
<li class='active'><a href='#'>Nhà Đất Gò Vấp bán theo phường</a>
<ul>
<li><a href='#'>Phường 8</a></li>
<li><a href='#'>Phường 9</a></li>
</ul></li></ul></li>
<li><a href='#'>Nhà Đất Quận 12</a></li>
<li class='active'><a href='#'>Tin tức, tư vấn</a>
<ul>
<li><a href='#' itemprop='url'>Kinh Nghiệm Mua Nhà</a></li>
<li><a href='#' itemprop='url'>Tin tức nhà đất</a></li>
<li><a href='#' itemprop='url'>Phong Thủy</a></li>
</ul></li>
<li><a href='#' itemprop='url'>Liên hệ</a></li>
</ul>
</div></div>

Answer 1

好的，我明白了，我给你的建议只是写一个额外的类.show，它应该在点击事件时切换。当用户点击"X"按钮时，您应该将其删除。在类".show"中添加以下参数：

#menu-desktop .show {
background: #ffbd2f;
padding: 0 5px;
display: block;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999;
}

这将使您有机会处理移动菜单，用户可以随时看到它。

当然，如果您不想隐藏所有屏幕，那么您可以删除height属性或手动添加其他值。