如何讓我的漢堡包菜單直接顯示在我的漢堡圖標下？

Question

我想要點擊漢堡包菜單圖標，然后將列表顯示在我的圖標下方。 我用這種風格設置了漢堡包菜單圖標

.menu-btn div {
    position: absolute;
    left: 100%;
    top: 64%;
    padding-right: 8px;
    margin-top: -0.50em;
    line-height: 1.2;
    font-size: 18px;
    font-weight: 200;
    vertical-align: middle;
    z-index: 99;
}

.menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background: #989da1;
    z-index: 99;
}

單擊漢堡菜單后，應顯示選項菜單

 <div class="responsive-menu">
    <ul id="menu">
       <li>Vote</li>
       <li>Search</li>
       <li>About</li>
       <li>Log In</li>
    </ul>
 </div>

但是我不清楚如何設置漢堡包菜單的樣式，所以當你點擊它時它會直接出現在漢堡包菜單下面。 現在，它出現在屏幕的頂部 - https://jsfiddle.net/wtp1k57b/1/ 。 我該如何設置這樣的風格？

PS - 我正在尋找一種不依賴於硬編碼數字（例如頂部：27px）像素值的解決方案。 當然，在我的小小提琴中讓事情發揮作用是好的，但在我更廣泛的應用中，我不能保證漢堡包菜單會有多大或多小。

Answer 1

使用css屬性： top和right在圖標下設置元素的位置。

#menu
{
  position: absolute;
  top: 48px;
  right: 2px;

  background: #ededed;
  list-style-type: none;
}

Answer 2

將此CSS用於您的菜單 - 無邊距，以及由top和right設置定義的位置：

#menu {
  position: absolute;
  width: 300px;
  margin: 0;
  padding: 50px;  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  top: 50px;
  right: 0;
}

https://jsfiddle.net/meuexde6/

我省略了測試的轉換，但你基本上應該將right參數從-100px設置為0，以實現你的想象。

評論后的補充：

要定義菜單相對於按鈕的position: relative ，您必須應用position: relative對於它們的公共父元素.mobile-nav 。 具有position: absolute的元素的位置值始終與具有position: relative的第一個祖先position: relative 。

我相應地更改了我更新的小提琴中的值：

#menu {
  position: absolute;
  width: 300px;
  margin: 0;
  padding: 50px;  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  top: 40px;
  right: -32px;
}

更新小提琴： https ： //jsfiddle.net/meuexde6/1/

如果你真的希望菜單直接粘在按鈕上（很難說 - 它沒有邊框），只需根據需要調整top和right值。

Answer 3

所以，這里。 我知道你要求解決一個特定的問題，我解決了它，但我不禁注意到你正在努力解決你的代碼問題。 您必須簡化您的思考方式，並使您的代碼變得更加精簡。 這個論壇的目的是幫助別人變得更好，對吧？ :)

HTML

保持菜單切換按鈕OUTSIDE是一個好習慣 - 將解決很多問題 - 請查看下面的內容。

在語義上使用其他任何東西而不是button來進行切換功能都是正確的，所以，為什么不在這里使用button呢？ 我也刪除無用的垃圾，從您的代碼，像一些div S和id -該id可以與被交易class ，你的電話。 我也刪除了.mobile-nav因為根本不需要它。

<button class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</button>

<div class="responsive-menu">
  <ul id="menu">
    <li>Vote</li>
    <li>Search</li>
    <li>About</li>
    <li>Log In</li>
  </ul>
</div>

CSS

我絕對將menu-btn定位在右上角，並給它一個等於#pageTitle height的width （我設置為50px - 金標准）以保持矩形; 根據經驗，切換按鈕是矩形的，並且始終與頂部導航欄的高度相同 - 在這種情況下是前面提到的id 。 我為.responsive-menu做了同樣的.responsive-menu 。 我絕對定位它如下圖所示。 這些更改讓我刪除了很多css樣式 - 現在已經過時 - 比如在.responsive-menu中的ul菜單的絕對定位。

.menu-btn {
  position:absolute;
  display:block;
  right:0;
  top:0;
  width:50px;
  height:50px;
  background:yellow;
  border:none;
  padding:16px;
}

.responsive-menu {
  position: absolute;
  top: 50px;
  right: 0;
  display: none;
}

使用Javascript

通過多年的實踐，我意識到切換菜單而不是添加和刪除類的最有效方法是在body標簽上添加一個class ; 如果您想要重新打開頁面上的任何其他內容，這可以幫助堆積，具體取決於菜單是否打開。

$('.menu-btn').on('click', function() {
  $('body').toggleClass('responsive-menu-open');
});

這是一個工作的jsfiddle： https ：//jsfiddle.net/scooterlord/4atafhge/

