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应用于其公共父元素.mobile-nav。 position: absolute元素的位置值始终与具有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和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放在右上角，并给它width等于#pageTitle height（我设置为50px - 金标准）保持矩形;根据经验，切换按钮是矩形的，并且始终与顶部导航栏的高度相同 - 在这种情况下是前面提到的id。我为.responsive-menu所做的一样。我绝对定位它如下图所示。这些更改允许我删除大量的CSS样式 - 现在已过时 - 例如ul中.responsive-menu菜单的绝对位置。

.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

经过多年的练习，我意识到切换菜单而不是添加和删除类的最有效方法是在class标记上添加body;如果您想要重新打开页面上的任何其他内容，这可以帮助堆积，具体取决于您的菜单是否打开。

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

这是一个有效的jsfiddle：https://jsfiddle.net/scooterlord/4atafhge/

我可以做很多其他的事情，以便进一步简化代码 - 删除不必要的id和类，因为大多数元素被认为是唯一的，并且可以使用后代类（例如.responsive-menu ul等）进行定位。通过大量练习，您可以设计出更简单的思路并生成占用空间更小的代码。

编辑：关于您不喜欢绝对像素进行对齐的事实，这是一个绝招。

给父容器一个固定的height，等于切换按钮 - 在这种情况下＆＃39; #pageTitle＆＃39;并将其位置设置为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并没有定位 - 也就是说它们是静态定位的。没有像素值了！ YAY！

.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等常规标记上使用语义标记。考虑查看this文章。

因此，正如@scooterlord已提到的那样，您应该使用button作为汉堡包图标。此外，我建议使用nav而不是列表。

CSS

首先，您应该将同一选择器的属性捆绑在同一个地方，以提高清晰度。您不应该有三个部分应用通用选择器，但将其合并为一个。此外，不要将box-sizing设置为特定值，而是将其设置为inherit，因此您始终可以为特定元素覆盖此值，而无需为其所有子元素执行此操作。此外，我不了解您希望在所有元素和margin: 0 auto上使用body实现的目标。这对我没有任何意义。

由于您不想使用绝对定位，我强烈建议您避免使用像素作为测量单位。如果有些人因视力不佳或其他原因改变默认font-size，他们的行为就会很糟糕。相反，请考虑应用rem，em或%等相关单位。通过将根元素font-size设置为62.5%，您仍然可以像使用像素一样进行计算（1rem = 10px）。

正如我已经提到的，我避免使用display: flex来做这么微不足道的事情。我不明白为什么在这一点上应该使用它。因此，我还不得不改变菜单按钮的位置。可以使用top和left的百分比轻松定位导航。

作为旁注：您应该尝试仅发布相关的CSS代码 - 我的第一步是删除它的所有不相关的部分。

最终解决方案

这是我没有Flexbox的最终解决方案，没有固定的尺寸，没有px的绝对定位：

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

或者看this小提琴。

如何让我的汉堡包菜单直接显示在我的汉堡图标下？

5 个答案:

HTML

CSS

最终解决方案