Как создать адаптивную панель навигации из меню переключения с помощью Flexbox

kak sozdat adaptivnuyu panel navigaczii iz menyu pereklyucheniya s pomoshhyu?v=1656653652

от Чарли Уэйта

0*duHsALHgV9KMBanO
Фотография Гарри Куана на Unsplash

Во время недавнего проекта пришлось удалить все следы Bootstrap. Это означало, что очень полезную адаптивную панель навигации придется создавать с нуля. Я относительно новичок в CSS и всегда полагался на панели навигации Bootstrap из-за их простоты, поэтому я вызвался взять на себя эту задачу. Вот что я научился и сделал в течение всего процесса.

В этой статье я предполагаю, что вы владеете базовыми знаниями HTML, CSS и JavaScript — вы знаете, как связать таблицу стилей со своим HTML или применить стили в <style>tag — и вы знаете, как импортировать JavaScript на свою страницу.

Сторонники защитной элиты критиковали мой способ действий, особенно потому, что меню переключения position: absolute — если у вас есть лучшие способы сделать это, ответьте ниже, и мы сможем сделать это лучше для тысяч людей, которые это читают!

Начинаем

Во-первых, я начал с базового HTML для макета:

<div class="Navbar">
  <div class="Navbar__Link Navbar__Link-brand">
    Website title
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
</div>

Можно использовать любые правила именования классов.

1*3tYOXMsOAdUXGmcXmOt50г

Теперь это еще не дает нам многое. Это просто обычный перечень частей. Но только с одной строчкой CSS мы видим силу Flexbox.

.Navbar {
  display: flex;
}
1*dK5IrDcMRW00HPZ-wX6cBw
Навигационная панель div теперь выровнена горизонтально

Одна строка кода, и у нас уже есть элементы навигации, выровненные горизонтально вверху страницы.

Теперь добавим два nav элементы к нашему HTML, чтобы мы могли иметь некоторые элементы слева и справа от панели навигации:

<div class="Navbar">
  <nav class="Navbar__Items">
    <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

И немного базового стиля на нашем Navbar класс, вращающий все остальные элементы:

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

Конечно, вы можете выбрать собственную цветовую схему, шрифт и отступы.

Теперь наша навигационная панель будет выглядеть так:

1*ulTsKdXWB72DtxfDLuzl9A

К сожалению, теперь это выглядит получше, но мы не можем отображать элементы навигации вертикально. Прежде чем читать дальше, попробуйте предположить, что мы будем делать дальше…

Теперь наш display:flex в .Navbar класс больше не несет ответственности за эти элементы. Теперь он отвечает за них <nav> контейнеры. Мы хотим, чтобы оба были выровнены горизонтально.

Поэтому мы меняем .Navbar__Items класс также:

.Navbar__Items {
  display:flex;
}

Теперь давайте добавим дополнения к нашим ссылкам, чтобы сделать их немного красивее:

.Navbar__Link {
  padding-right: 8px;
}

Теперь наша панель навигации выглядит так:

1*DTgVCsT7tQlQ5Qgk5mQpSQ

Мы добираемся туда. Но мы хотим и второго <nav> для выравнивания вправо. Как вы могли заметить — я добавил дополнительный класс к second <nav> tag .Navbar__Предметы – правильно.

Давайте просто добавим a margin-left:auto в этот класс:

.Navbar__Items--right {
  margin-left:auto;
}
1*wDWAi7RCETK64FeP4yLNEA
После добавления margin-left ко второй нав.
1*wzj25OyMsvenI7APSxBDCg
На мобильном

Как видите, теперь это гораздо лучше. У нас уже есть полностью адаптивная навигационная панель. Но…

Что, если каждый элемент навигации имел более длинный текст? А если бы предметов было больше?

1*TRNh6xHheH7t5I3sUxLI0A
Пример более длинных имен ссылок

Как видите, это не то, что мы хотим. Мы либо хотим сделать все элементы навигации одной строчкой для согласованности, либо хотим, чтобы они были спрятаны в меню, которое пользователь может переключать.

