修復導航欄子菜單從屏幕外消失的問題

Question

我使用以下腳本作為導航欄，但是我無法弄清楚如何使菜單/子菜單尊重屏幕的兩側，並且不能繼續在屏幕邊框之外打開。.我不想更改默認行為（方向）的所有菜單，只要對其進行更改，它將被任意一側剪切。

我找到了類似的帖子 （也有另一篇 ），但是我不知道如何對當前代碼實現相同的答案。

顯示器側面被剪切的菜單示例：

這是代碼段，以及jsfiddle鏈接。

 $(document).ready(function() { /* MAIN MENU */ $('#main-menu > li:has(ul.sub-menu)').addClass('parent'); $('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent'); $('#menu-toggle').click(function() { $('#main-menu').slideToggle(300); return false; }); $(window).resize(function() { if ($(window).width() > 700) { $('#main-menu').removeAttr('style'); } }); }); 

 body { background-color: #eee; background-image: url(../images/patterns/light_toast.png); color: #666; font-family: 'Open Sans', sans-serif; font-size: 12px; margin: 0px; padding: 0px; } a { color: #23dbdb; text-decoration: none; } a:hover { color: #000; } ol, ul { list-style: none; padding: 0px; margin: 0px; } #wrap { margin: 0 auto; } .inner { margin: 0 auto; max-width: 940px; padding: 0 40px; } .relative { position: relative; } .right { float: right; } .left { float: left; } /* HEADER */ #wrap>header { background-color: #333; padding-bottom: 20px; } .logo { display: inline-block; font-size: 0; padding-top: 15px; } #navigation { position: absolute; right: 40px; bottom: 0px; } #menu-toggle { display: none; float: right; } /* HEADER > MENU */ #main-menu { float: right; font-size: 0; margin: 10px 0; } #main-menu>li { display: inline-block; margin-left: 30px; padding: 2px 0; } #main-menu>li.parent { background-image: url(../images/plus-gray.png); background-size: 7px 7px; background-repeat: no-repeat; background-position: left center; } #main-menu>li.parent>a { padding-left: 14px; } #main-menu>li>a { color: #eee; font-size: 14px; line-height: 14px; padding: 30px 0; text-decoration: none; } #main-menu>li:hover>a, #main-menu>li.current-menu-item>a { color: #23dbdb; } /* HEADER > MENU > DROPDOWN */ #main-menu li { position: relative; } ul.sub-menu { /* level 2 */ display: none; left: 0px; top: 38px; padding-top: 10px; position: absolute; width: 150px; z-index: 9999; } ul.sub-menu ul.sub-menu { /* level 3+ */ margin-top: -1px; padding-top: 0; left: 149px; top: 0px; } ul.sub-menu>li>a { background-color: #333; border: 1px solid #444; border-top: none; color: #bbb; display: block; font-size: 12px; line-height: 15px; padding: 10px 12px; } ul.sub-menu>li>a:hover { background-color: #2a2a2a; color: #fff; } ul.sub-menu>li:first-child { border-top: 3px solid #23dbdb; } ul.sub-menu ul.sub-menu>li:first-child { border-top: 1px solid #444; } ul.sub-menu>li:last-child>a { border-radius: 0 0 2px 2px; } ul.sub-menu>li>a.parent { background-image: url(../images/arrow.png); background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center; } #main-menu li:hover>ul.sub-menu { display: block; /* show the submenu */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <div id="wrap"> <header> <div class="inner relative"> <a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a> <a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a> <nav id="navigation"> <ul id="main-menu"> <li class="current-menu-item"><a href="http://www.freshdesignweb.com">Home</a></li> <li class="parent"> <a href="#">Features</a> <ul class="sub-menu"> <li><a href="#"><i class="icon-wrench"></i> Elements</a></li> <li><a href="#"><i class="icon-credit-card"></i> Pricing Tables</a></li> <li><a href="#"><i class="icon-gift"></i> Icons</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> </ul> </li> <li><a href="#">Portfolio</a></li> <li class="parent"> <a href="#">Blog</a> <ul class="sub-menu"> <li><a href="#">Large Image</a></li> <li><a href="#">Medium Image</a></li> <li><a href="#">Masonry</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> <li><a href="#">Double Sidebar</a></li> <li><a href="#">Single Post</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="clear"></div> </div> </header> 

Answer 1

在子子菜單中，您是根據149px的左邊距對齊的，只使用相同的屬性，而是使用右邊的屬性。 right:149px; 而不是left:149px;

ul.sub-menu ul.sub-menu {
  /* level 3+ */
  right: 149px;
}

您也可以將子菜單對准導航項目的左側。 為此使用：

ul.sub-menu { 
  /* level 2 */
  right: 0;
  left: initial;
}

我在此片段中包括了兩個示例：

 $(document).ready(function() { /* MAIN MENU */ $('#main-menu > li:has(ul.sub-menu)').addClass('parent'); $('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent'); $('#menu-toggle').click(function() { $('#main-menu').slideToggle(300); return false; }); $(window).resize(function() { if ($(window).width() > 700) { $('#main-menu').removeAttr('style'); } }); }); 

 body { background-color: #eee; background-image: url(../images/patterns/light_toast.png); color: #666; font-family: 'Open Sans', sans-serif; font-size: 12px; margin: 0px; padding: 0px; } a { color: #23dbdb; text-decoration: none; } a:hover { color: #000; } ol, ul { list-style: none; padding: 0px; margin: 0px; } #wrap { margin: 0 auto; } .inner { margin: 0 auto; max-width: 940px; padding: 0 40px; } .relative { position: relative; } .right { float: right; } .left { float: left; } /* HEADER */ #wrap>header { background-color: #333; padding-bottom: 20px; } .logo { display: inline-block; font-size: 0; padding-top: 15px; } #navigation { position: absolute; right: 40px; bottom: 0px; } #menu-toggle { display: none; float: right; } /* HEADER > MENU */ #main-menu { float: right; font-size: 0; margin: 10px 0; } #main-menu>li { display: inline-block; margin-left: 30px; padding: 2px 0; } #main-menu>li.parent { background-image: url(../images/plus-gray.png); background-size: 7px 7px; background-repeat: no-repeat; background-position: left center; } #main-menu>li.parent>a { padding-left: 14px; } #main-menu>li>a { color: #eee; font-size: 14px; line-height: 14px; padding: 30px 0; text-decoration: none; } #main-menu>li:hover>a, #main-menu>li.current-menu-item>a { color: #23dbdb; } /* HEADER > MENU > DROPDOWN */ #main-menu li { position: relative; } ul.sub-menu { /* level 2 */ display: none; top: 38px; padding-top: 10px; position: absolute; width: 150px; z-index: 9999; right:0; left:initial; } ul.sub-menu ul.sub-menu { /* level 3+ */ margin-top: -1px; padding-top: 0; right: 149px; top: 0px; } ul.sub-menu>li>a { background-color: #333; border: 1px solid #444; border-top: none; color: #bbb; display: block; font-size: 12px; line-height: 15px; padding: 10px 12px; } ul.sub-menu>li>a:hover { background-color: #2a2a2a; color: #fff; } ul.sub-menu>li:first-child { border-top: 3px solid #23dbdb; } ul.sub-menu ul.sub-menu>li:first-child { border-top: 1px solid #444; } ul.sub-menu>li:last-child>a { border-radius: 0 0 2px 2px; } ul.sub-menu>li>a.parent { background-image: url(../images/arrow.png); background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center; } #main-menu li:hover>ul.sub-menu { display: block; /* show the submenu */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <div id="wrap"> <header> <div class="inner relative"> <a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a> <a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a> <nav id="navigation"> <ul id="main-menu"> <li class="current-menu-item"><a href="http://www.freshdesignweb.com">Home</a></li> <li class="parent"> <a href="#">Features</a> <ul class="sub-menu"> <li><a href="#"><i class="icon-wrench"></i> Elements</a></li> <li><a href="#"><i class="icon-credit-card"></i> Pricing Tables</a></li> <li><a href="#"><i class="icon-gift"></i> Icons</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> </ul> </li> <li><a href="#">Portfolio</a></li> <li class="parent"> <a href="#">Blog</a> <ul class="sub-menu"> <li><a href="#">Large Image</a></li> <li><a href="#">Medium Image</a></li> <li><a href="#">Masonry</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> <li><a href="#">Double Sidebar</a></li> <li><a href="#">Single Post</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="clear"></div> </div> </header> 

Answer 2

我想這里的真正問題是，您希望它去哪里？ 如果菜單右側沒有頁面空間，則不能將子菜單置於右側，而必須將其置於左側。

ul.sub-menu ul.sub-menu { /* level 3+ */
    margin-top: -1px;
    padding-top: 0;
    left: -149px;
    top: 0px;
}

請注意，左側的值從149px更改為-149px。 這會將子菜單放在左側（您擁有屏幕空間），而不是在右側（您沒有屏幕空間）。