Создание адаптивной панели навигации с помощью HTML, CSS и JavaScript

Адаптивная панель навигации является важным элементом любого современного веб-сайта, поскольку позволяет пользователям легко перемещаться по сайту на разных устройствах. В этой статье мы рассмотрим, как создать адаптивную панель навигации с помощью HTML, CSS и JavaScript.

Для начала мы создадим структуру HTML для панели навигации. Мы будем использовать элемент nav для переноса элементов навигации и элемент ul для хранения навигационных ссылок:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Далее мы стилизуем панель навигации с помощью CSS. Мы зададим элементу nav фиксированное положение в верхней части страницы и зададим ему цвет фона:

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #333;
}

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

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  padding: 20px;
}
nav a {
  color: white;
  text-decoration: none;
}

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

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

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

Чтобы добавить кнопку-переключатель для адаптивной навигации, мы будем использовать JavaScript для переключения класса в элементе nav при нажатии кнопки-переключателя. Мы также будем использовать CSS для оформления кнопки переключения и скрытия навигационных ссылок на маленьких экранах:

nav .toggle {
  display: none;
}

@media (max-width: 600px) {
  nav ul {
    display: none;
  }
  nav .toggle {
    display: block;
    background-color: #333;
    color: white;
    padding: 10px;
    cursor: pointer;
  }
}

Чтобы добавить кнопку-переключатель, мы создадим элемент button внутри элемента nav и присвоим ему класс toggle:

<nav>
  <button class="toggle">Toggle</button>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Наконец, мы будем использовать JavaScript для переключения класса active в элементе nav при нажатии кнопки переключения:

const toggle = document.querySelector('.toggle');
const nav = document.querySelector('nav');

toggle.addEventListener('click', () => {
  nav.classList.toggle('active');
});

Затем мы можем использовать класс active в нашем CSS для отображения и скрытия навигационных ссылок:

@media (max-width: 600px) {
  nav ul {
    display: none;
  }
  nav.active ul {
    display: block;
  }
}

Благодаря этим изменениям наша панель навигации теперь полностью адаптивна и может переключать навигационные ссылки на маленьких экранах.