Меню сайта в Bootstrap 4 (navbar)

Меню сайта в Bootstrap 4 (navbar)

Navbar - это простая оболочка для размещения логотипа, навигации и других основных элементов в заголовке страницы. Этот объект так же называют шапкой страницы или хидером (англ. header).

Давайте рассмотрим простейшую реализацию navbar в Bootstrap 4:

<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Разберем этот код подробнее:

  • Оберните все внутри элемента nav классом .navbar и классом .navbar-expand {-sm | -md | -lg | -xl} вместе с цветовой схемой.
  • Для скрытия и открытия меню на небольших устройствах используйте элемент кнопки с классом .navbar-toggler. Чтобы отобразить «гамбургер» (кнопка открытия/скрытия меню), используйте класс .navbar-toggler-icon для элемента span.
  • Для вывода списка ссылок используйте ul с классом .navbar-nav.
  • Для каждого отдельного элемента списка используйте тег li с .nav-item.
  • Для отдельных ссылок используйте .nav-link.

Navbar с выпадающим меню

Вы можете добавить выпадающие меню на панель навигации navbar. Просто добавьте выпадающее меню в элемент li с примененным классом .dropdown.

<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="Preview">
          <a class="dropdown-item" href="#">Dropdown Link 1</a>
          <a class="dropdown-item" href="#">Dropdown Link 2</a>
          <a class="dropdown-item" href="#">Dropdown Link 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Формы в navbar

Вы можете добавить элементы формы в панель навигации navbar, добавив .form-inline к тегу формы. Для того, чтобы форма была расположена в правой части шапки, добавьте класс .mr-auto:

<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
    </ul>
    <form class="form-inline" role="search">
      <input type="text" class="form-control">
      <button type="submit" class="btn btn-secondary">Search</button>
    </form>
  </div>
</nav>

Цвет фона navbar

блок 1

Bootstrap предоставляет различные опции для добавления цвета на панель навигации navbar. Это работает так: вы указываете тип, светлый или темный (через .navbar-light или .navbar-dark), а затем указываете цвет фона. Цвет можно указать либо с помощью одного из классов цвета Bootstrap (например, .bg-primary, .bg-dark), либо указав свой собственный цвет с помощью CSS (например, используя background-color).

Navbar с основным цветом фона и светлым текстом

В этом примере мы используем .bg-primary вместе с .navbar-dark:

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Кастомный (пользовательский) цвет меню navbar

Чтобы указать свой собственный цвет фона меню navbar, удалите любой класс .bg-* (например, удалите .bg-primary) и добавьте свой собственный цвет с помощью CSS.

<nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Фиксированное позиционирование navbar

Вы можете закрепить панель навигации вверху или внизу окна просмотра, используя .fixed-top или .fixed-bottom.

Пример navbar зафиксированного в верхней части экрана:

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="collapse navbar-collapse" id="nav-content"> 
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

При использовании фиксированных панелей навигации вам обычно нужно добавить отступы к телу документа, чтобы компенсировать высоту панели навигации (в противном случае панель навигации будет скрывать ваш контент).

Например, для navbar который зафиксирован в верхней части документа, используйте следующие стили css:

body { padding-top: 70px; }

Они «отодвинут» весь контент сайта вниз на 70 пикселей и navbar не будет перекрывать его.

блок 3

1 Kомментарий

  1. Замечательные статьи, попробовал первую конструкцию «navbar в Bootstrap 4» всё замечательно, только работает криво, при изменении разрешения, Гамбургер появляется, тексты ссылок скрываются, но стоит нажать на Гамбургер, тексты ссылок опять появляются, и сам Гамбургер сдвигается вправо, т.е. само меню при клике не раскрывается вниз. Джумла 3.10.2 Шаблон Helix Ultimate 2.05. Перепроверил все классы присвоились верно.

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*