移動設備上的響應菜單在滾動時消失？

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

好的，我明白了，我給你的建議只是寫一個額外的 class.show，它應該在點擊事件時切換。 當用戶單擊“X”按鈕時，您應該將其刪除。 在 class '.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 屬性或手動添加其他值。