Меню сайта в 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

    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 не будет перекрывать его.

    Источник

    Просмотров:

    Добавить комментарий

    Adblock
    detector