滑動導航菜單的位置始終在標題下方

Question

我有以下的jQuery菜單，你也可以找到在JSfiddle 這里 ：

 $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible')) { $panel.add($panel.find('.panel')).slideUp(500).removeClass('active'); } else { $panel.slideDown(500).addClass('active'); } }); }); 

 body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; display: flex; justify-content: space-between; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: yellow; } .image { width: 30%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } /* Navigation Mobile */ .navigation { width: 70%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: aqua; } .navigation>nav { } .navigation>nav>ul { list-style: none; margin: 0; padding: 0; } .navigation>nav>ul li a { display: block; text-decoration: none; color: black; } /* Navigation Button */ .navigation_button { width: 20%; height: 60%; float: right; cursor: pointer; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: fuchsia; } .bar1, .bar2, .bar3 { width: 100%; height: 20%; margin: 4% 0; background-color: #333; } /* Menu Content */ .menu_box { width: 100%; float: right; line-height: 2.0; box-sizing: border-box; border-style: solid; border-width: 1px; } .panel{ width: 100%; padding-left: 0%; cursor: pointer; font-weight: bold; overflow: hidden; display:none; } .button_menu { padding-left: 1%; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="image"> Image </div> <div class="navigation"> <div class="navigation_button"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <nav class="panel"> <ul class="menu_box"> <li class="button_menu"> 1.0 Menu </li> <li class="button_menu"> 2.0 Menu </li> <li class="button_menu"> 3.0 Menu </li> </ul> </nav> </div> </div> 

菜單只要完美的作品.navigation_button是大小相同.navigation 。

但是，如您在上面的代碼中所見，我將.navigation_button的高度降低到height: 60%; 當我現在單擊按鈕時， .panel不會出現在.header下方。 它將顯示在.navigation_button下方。

---

為了解決這個問題，我嘗試提出以下position:absolute; 到.panel ，然后分配到相同的高度.header到.panel但是由於它沒有工作.panel從頁面的頂部，現在幻燈片。

另一個想法我是關閉.header <div>后.navigation_button但一旦我做了動畫沒有運行了。

---

我需要在代碼中進行哪些更改，以確保.panel始終完全位於.header下方，無論.navigation_button中的位置.header ？

Answer 1

將此代碼添加到“ .panel”

position: absolute;
top:100%;
right: 0;

Answer 2

如果您希望將.panel放置在.header下方， .header可以將其位置設置為絕對位置，然后將其從第一個非靜態父.header （在您的情況下為.header的左側向左定位，並從其頂部100％ .header它有固定的位置值），這將確保.panel是低於.header但是，在你的榜樣，在.panel伸不通過藍色.navigation元素的寬度，所以如果你想要這個接盤.navigation元素的相對位置。

請參見下面的演示：

 $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible')) { $panel.add($panel.find('.panel')).slideUp(500).removeClass('active'); } else { $panel.slideDown(500).addClass('active'); } }); }); 

 body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; display: flex; justify-content: space-between; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: yellow; } .image { width: 30%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } /* Navigation Mobile */ .navigation { position: relative; /* remove this if you want the panel to stretch further */ width: 70%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: aqua; } .navigation>nav { } .navigation>nav>ul { list-style: none; margin: 0; padding: 0; } .navigation>nav>ul li a { display: block; text-decoration: none; color: black; } /* Navigation Button */ .navigation_button { width: 20%; height: 60%; float: right; cursor: pointer; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: fuchsia; } .bar1, .bar2, .bar3 { width: 100%; height: 20%; margin: 4% 0; background-color: #333; } /* Menu Content */ .menu_box { width: 100%; float: right; line-height: 2.0; box-sizing: border-box; border-style: solid; border-width: 1px; } .panel{ /* changes from here...*/ position: absolute; top: 100%; left: 0; /*...here*/ width: 100%; padding-left: 0%; cursor: pointer; font-weight: bold; overflow: hidden; display:none; } .button_menu { padding-left: 1%; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="image"> Image </div> <div class="navigation"> <div class="navigation_button"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <nav class="panel"> <ul class="menu_box"> <li class="button_menu"> 1.0 Menu </li> <li class="button_menu"> 2.0 Menu </li> <li class="button_menu"> 3.0 Menu </li> </ul> </nav> </div> </div>