如何将普通的flexbox导航变成响应式汉堡移动菜单？

Question

我试图了解如何正确设计和编写响应式导航。

我从应用了display:flexbox和flex-direction: column的列表开始。

我在顶部有徽标，在下面有菜单项。简单。

在我的媒体查询部分，如果视口至少为flex-direction: row;，则将justify-content: flex-end;和82em应用于列表。 nav变成一行。

到目前为止，一切都很好。我要实现的是“汉堡菜单”。徽标在左侧，汉堡图标在右侧。没有花哨的动画，没有jquery，也没有javascript（如果可以不使用JS显示/隐藏菜单）。如果我单击/触摸菜单项，则希望菜单折叠/消失。

我不知道如何定位汉堡包图标。如果徽标是列表元素，那么如果菜单隐藏/折叠，我也将不明白如何使其保持可见状态并隐藏其余链接。

  body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

nav {
  position: absolute;
  width: 100vw;
}

nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style-type: none;
  align-self: center;
  flex-shrink: 0;
}

nav a {
  display: block;
}

.brand a {
  text-decoration: none;
  background: none;
}

.brand h1 {
  text-transform: uppercase;
  display: inline;
}

@media (max-width: 81em) {
  nav ul {
    flex-direction: column;
  }
  nav a {
    padding: 0.4em 0;
  }
}

@media (min-width: 81em) {
  nav ul {
    flex-direction: row;
    justify-content: flex-end;
  }
  .brand {
    margin-right: auto;
  }
  nav a {
    padding: 0.6rem;
  }
  nav ul li:not(:first-child):not(:last-child) {
    margin-right: 2.5rem;
  }

<nav>
  <ul>
    <li class="brand">
      <a href="#">
        <h1>NAME</h1>
      </a>
    </li>
    <li><a href="#">ITEM 1</a></li>
    <li><a href="#">ITEM 2</a></li>
    <li><a href="#">ITEM 3</a></li>
    <li><a href="#">ITEM 4</a></li>
  </ul>
</nav>

https://codepen.io/anon/pen/QZLaRx