В этой статье мы собираемся создать адаптивную панель навигации с использованием 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
Спасибо, что потратили время на изучение этого руководства