Как создать отзывчивую панель навигации с анимацией кнопок Toggler с помощью Flexbox?

Здравствуйте, друзья,

Сегодня мы рассмотрим, как сделать отзывчивую панель навигации с помощью Flexbox.
Почему именно Flexbox? Потому что Flexbox дает нам свободу изменять порядок элементов в дочерних элементах. В этом посте вы увидите, как мы этого добились. Итак, без лишних слов приступим…

Я собираюсь создать папку на рабочем столе и назвать ее responsiveNavbar (вы можете создать ее там, где захотите). Давайте создадим два файла index.html и styles.css; я собираюсь открыть папку в VS Code, (вы можете использовать ваш любимый редактор кода, мне нравится VS Code);

Из приведенного выше превью вы можете увидеть, что навигационная панель разделена на 3 части

  • Название бренда (это может быть логотип или название компании, что угодно…)
  • Навигационные ссылки и
  • Кнопки входа и регистрации

Сначала создадим базовую разметку для нашего проекта
откройте файл index.html и вставьте следующий код

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive NavBar</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav class="nav__bar">
        <div class="nav__brand">
          <a href="#" class="navbar__brand">Brand Name</a>
        </div>
        <div class="nav__links">
          <ul class="nav__items">
            <li class="nav__item">
                <a href="#" class="nav__link">Home</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">About</a>
            </li>
            <li class="nav__item">
              <a href="#" class="nav__link">Services</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Blogs</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Contact</a>
            </li>
          </ul>
          <div class="nav__btns">
              <button class="nav__btn">Sign Up</button>
              <button class="nav__btn">Login</button>
          </div>
        </div>   
      </nav>
    </header>
  </body>
</html>

Вход в полноэкранный режим Выйти из полноэкранного режима

Ничего вычурного, мы создали 3 div’а один для имени бренда/логотипа второй ul для ссылок и наконец третий для наших кнопок регистрации и входа в меню div. Также мы связали наш styles.css с нашим файлом index.html.

Теперь приступим к оформлению нашей панели навигации. Откройте файл styles.css и вставьте следующий код

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
  color: #fff
}
ul li {
  list-style-type: none;
}
nav.nav__bar {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  height: 8vh;
  background-color: #00003f;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте разберемся, что означает приведенный выше код,

  • В первой строке мы импортировали шрифты Google,
  • затем мы удалили стандартные padding, margin и установили импортированный шрифт font-family;
  • Мы также установили размер шрифта для нашего html-документа равным 62,5%; это значение обусловлено тем, что в последующих стилях легко определить размер шрифта в единицах измерения.
  • Мы также установили для display значение flex, что позволит отображать дочерние элементы в ряд (по умолчанию свойство flex-direction имеет значение row).

Пока что наше отображение выглядит так, как показано на рисунке ниже.

Давайте продвинемся вперед и оформим наш бренд, ссылки и кнопки.
Вернитесь в наш файл styles.css и вставьте следующий код

.nav__brand {
  margin-left: 3rem;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.25rem;
  color: #f6f6f6;
}
.nav__menu {
  display: flex;
  align-items: center;
  transition: 0.5s ease-in;
}
.nav__items {
  display: flex;
  gap: 2rem;
  transition: 0.5s linear;
}
.nav__link {
  font-size: 1.8rem;
}
.nav__link:hover,
.nav__link:focus {
  color: #f6f6f6;
  font-weight: 600;
}
button {
  margin-right: 1.5rem;
}
.nav__btns {
  margin-right: 3rem;
  padding: 0.5rem 1rem;
}
.nav__btns .signup,
.nav__btns .login {
  padding: 0.6rem 2rem;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  width: 12rem;
  transition: background 0.2s ease-in-out;
}

.nav__btn.signup {
  background: transparent;
  border-color: #cd0362;
}

.nav__btn.login {
  background-color: #03cd62;
}
.nav__btn.login:hover,
.nav__btn.login:focus {
  opacity: 0.8;
}
.nav__btn.signup:hover,
.nav__btn.signup:focus {
  background-color: #cd0362;
  border-color: #fff;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Наш результат должен выглядеть примерно так, как показано на рисунке ниже:

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

Вернемся к нашему index.html и создадим 3 div’а и дадим каждому из них имя класса one, two, three соответственно. Мы создадим их чуть ниже раздела nav__menu;

    <div class="nav__toggler toggleIcon">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
        </div>
Вход в полноэкранный режим Выход из полноэкранного режима

Также давайте придадим стиль вышеупомянутому togglerIcon, который мы только что создали.
Вернитесь в файл styles.css и вставьте следующий код;

.nav__toggler div {
  width: 3rem;
  height: 0.2rem;
  margin: 0.4rem;
  background: #909090;
  transition: 0.4s ease-in-out;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Пока что наша панель навигации должна выглядеть так, как показано на рисунке;

Но также знайте, что мы не хотим отображать иконку тумблера на больших размерах экрана. Мы будем отображать его только на средних и меньших размерах экрана. Поэтому добавим следующий код в файл styles.css.

.nav__toggler {
  cursor: pointer;
  display: none;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь, когда мы создали нашу панель Navbar, давайте напишем несколько медиа-запросов, чтобы сделать ее отзывчивой.

Стиль для малых и средних размеров экрана

@media screen and (max-width: 900px) {
  .nav__toggler {
    display: block;
  }
  .nav__menu {
    position: fixed;
    top: 9.5vh;
    right: 0;
    width: 50%;
    height: 90vh;
    background: #00003f;
    flex-direction: column;
    z-index: 999;
    transform: translateX(0);
  }
  .nav__items {
    flex-direction: column;
  }
  .nav__btns {
    margin-left: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3rem;
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

.nav__active {
  transform: translateX(0);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это должно помочь нам.

Поскольку это всего лишь небольшой учебник, я напишу сценарий в файле index.html непосредственно перед закрывающим тегом body.

<script>
      const toggler = document.querySelector(".nav__toggler");
      toggler.addEventListener("click", activeClass);
      function activeClass() {
        document.querySelector("#navMenu").classList.toggle("nav__active");
      }
    </script>
Вход в полноэкранный режим Выйти из полноэкранного режима

Давайте разберемся в приведенном выше коде.

  • Мы захватываем кнопку переключения и сохраняем ее в переменной.
  • Затем мы добавили слушатель событий к нашему toggleIcon;
  • по щелчку он вызовет функцию activeClass().
  • В этой функции мы переключим активный класс, то есть если класс присутствует, то он будет удален, и наоборот.

Наш результат должен выглядеть примерно так, как показано на рисунке ниже.

Осталось только анимировать тумблер/иконку меню;
Для этого нам нужно написать следующую строку кода в нашей функции javascript.

function activeClass() {
        document.querySelector("#navMenu").classList.toggle("nav__active");
        document.querySelector("#toggleIcon").classList.toggle("toggleIcon");
      }
Войти в полноэкранный режим Выйти из полноэкранного режима

мы переключим класс для иконки меню по щелчку мыши.
Давайте также определим класс toggleIcon для нашей анимации, для этого вернемся к файлу styles.css и напишем следующий код.

toggleIcon .one {
  transform: rotate(-45deg) translate(-4px, 5px);
}
.toggleIcon .two {
  opacity: 0;
}
.toggleIcon .three {
  transform: rotate(45deg) translate(-4px, -5px);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Вывод должен выглядеть так, как показано на рисунке ниже…

Мы подошли к концу нашего урока. Надеюсь, вам понравилось.

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

Хорошего дня!!!

Оцените статью
devanswers.ru
Добавить комментарий