我可以做很多其他的事情，以便進一步簡化代碼 - 刪除不必要的id和類，因為大多數元素被認為是唯一的，可以使用后代類來定位，例如.responsive-menu ul等。經過大量的實踐中，您將設法更簡單地思考並生成占用空間更小的代碼。

編輯：關於你不喜歡對齊的絕對像素這一事實是一個技巧。

給父容器一個固定的height ，等於切換按鈕 - 在這種情況下'#pageTitle'並將其位置設置為relative允許你使用top:100%將響應式菜單正確放置在按鈕下方（這實質上是相同的高度）：

#pageTitle {
  display: flex;
  height: 50px;
  position:relative;
}

.responsive-menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
}

這是一個更新的小提琴： https ： //jsfiddle.net/scooterlord/4atafhge/1/

編輯：納塔利婭，我給了它一些思考，這就是我想出來的。 我創建了一個絕對定位的.menu-wrapper ，在其中我放置了按鈕和響應式菜單float:right沒有定位 - 也就是說它們是靜態定位的。 沒有像素值了！ 好極了！

.menu-wrapper {
  position:absolute;
  top:0;
  right:0;
}
.menu-btn {
  float:right;
  ...
}
.responsive-menu {
 float:right;
  clear:both; // to clear the .menu-btn and sit exactly below it
  ...
}

這是一個工作小提琴： https ： //jsfiddle.net/scooterlord/4atafhge/2/

Answer 4

HTML5語義元素。

 details > summary { padding: 2px 6px; width:12px; border: none; list-style: none; } details > summary::-webkit-details-marker { display: none; } ul{ list-style: none; margin-left:0; padding-left:0; } 

 <details> <summary>☰</summary> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </details> 

Answer 5

我想在不使用display: flex情況下展示一種完全不同的方法。

HTML

在我看來，你的方法使用了太多的包裝器。 你絕對可以減少divs的數量。 此外，您應該始終嘗試使用語義標記而不是像div或ul這樣的常規標記。 考慮一下這篇文章。

因此，作為@scooterlord已經提到的，你應該使用一個button的漢堡包圖標。 此外，我建議使用nav而不是列表。

CSS

首先，您應該將同一選擇器的屬性捆綁在同一位置，以提高清晰度。 您不應該有三個部分應用通用選擇器，但將其合並為一個。 此外，不要將box-sizing設置為特定值，而是將其設置為inherit ，因此您始終可以為特定元素覆蓋此值，而無需為其所有子元素執行此操作。 此外，我不明白你想用margin: 0 auto實現什么margin: 0 auto所有元素和body都是margin: 0 auto 。 這對我沒有任何意義。

由於您不想使用絕對定位，我強烈建議您避免使用像素作為測量單位。 如果有些人因視力不佳或其他原因改變了默認font-size ，他們表現得很糟糕。 相反，考慮應用相對單位，如rem ， em或% 。 通過將根元素的font-size為62.5%您仍然可以像使用像素一樣計算（1rem = 10px）。

正如我已經提到的，我避免使用display: flex來處理這樣一個微不足道的事情。 我不明白為什么在這一點上應該使用它。 因此，我還不得不改變菜單按鈕的位置。 可以使用top和left百分比輕松定位導航。

作為旁注：您應該嘗試僅發布相關的CSS代碼 - 我的第一步是刪除它的所有不相關的部分。

最終解決方案

這是我沒有Flexbox的最終解決方案，沒有固定的尺寸，也沒有使用px絕對定位：

 $('.menu-btn').click(function() { $('nav').toggleClass('nav-open'); }); 

 * { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 62.5%; } body { font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif; -webkit-font-smoothing: antialiased; box-sizing: border-box; } header { width: 100%; background-color: orange; text-align: center; padding: 1rem; position: relative; } nav { display: none; width: 30rem; padding: 5rem; background-color: #ededed; position: absolute; right: 5%; top: 100%; } .nav-open { display: block; } nav a { display: block; width: 100%; text-align: center; padding: 1.4rem 1.6rem; text-decoration: none; cursor: pointer; font-size: 2.2rem; color: #000; } nav a:hover { background-color: #111; color: #fff; } .menu-btn { position: absolute; right: 5%; top: 50%; margin-top: -1.1rem; display: inline-block; cursor: pointer; border: none; outline: none; background-color: transparent; } @media only screen and (min-width: 500px) { .menu-btn, nav { display: none !important; } } .menu-btn span { display: block; width: 2rem; height: 0.2rem; margin: 0.4rem 0; background: #989da1; z-index: 99; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <h2>Page Title</h2> <button class="menu-btn"> <span></span> <span></span> <span></span> </button> <nav> <a href="vote.html">Vote</a> <a href="search.html">Search</a> <a href="about.html">About</a> <a href="login.html">Log In</a> </nav> </header> 

或者看到這個小提琴。