0

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

我从一个列表开始，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

4

0 回答 0