我想必须单击汉堡菜单图标，然后将列表显示在我的图标下方。 我用这种风格设置了我的汉堡菜单图标
.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)像素值的解决方案。 当然，在我的小提琴中让事情发挥作用是件好事，但在我更广泛的应用程序中，我不能保证汉堡菜单有多大或多小。
我想展示一种完全不同的方法而不使用display: flex.
.HTML
在我看来，您的方法使用了太多包装器。您绝对可以减少divs量。此外，您应该始终尝试使用语义标签而不是常规标签，例如div或ul.考虑查看本文。
因此，正如@scooterlord已经提到的，您应该为汉堡包图标使用button。此外，我建议使用nav而不是列表。
.CSS
首先，您应该将同一选择器的属性捆绑在同一位置，以提高清晰度。您不应该有三个部分来应用通用选择器，而应该将其合并为一个。此外，不要将box-sizing设置为特定值，而是将其设置为inherit，因此您始终可以为特定元素覆盖此值，而不必为其所有子元素执行此操作。此外，我不明白您想在所有元素和body上margin: 0 auto实现什么.这对我来说没有任何意义。
由于您不想使用绝对定位，我强烈建议您避免使用像素作为测量单位。如果有些人因为视力不佳或其他原因而改变默认font-size，他们的行为会很糟糕。相反，请考虑应用相对单位，如rem、em或%。通过将根元素的font-size设置为62.5%，您仍然可以像使用像素 (1rem = 10px) 一样进行计算。
正如我已经提到的，我避免将display: flex用于这种微不足道的事情。我不明白为什么应该在这一点上使用它。因此，我还必须更改菜单按钮的位置。可以使用top和left的百分比轻松定位导航。
作为旁注：你真的应该尝试只发布相关的CSS代码 - 对我来说的第一步是删除它的所有不相关的部分。
最终解决方案
这是我的最终解决方案，没有弹性框，没有固定尺寸，也没有使用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>或者看看这个小提琴。
使用css属性：top和right设置图标下元素的位置。
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
将此 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值即可。
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>所以，在这里。我知道您正在寻求特定问题的解决方案，我解决得很好，但我忍不住注意到您正在为代码而苦苦挣扎。你必须简化你的思维方式，你的代码将变得更加精简。这个论坛的目的是帮助别人变得更好，对吧？:)
.HTML
将菜单切换按钮保留在菜单之外是一种很好的做法 - 将解决很多问题 - 检查以下内容。
为切换功能使用其他任何东西而不是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放在右上角，并给它一个等于#pageTitleheight的width(我将其设置为 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;
}
爪哇语
通过多年的实践，我意识到切换菜单而不是添加和删除类的最有效方法是在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/