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

В этом руководстве вы:

  • Создание новых файлов HTML, CSS и Javascript
  • Связать все файлы с HTML
  • Сделать макет в HTML
  • Добавление стилей с помощью CSS
  • Добавление медиа-запроса для мобильных устройств
  • Пишите код на Javascript

Шаг 1. Создайте новые файлы HTML, CSS и Javascript

Navigation Bar
--index.html
--style.css
--main.js

Шаг 2. Свяжите все файлы с HTML

<html>
<head>
<link rel=”stylesheet” href=”style.css” />
<script src=”main.js” defer></script>
</head>
<body>
<body>
</html>

Шаг 3: Сделайте макет в HTML

Макет выглядит так

Шаг 4: Добавление стилей с помощью CSS

Вы можете добавить вышеуказанный код в внешний файл css или внутренний css.

Страница выглядит следующим образом:

Страница выглядит по-разному на разных размерах экрана

  • Компьютер

  • Мобильный

В мобильной версии шрифт выглядит крошечным. Чтобы решить эту проблему, добавьте тег области просмотра внутри тега head в файле html.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

После исправления проблемы страница выглядит так

Это решение, но мы хотим, чтобы страница выглядела лучше.

Шаг 5. Добавление медиазапроса для мобильных устройств:

Медиа-запрос — это метод CSS, представленный в CSS3. Это позволяет писать css для определенных размеров экрана или конкретного устройства (принтера). Он выполняется только тогда, когда выполняется заданное условие внутри медиа-запроса.

@media (max-width: 600px) {
  #mobile-menu-btn {
    display: block;
  }
  nav p {
    display: none;
  }
  .mobile-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}

После добавления медиа-запроса

Ссылки скрыты так. Добавьте немного кода javascript, чтобы показывать ссылки или скрывать их в зависимости от нажатия пользователем кнопки Меню.

Шаг 6. Пишите код на Javascript:

var mobileMenuBtn = document.querySelector("#mobile-menu-btn");
var mobileMenu = document.querySelector(".mobile-menu");
mobileMenuBtn.addEventListener("click", () => {
  if (mobileMenu.style.display === "none") {
    mobileMenu.style.display = "flex";
    mobileMenuBtn.innerHTML = "Close";
  } 
  else {
    mobileMenu.style.display = "none";
    mobileMenuBtn.innerHTML = "Menu";
  }
});

Добавьте этот код в файл main.js или в тег script внутри файла HTML.

Результат:

Готовый код доступен в Codepen

Спасибо, что потратили время на изучение этого руководства