Как превратить обычную навигацию flexbox в отзывчивое мобильное меню гамбургеров? - PullRequest
Новая
       7

Как превратить обычную навигацию flexbox в отзывчивое мобильное меню гамбургеров?

0 голосов
/ 27 сентября 2018

Я пытаюсь понять, как правильно проектировать и кодировать адаптивную навигацию.

Я начал со списка с примененными 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

...