Мы выберем последний, поскольку он гораздо чище и нам не придется беспокоиться о том, что пользователю будет трудно прочесть текст в каждом элементе навигации.

flex-direction

Для элемента, чей дисплей является гибким, существует правило для направления, в котором мы хотим, чтобы элементы изгибались. По умолчанию это строка, которая аккуратно выравнивает все элементы по оси x.

В нашем случае, мы хотели бы иметь небольшое вертикальное меню в верхней части страницы. Давайте попробуем изменить flex-direction на обоих .Navbar и .Navbar__Items к столбцу – это выравнивает все пункты меню по оси y – когда ширина экрана составляет 768 пикселей или меньше.

И давайте уберем это margin-left с другой <nav>:

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
}
1*rmC0cKnio5Cg9W2CA1luPQ
Панель навигации при ширине экрана 768 пикселей или ниже

Но теперь элементы навигации всегда видны, что занимает значительную часть экрана.

В наш медиа-запрос добавим второе правило для .Navbar__Items поэтому их не видно:

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display:none;
  }
  .Navbar__Items--right {
    margin-left:0;
  }
}
1*8ipupgzJ6_ersFfTgVvm6w
Как навигационная панель теперь смотрится на мобильном телефоне

Кнопка переключения

Для кнопки переключения я собираюсь использовать пиктограмму, предоставленную Font Awesome. Если вы решите последовать этому примеру, просто следуйте инструкциям на их сайте, чтобы интегрировать значки в ваш проект. Вы можете использовать любой набор иконок, которые хотите, или обычный текст, если хотите.

Теперь давайте добавим этот значок к нашему HTML:

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

Я выделил новое дополнение жирным шрифтом. Вы заметите, что этот переключатель не входит ни в один из nav теги, но находится вне названия веб-сайта. Имеет смысл.

1*GkN1E6ZKm7W93FKDqTiWBQ
Добавлен значок меню

Конечно, это не то место, где мы хотим. И еще хуже, это видно на разрешении рабочего стола.

1*K5ygf98rpZNXLxQcjsJkXw

Давайте это поправим. Давайте сделаем то, что мы сделали из .Navbar__Items на мобильном устройстве к значку меню на рабочем столе:

.Navbar__Link-toggle {
  display: none;
}

Теперь давайте добавим несколько правил к тому же классу в нашем медиа-запросе:

.Navbar__Link-toggle {
  align-self: flex-end;
  display: initial;
  position: absolute;
  cursor: pointer;
}
1*5jybOok3eVV03DHWKitL3g
Как сейчас выглядит навигационная панель на мобильном телефоне с переключающим меню

Теперь мы здесь почти кончили. Мы выглядим желательно. Но нам нужно добавить функцию переключения в значок меню.

В своем JavaScript добавьте:

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Теперь, наконец, добавьте Navbar__ToggleShow с правилом display:flexна ваш медиа-запрос.

Теперь у нас есть полностью адаптивная панель навигации из меню переключения. С Flexbox это действительно так просто!

1*k0-kcRuPaA4LeuxzcIlJMg

Окончательный код

HTML:

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

CSS:

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

.Navbar__Link {
  padding-right: 8px;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left:auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
    
.Navbar__Items {
    display:none;
  }
    
.Navbar__Items--right {
    margin-left:0;
  }
    
.Navbar__ToggleShow {
    display: flex;
  }
    
.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 
}

JS:

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Узнайте больше о Flexbox на:

Основные понятия flexbox
Модуль Flexible Box, который обычно называют flexbox, был разработан как одномерная модель макета и…

И где я сам научился основам Flexbox:

Я только что запустил бесплатный полнометражный курс Flexbox, где вы можете создавать проекты в интерактивном режиме
После успеха курса CSS Grid, который я запустил с freeCodeCamp в декабре (сейчас более 14 000 студентов!), я…

Следите за мной в Twitter или GitHub.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *