Bootstrap 4. Горизонтельное меню «Navbar»

04.07.2019

Теги: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Меню • Навигация • Фреймворк

Создание горизонтального адаптивного меню для сайта осуществляется с помощью компонента «Navbar». Компонент имеет два режима отображения:

  • десктопный (обычный) — выводятся все элементы меню;
  • мобильный (свёрнутый) — отображается бренд и кнопка «Гамбургер».

Режим отображения меню зависит от ширины viewport браузера. Точка перелома задается с помощью css-класса navbar-expand-{sm…xl}. 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Контейнер (определяет ширину компонента Navbar) -->
    <div class="container">
        <!-- Бренд и кнопка «Гамбургер» -->
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbar-example" aria-controls="navbar-example"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
        <div class="collapse navbar-collapse" id="navbar-example">
            <!-- Этот блок расположен слева -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Первая ссылка <span class="sr-only">(текущая)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Вторая ссылка</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                       role="button" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        Выпадающее меню
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Третья ссылка</a>
                        <a class="dropdown-item" href="#">Четвертая ссылка</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Пятая ссылка</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Не активная</a>
                </li>
            </ul>
            <!-- Этот блок расположен справа -->
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search"
                       aria-label="Search">
                <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Для установки цветового оформления меню используются еще два дополнительных класса: navbar-{…} и bg-{…}. Для установки цвета фона к bg-{…} необходимо добавить любую из восьми цветовых схем — primary, secondary, dark, light, warning, danger, info, success. Класс navbar-{…} отвечает за цвет текста и поддерживает два варианта — navbar-dark и navbar-light. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
</nav>

Для «NavBar» не обязателен контейнер, но если необходимо ограничить ширину всего меню, то можно его обернуть в .container. 

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        ..........
    </nav>
</div>

Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        ..........
    </div>
</nav>

Для позиционирования меню фреймворк предлагает три дополнительных класса:

  • fixed-top — фиксирует меню в самом верху страницы;
  • fixed-bottom — фиксирует меню в самом низу страницы;
  • sticky-top — приклеивает меню в верху при прокрутке страницы.
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    ..........
</nav>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
    ..........
</nav>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
    ..........
</nav>

Элементы меню

Компонент «NavBar» состоит из нескольких подкомпонентов, которые можно добавлять или исключать по мере необходимости.

Название или логотип компании

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Текстовая ссылка -->
    <a class="navbar-brand" href="#">Brand</a>
    ..........
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Ссылка с логотипом -->
    <a class="navbar-brand" href="#">
        <img src="/images/logo.png" width="50" height="50" alt="...">
    </a>
    ..........
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Ссылка с логотипом и текстом-->
    <a class="navbar-brand" href="#">
        <img src="/images/logo.png" class="d-inline-block align-top" width="50" height="50" alt="...">
        Brand
    </a>
    ..........
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Как заголовок без ссылки-->
    <span class="navbar-brand mb-0 h1">Brand</span>
    ..........
</nav>

Кнопка для открытия меню

Имеет css-класс .navbar-toggler и предназначена для показа и скрытия содержимого меню .collapse.navbar-collapse на малениких экранах: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    ..........
</nav>

Блок содержимого меню

Имеет css-классы .collapse.navbar-collapse и скрывается в контрольной точке, которая задается классом navbar-expand-{sm…xl}. Может быть показано и скрыто по клику на кнопке .navbar-toggler: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        ..........
    </div>
    ..........
</nav>

Блок ссылок меню

Имеет css-класс .navbar-nav и состоит из ссылок и вложенных выпадающих списков со ссылками: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">
                    Первая ссылка <span class="sr-only">(текущая)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Вторая ссылка</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                   role="button" data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    Выпадающее меню
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Третья ссылка</a>
                    <a class="dropdown-item" href="#">Четвертая ссылка</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Пятая ссылка</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Не активная</a>
            </li>
        </ul>
        ..........
    </div>
    ..........
</nav>

Форма внутри меню

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        ..........
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search"
                   aria-label="Search">
            <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
    ..........
</nav>

Текст внутри меню

Класс .navbar-text — позволяет добавлять текст в меню. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <span class="navbar-brand mb-0 h1">Brand</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-example">
        <ul class="navbar-nav">
            <li class="nav-item">...</li>
            <li class="nav-item">...</li>
            <li class="nav-item">...</li>
        </ul>
        <!-- Текст внутри меню -->
        <span class="navbar-text mx-auto">Navbar text with an inline element</span>
        <form class="form-inline">
            ..........
        </form>
    </div>
</nav>

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Меню • Навигация • Фреймворк • Navbar

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.