#html#css#beginners#tutorial

Любой веб-сайт в Интернете должен быть адаптивным в современную эпоху Интернета. Одной из обязательных задач является создание панели навигации, которую можно использовать как на устройствах с большим экраном, так и на небольших мобильных устройствах. И это именно то, что мы создадим в этом уроке.

Видеоруководство

Если вместо этого вы предпочитаете смотреть пошаговое видео для начинающих, вы можете посмотреть видео, которое я сделал

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

Ссылки на полный исходный код

Вы можете проверить полный исходный код здесь:

Где вы можете узнать больше от меня?

Я создаю образовательный контент, посвященный веб-разработке и разработке программного обеспечения, не стесняйтесь 👀 проверить их.

🔗 Ссылки: