Привет друзья,

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

Я собираюсь создать папку на своем рабочем столе и назвать ее 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=" />
  </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: один для BrandName/логотипа, второй ul для ссылок и, наконец, третий для кнопок регистрации и входа в div меню. Также мы связали наш styles.css с нашим файлом index.html.

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

@import url("

* {
  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,
  • затем мы удалили отступы и поля по умолчанию и установили импортированное семейство шрифтов;
  • Мы также устанавливаем размер шрифта для нашего HTML-документа равным 62,5%; значение, потому что в более поздних стилях легко определить наши единицы rem размера шрифта.
  • Мы также установили отображение в flex, это будет отображать наши дочерние элементы/элементы в строке (свойство flex-direction по умолчанию — строка)

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

Навбар

давайте двигаться вперед и стилизовать наш бренд, ссылки и кнопки.
Вернитесь к нашему файлу 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 и дадим каждому из них имя класса один, два, три соответственно. мы создадим их чуть ниже раздела 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;
}
Войти в полноэкранный режим

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

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

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

@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);
}
Войти в полноэкранный режим

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

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

Отзывчивая панель навигации

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

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

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