Я сделал адаптивное меню как в Bootstrap без Bootstrap. Что оказалось сложнее всего

Когда начинаешь изучать фронтенд-разработку, часто возникает странная ситуация.

Ты используешь готовые библиотеки, но не всегда понимаешь, что именно они делают за тебя.

Например, Bootstrap.

Несколько классов - и у тебя уже есть красивое адаптивное меню с кнопкой для мобильных устройств.

Но что происходит внутри?

Как браузер понимает, когда нужно скрыть меню?

Как появляется кнопка открытия?

Почему одни элементы остаются на экране, а другие исчезают?

Я решил проверить это на практике.

Вместо того чтобы подключать Bootstrap, я сделал собственное адаптивное меню с нуля.

Только HTML, CSS и JavaScript.

Не для того, чтобы заменить Bootstrap.

А чтобы понять, какую работу он выполняет.

Что я хотел получить

Задача была простой.

Создать меню, которое выглядит как привычная навигация современных сайтов.

На компьютере:

• логотип слева;

• пункты меню справа;

• кнопка регистрации.

На мобильном:

• пункты скрываются;

• появляется кнопка меню;

• по нажатию открывается навигация.

Примерно так работают многие сайты.

На первый взгляд кажется, что это небольшая задача.

Но именно такие детали обычно занимают время в реальной разработке.

Первая версия HTML

Начал с обычной структуры.

<header class="navbar">

    <div class="logo">
        CodeXS
    </div>

    <button class="menu-button">
        ☰
    </button>

    <nav class="menu">

        <a href="#">
            Главная
        </a>

        <a href="#">
            Статьи
        </a>

        <a href="#">
            Новости
        </a>

        <a href="#">
            Контакты
        </a>

    </nav>

</header>

Здесь нет ничего сложного.

Но уже появляется важный вопрос:

кто будет решать, когда меню должно стать мобильным?

HTML этого делать не умеет.

Он только описывает структуру.

За поведение отвечает CSS и JavaScript.

Сначала я сделал только десктопную версию

Первый вариант выглядел нормально.

Меню стояло в одну линию.

.navbar {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.menu {

    display: flex;
    gap: 25px;

}

Несколько строк CSS - и готова базовая навигация.

Но затем я уменьшил окно браузера.

И стало понятно, почему существуют адаптивные фреймворки.

Проблема была простой:

места стало меньше, а меню осталось таким же.

В итоге пункты начали мешать друг другу.

Добавляем мобильный режим

Теперь нужно было сделать то, что Bootstrap делает автоматически.

При маленькой ширине экрана менять поведение элементов.

Добавил медиазапрос:

@media (max-width: 768px) {

    .menu {

        display: none;
        flex-direction: column;

    }

    .menu.active {

        display: flex;

    }

}

Теперь на мобильных устройствах меню скрывается.

Но появилась новая задача.

Как пользователь его откроет?

Добавляем кнопку открытия

Для этого нужен JavaScript.

Создал обработчик:

const button = document.querySelector(
    ".menu-button"
);

const menu = document.querySelector(
    ".menu"
);


button.addEventListener(
    "click",
    () => {

        menu.classList.toggle(
            "active"
        );

    }
);

Всего несколько строк.

Но именно здесь становится понятно, что происходит внутри готовых компонентов.

Bootstrap не делает магию.

Он просто уже содержит такие решения:

• классы;

• стили;

• обработчики;

• проверенные сценарии поведения.

Первая ошибка, которую я допустил

Сначала я сделал открытие меню.

Работает.

Нажимаю кнопку.

Меню появляется.

Но потом заметил проблему.

Если пользователь открыл меню на телефоне, перешёл в альбомную ориентацию или увеличил окно браузера, состояние могло сохраниться неправильно.

То есть проблема была уже не в отображении.

Проблема была в поведении.

Это хороший пример того, почему простая задача иногда становится сложнее, чем кажется.

Улучшаем логику

Добавил проверку размера окна:

window.addEventListener(
    "resize",
    () => {

        if (
            window.innerWidth > 768
        ) {

            menu.classList.remove(
                "active"
            );

        }

    }
);

Теперь меню возвращается в нормальное состояние при изменении экрана.

Что делает Bootstrap вместо меня

После этого эксперимента стало понятнее, почему разработчики используют готовые библиотеки.

Когда создаёшь одно меню, написать его самому несложно.

Но представим большой проект.

Там появляются:

• разные размеры экранов;

• доступность;

• анимации;

• состояния кнопок;

• поддержка браузеров;

• единый стиль компонентов.

И вот здесь Bootstrap начинает экономить время.

Он не избавляет разработчика от понимания.

Он убирает повторяющуюся работу.

Итог эксперимента

Создать адаптивное меню без Bootstrap оказалось несложно.

Основная часть заняла несколько десятков строк.

Но самое интересное было не в коде.

Я лучше понял, какую проблему решают UI-фреймворки.

Когда новичок видит:

<button class="navbar-toggler">

ему кажется, что это просто готовая кнопка.

Но за ней скрывается много логики:

как она выглядит;

когда появляется;

как открывает меню;

как работает на разных устройствах.

После такого эксперимента Bootstrap уже воспринимается иначе.

Не как набор магических классов.

А как инструмент, который экономит время разработчика.

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