Любой веб-сайт в Интернете должен быть адаптивным в современную эпоху Интернета. Одной из обязательных задач является создание панели навигации, которую можно использовать как на устройствах с большим экраном, так и на небольших мобильных устройствах. И это именно то, что мы создадим в этом уроке.
Видеоруководство
Если вместо этого вы предпочитаете смотреть пошаговое видео для начинающих, вы можете посмотреть видео, которое я сделал
Реализация HTML
HTML-разметка будет очень простой и будет состоять из двух отдельных разделов. Сначала мы создадим разметку, которая будет использоваться для десктопной версии, а после этого реализуем разметку, необходимую для мобильного меню.
Разметка HTML
Есть две вещи, которые мы должны добавить:
- Ссылка на таблицу стилей css в разделе head, которую мы создадим:
‹ссылка rel="таблица стилей" href="style.css" /›
- Импорт нашего файла javascript в конец тела:
‹script src="main.js"›‹/script›
Мы заключаем все в теги заголовков, и это сделает наш сайт более доступным, поскольку помогает программам чтения с экрана. Внутри шапки разместим логотип. В данном примере это будет простой текст, заключенный в тег a, который ведет на домашнюю страницу. Под брендом div у нас будет обертка nav. Это также помогает программам чтения с экрана понять страницу. Внутри nav у нас будет ненумерованный список (ul), в котором будут храниться все наши навигационные ссылки (a). Каждая навигационная ссылка будет иметь одинаковую базовую структуру. Каждый из них будет элементом списка (li), а внутри него у нас будет тег a, который ссылается на отдельные страницы.
<!DOCTYPE html> <html lang="en"> <head> <title>Responsive NavBar</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <!-- Logo --> <div class="logo">mbedev</div> <!-- mobile-menu icon code here --> <!-- navbar --> <div class="nav-links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> </ul> </div> </nav> </header> <div class="side-links"> <a href="https://www.youtube.com/@mbedev" target="_blank" class="side-link side-link-youtube"> <img class="side-link-icon" src="youtube.png" alt="test"> <span class="side-link-text">YouTube</span> </a> <a href="https://www.medium.com/@danielmbedobe" target="_blank" class="side-link side-link-medium"> <img class="side-link-icon" src="medium.png" alt="test"> <span class="side-link-text">Medium</span> </a> <a href="https://www.linkedin.com/in/danielmbedobe" target="_blank" class="side-link side-link-linkedin"> <img class="side-link-icon" src="linkedin.png" alt="test"> <span class="side-link-text">LinkedIn</span> </a> </div> <script src="main.js"></script> </body> </html>
Разметка HTML для мобильной версии
При маленьком размере экрана мы будем использовать гамбургер-меню для переключения меню навигации. Для значка гамбургера вы можете использовать любые внешние библиотеки значков, например FontAwesome, но в этом уроке я создам свой собственный значок гамбургера с помощью HTML и CSS.
Значок гамбургера 🍔
HTML-структура иконки будет очень простой. Сначала мы добавим тег привязки с кнопкой меню имени класса. Мы будем использовать тег span для размещения полос внутри кнопки меню.
Реализовать часть CSS
Во-первых, я установлю поля и отступы по умолчанию для каждого браузера. Затем для тела мы установим изображение в качестве фона.
Далее мы сосредоточимся на логотипе. Мы увеличим размер текста и дадим ему немного поля. Затем мы удалим все оформление текста (подчеркивание) со всех ссылок и удалим все маркеры из списка внутри заголовка.
Что касается навигационных ссылок, мы сделаем контейнер полной ширины и отцентрируем его по вертикали, используя flexbox. Мы установим белый цвет для ссылок и добавим интервалы, используя отступы и поля для элементов списка. Я также добавлю эффект наведения, чтобы немного масштабировать ссылки, когда они наведены.
Теперь пришло время реализовать стили для мобильного меню. Теперь мы будем использовать наши классы menu-button и menu-bars для разработки нашего гамбургер-меню с помощью css. По умолчанию меню будет скрыто, поэтому мы применим display: none;. Мы хотим, чтобы мобильное меню занимало все оставшееся пространство сайта (кроме шапки), поэтому сделаем его на всю ширину.
Когда мобильное меню открыто, мы хотим отобразить его, и мы будем использовать flexbox для переопределения display:none. Мы будем использовать столбец flex-direction, чтобы расположить ссылки друг под другом, отцентрировав их по горизонтали. Мы также добавим небольшое нижнее поле к ссылкам, чтобы дать им немного места для дыхания.
Наконец, мы должны добавить медиа-запрос, чтобы скрыть меню рабочего стола, когда мы используем размер мобильного устройства, и отображать значок гамбургера, когда мы используем размер экрана мобильного устройства. Я буду использовать 600px в качестве контрольной точки для мобильных устройств.
Немного JavaScript
В нашем файле index.js у нас будет одна одинокая функция javascript, которая будет переключать мобильное меню между открытым и закрытым состояниями. Мы добавим обработчик события щелчка и воспользуемся ссылкой на активный класс из css и изменим его classList, используя ее. Функция переключения проверит, присутствует ли предоставленный триггер в элементе, и если да, то удалит его, а если нет, то добавит.
Ссылки на полный исходный код
Вы можете проверить полный исходный код здесь:
Где вы можете узнать больше от меня?
Я создаю образовательный контент, посвященный веб-разработке и разработке программного обеспечения, не стесняйтесь 👀 проверить их.
🔗 Ссылки:
- ☕️ Поддержите бесплатное образование и мою работу, купите мне кофе
- 📧 Медиум Подпишитесь здесь
- 🎥 YouTube @mbedev