Bootstrap 3 - Navbar (горизонтальное меню)

Содержание:
  1. Как в Bootstrap создать горизонтальное адаптивное меню
  2. Фиксированное (плавающее) меню
  3. Неподвижное верхнее горизонтальное меню
  4. Меню, имеющее тёмные цвета
  5. Как изменить точку переключения navbar
  6. Как зафиксировать меню при прокрутке
  7. Bootstrap Navbar - Анимация кнопки меню
  8. Изменение максимальной высоты collapsed блока
  9. Горизонтальное меню для навигации по странице
  10. Navbar - Открытие dropdown меню при наведении
  11. Установка активного пункта меню с помощью JavaScript
  12. Изменение высоты Navbar
  13. Комментарии

В этой статье вы узнаете, как в Bootstrap 3 осуществляется создание главного (основного) горизонтального меню для сайта.

Как в Bootstrap создать горизонтальное адаптивное меню

Создание горизонтального адаптивного меню для сайта в Bootstrap осуществляется с помощью компонента Navbar.

Navbar имеет 2 режима отображения:

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

Режим отображения меню зависит от ширины viewport браузера. По умолчанию меню Navbar имеет мобильный вид при ширине viewport меньше 768px.

Демонстрация компонента Navbar

Описание меню Navbar

Меню Navbar состоит из:

  • заголовка navbar-header (кнопки «Гамбургер» и бренда);
  • основной части (места для размещения ссылок, кнопок, форм и других элементов).

HTML-структура Bootstrap меню Navbar (без поддержки вспомогательных технологий):

HTML
<!-- Классы navbar и navbar-default (базовые классы меню) -->
<nav class="navbar navbar-default">
  <!-- Контейнер (определяет ширину Navbar) -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Бренд или название сайта (отображается в левой части меню) -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->
    </div>
  </div>
</nav>

Работа с меню в основном заключается в наполнении её содержимого (элемента с классом navbar-collapse).

Добавление в меню ссылок и выпадающего списка

Добавление ссылок в меню осуществляется следующим образом:

HTML
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
      </ul>

    </div>
  </div>
</nav>

Класс active предназначен для подсвечивания активного пункта меню.

Добавление выпадающего списка в меню:

HTML
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">

        <!-- Ссылки -->
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>

        <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>

      </ul>

    </div>
  </div>
</nav>

Добавления разделителя между пунктами в выпадающем меню осуществляется посредством добавления элемента li с классом divider:

HTML
<li role="separator" class="divider"></li>

Добавим в меню ещё блок, содержащий ссылку и выпадающий список, но расположенный справа:

HTML
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
        ...
      </ul>

      <!-- Блок, расположенный справа -->
      <ul class="nav navbar-nav navbar-right">
        <!-- Ссылка -->
        <li><a href="#">Ссылка</a></li>
          <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>

Кнопка «Гамбургер» отображается только в мобильной версии и предназначена для открытия основной части меню. Указание элемента (основной части) осуществляется посредством атрибута data-target.

Значение атрибута data-target кнопки Гамбургер должно указывать на элемент, представляющий собой основной контент горизонтального меню Bootstrap Navbar

Кроме атрибута data-target и связанным с ним id, в меню Navbar используются и много других сущностей. Они играют роль селекторов, с помощью которых к элементам меню добавляются стили (CSS) и логика (JavaScript).

Например, у кнопки «Гамбургер» атрибут data-toggle="collapse" предназначен для того, чтобы JavaScript его инициализировал как Collapse. После инициализации эта кнопка может переключать видимость элемента, указанного в data-target.

Кроме этого, JavaScript, в зависимости от состояния меню, добавляет и к другим элементам различные классы.

Один из этих классов – это collapsed. Он присутствует у кнопки «Гамбургер», когда меню находится в свёрнутом (не в открытом) состоянии.

Для элемента, в котором отображается основной контент, логика JavaScript устанавливает определённый класс (классы) из следующего списка:

  • collapse (скрыт);
  • collapsing (находится в процессе открытия или закрытия);
  • collapse и in (открыт).

Поддержка вспомогательных технологий

HTML-структура Bootstrap меню Navbar с поддержкой вспомогательных технологий:

HTML
<!-- Классы navbar и navbar-default -->
<nav class="navbar navbar-default">
  <!-- Контейнер -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
        <span class=sr-only>Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Бренд или название сайта -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню -->
    <div class="collapse navbar-collapse" id="navbar-main">

      <!-- Содержимое основной части -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
        <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>

В вышеприведённом примере разметка блока Navbar представлена с использованием ARIA атрибутов и класса sr-only. Данные сущности предназначены для того, чтобы сделать горизонтальное меню более доступным для программ чтения экрана.

Класс sr-only предназначен для скрытия контента на всех устройствах, кроме программ Screen Readers. Т.е. содержимое нижеприведённых элементов будет доступно только им:

HTML
<span class="sr-only">Toggle navigation</span>
<span class="sr-only">(current)</span>

При чтении HTML страницы пользователь не поймёт что это за элемент, если к нему не добавить поясняющий текст. Например, фраза Toggle Navigation поясняет, что с помощью этого элемента осуществляется переключение навигации.

Кстати, если ваша аудитория является русскоговорящей и пользователь не знает английского языка, то он и в этом случае может не понять назначение элемента.

Поэтому для русскоговорящей аудитории текст желательно указывать так:

HTML
<span class="sr-only">Кнопка, для переключения навигации</span>
<span class="sr-only">(текущая)</span>

Атрибут role предназначен для того, чтобы указать назначение того или иного элемента:

  • role="navigation" – содержит навигацию;
  • role="button" – элемент, на который можно кликнуть.

Атрибуты, начинающиеся с aria, предназначены для описания элементов и их состояния:

  • aria-expanded – сообщает, развёрнут или свёрнут элемент;
  • aria-haspopup – сообщает, что элемент имеет подменю или контекстное меню.

Если вам не нужна поддержка вспомогательных технологий, то данные сущности при создании меню можно не использовать.

Использование в качестве бренда изображения

В качестве бренда можно использовать не только текст, но и изображение (img).

HTML
<a class="navbar-brand" href="/">
  <img src="navbar-brand.svg" height="36" alt="Название бренда или сайта">
</a>

При установке изображения придётся немного подкорректировать класс navbar-brand. А именно в зависимости от высоты изображения изменить значение padding отступов.

Например, для изображения, имеющего высоту 36px, в качестве значений отступов padding-top и padding-bottom необходимо установить следующее:

CSS

/* 50px - 36px = 14px
   14px / 2 = 7px
   50px - высота меню Navbar по умолчанию */
.navbar-brand {
  padding-top: 7px;
  padding-bottom: 7px;
}

Вставка формы в меню

Помещение формы в меню осуществляется посредством добавления к ней класса navbar-form:

HTML
<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Класс navbar-form необходим для того, чтобы обеспечить правильное позиционирование формы внутри меню.

Некоторым элементам управления формы, например, таким как группа кнопок, может потребоваться установка фиксированной ширины для того, чтобы обеспечить их правильное отображение внутри компонента Navbar.

Вставка кнопки в меню

Вставка в меню кнопки, расположенной вне формы, осуществляется посредством добавления к ней дополнительного класса navbar-btn.

HTML
<button type="button" class="btn btn-default navbar-btn">Войти</button>

Класс navbar-btn может применяться к элементам a и input.

Вставка текста в меню

Для того чтобы в меню поместить некоторый текст, его необходимо обернуть с помощью элемента p и добавить к нему класс navbar-text.

HTML
<p class="navbar-text">Вошли как Тимофей</p>

Ссылки вне элемента nav

Для использования стандартных ссылок вне специально предназначенного для этого элемента, к ним необходимо добавить класс navbar-link.

HTML
<p class="navbar-text navbar-right">Вошли как <a href="#" class="navbar-link">Тимофей;/a></p>

Выравнивание элементов внутри меню

Выравнивание ссылок, форм, кнопок и текста в меню осуществляется с помощью добавления к ним класса navbar-left или navbar-right. Эти классы выравнивают элемент соответственно по левому или по правому краю. Осуществляют они это действие посредством установки элементу CSS-свойства float со значением left или right.

В отличие от классов pull-left и pull-right, они делают это только для десктопной версии горизонтального меню Navbar.

Например, для того чтобы выровнять группу гиперссылок в меню по правому краю, к элементу ul необходимо добавить класс navbar-right:

HTML
<ul class="nav navbar-nav navbar-right">
  ...
</ul>

Управление видимостью элементов меню на устройствах

В Bootstrap 3 имеется набор адаптивных классов (например, hidden-xs, hidden-sm, hidden-md, hidden-lg), с помощью которых можно очень просто скрыть отображения элемента на определённых устройствах.

Например, скроем отображения элемента в меню на маленьких (sm) и средних (md) экранах.

HTML
<ul class="nav navbar-nav navbar-right hidden-sm hidden-md">
  <li><a href="#">Ссылка 6</a></li>
  <li><a href="#">Ссылка 7</a></li>
</ul>

Фиксированное (плавающее) меню

Bootstrap 3 предоставляет классы, с помощью которых вы можете прикрепить (зафиксировать) меню при прокрутке странице к её верхней или нижней части.

Прикрепление к верхней части страницы

Для создания адаптивного горизонтального меню, прикрепленного к верхней части страницы, к нему необходимо добавить дополнительный класс navbar-fixed-top.

HTML
<!-- Класс navbar-fixed-top прикрепляет меню к верхней части страницы -->
<nav class="navbar navbar-default navbar-fixed-top">
  <!-- Элемент с классом container или container-fluid необходим для центрирования и установки необходимых отступов слева и справа для контента -->
  <div class="container">
    ...
  </div>
</nav>

Содержимое горизонтального меню помещайте внутрь контейнера с классом container или container-fluid. Это обеспечит центрирование меню и установку необходимых отступов слева и справа для его контента.

Для того чтобы верхнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body добавить CSS свойство padding-top (высота меню Navbar по умолчанию равна 50px):

CSS

body {
  padding-top: 70px;
}

Данное правило необходимо включить в свой файл CSS. Этот файл должен быть подключен после Bootstrap CSS.

Кроме этого, из-за того что у нас основной контент сдвинут, переход к определённому месту страницы, посредством якоря, будет выполняться не корректно. Чтобы это исправить, в CSS необходимо добавить следующий код:

CSS
:target:before {
  display: block;
  content: " ";
  margin-top: -70px;
  height: 70px;
  visibility: hidden;
}

Меню, прикрепленное к нижней части страницы

Прикрепление меню к нижней части страницы осуществляется посредством добавления к нему дополнительного класса navbar-fixed-bottom.

HTML
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Чтобы нижнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body добавить следующее CSS правило:

CSS
body {
  padding-bottom: 70px;
}

Неподвижное верхнее горизонтальное меню

При расположении обычного (прокручиваемого) меню в верхней части страницы к нему желательно добавить класс navbar-static-top.

HTML
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Данный класс (navbar-static-top) :

  • убирает радиусы (border-radius: 0);
  • удаляет левую, правую и верхнюю границу у меню (border-width: 0 0 1px).

Меню, имеющее тёмные цвета

Фреймворк Bootstrap предоставляет класс navbar-inverse, с помощью которого вы можете установить меню тёмный стиль (инвертированный по отношению к navbar-default).

HTML
<nav class="navbar navbar-inverse">
  ...
</nav>
Горизонтальное меню Bootstrap в тёмном стиле

Как изменить точку переключения navbar

Самый простой способ изменить точку переключения (значение переменной @grid-float-breakpoint) – это создать свою сборку Bootstrap на странице Customize.

Установка в качестве точки переключения меню Navbar значения 900px

Способ изменения точки схлопывания меню с помощью CSS (без создания своей сборки):

CSS
@media (max-width: 899px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
  .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
  }
}

Для того чтобы создать не схлопывающееся меню можно воспользоваться вышеприведённым решением, но назначить в качестве значения переменной @grid-float-breakpoint значение 320px (минимальную ширину экрана устройства).

Как зафиксировать меню при прокрутке

Если необходимо зафиксировать меню не сразу, а после прокрутки страницы на величину, равной высоте некоторого блока, расположенного до него, то можно воспользоваться CSS свойством position со значением sticky.

HTML
<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div>
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" style="position: -webkit-sticky; position: sticky; top: 0;">
    ...
  </nav>
</body>

Но данное решение не работает в браузерах IE и Edge. Если нужна их поддержка всех браузеров, то можно воспользоваться плагином Bootstrap 3 Affix.

HTML
<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div>
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">
    ...
  </nav>
</body>
CSS (стили для откреплённого меню, т.е. находящегося в состоянии affix):
CSS
.navbar.affix {
  top:0;
  width:100%;
}

Bootstrap Navbar - Анимация кнопки меню

Примеры кода, с помощью которых вы можете «оживить» кнопку «Гамбургер».

1 вариант (анимация в иконку закрытия):

CSS
.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 10% 10%;
  -ms-transform-origin: 10% 10%;
  transform-origin: 10% 10%;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
  -ms-transform-origin: 10% 90%;
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

2 вариант (анимация в стрелочку, направленную вверх):

CSS
.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  transform: translate3d(1px,0,0) rotate(-45deg);
  transform-origin: center center;
  width: 11px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  transform: rotate(-90deg);
  transform-origin: center center;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  transform: translate3d(0px,-14px,0) rotate(-135deg);
  transform-origin: right top;
  width: 11px;
}

Изменение максимальной высоты collapsed блока

В Bootstrap 3 по умолчанию максимальная высота выпадающего (collapsed) блока (в мобильном виде) равна 340px.

CSS
.navbar-collapse {
  max-height: 340px;
}

Если вы хотите данное значение устанавливать динамически, т.е. в зависимости от высоты устройства, то можно воспользоваться следующим скриптом (для верхнего фиксированного меню Navbar):

JavaScript
$(function() {
  $('.navbar-collapse').css({
    maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
  });
});

Если необходимо с учётом возможного изменения экрана, то так:

JavaScript
$(function() {
  var changeHeightNavbarCollapse = function() {
    $('.navbar-collapse').css({
      maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
    });
  };

  changeHeightNavbarCollapse();

  $(window).resize(function() {
    if (window.innerWidth <= 768) {
      changeHeightNavbarCollapse();
    }
  });

});

Пример, как collapsed блок можно развернуть на всю высоту устройства (для верхнего фиксированного меню Navbar):

HTML
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      ...
    </div>
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- имеет margin-top и margin-bottom, равные 7.5px -->
      <ul class="nav navbar-nav">
        ...
      </ul>
    </div>
  </div>
</nav>
...
<script>
$(function(){
  var changeHeightNavbarCollapse = function() {
    if (window.innerWidth < 768) {
      $('.navbar-collapse').css({
        maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
      });
      $('.navbar-collapse .navbar-nav').css({
        height: $(window).height() - $('.navbar-header').height() - 16 + 'px'
      });
    } else {
      $('.navbar-collapse .navbar-nav').css({
        height: 'auto'
      });
    }
  };
  changeHeightNavbarCollapse();
  $(window).resize(function(){
    changeHeightNavbarCollapse();
  });
});
</script>

Горизонтальное меню для навигации по странице

Пример создания меню для одностраничного сайта с подсветкой текущего пункта (с использованием компонента ScrollSpy):

HTML
<body data-spy="scroll" data-target="#navbar-main" data-offset="90" style="padding-top:70px;">

  <!—Фиксированное горизонтальное меню для навигации по текущей странице -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#href1">Ссылка 1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Ссылка 2</a></li>
          <li><a href="#href3">Ссылка 3</a></li>
          <li><a href="#href4">Ссылка 4</a></li>
          <li><a href="#href5">Ссылка 5</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!--Основной контент страницы -->
  <main>
    <div class="container-fluid">
      ...
      <h1>Название страницы</h1>
      ...
      <h2 id="href1">Заголовок 1</h2>
      ...
      <h2 id="href2">Заголовок 2</h2>
      ...
      <h2 id="href3">Заголовок 3</h2>
      ...
      <h2 id="href4">Заголовок 4</h2>
      ...
      <h2 id="href5">Заголовок 5</h2>
      ...
    </div>
  </main>
  ...
</body>

Дополнительно на страницу необходимо ещё поместить скрипт, который будет в мобильном виде при нажатии на ссылку закрывать collapsed блок:

JavaScript
//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});

Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):

JavaScript
$(function() {
  function onNavbar() {
    if (window.innerWidth >= 768) {
      $('.navbar-default .dropdown').on('mouseover', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').show();
      }).on('mouseout', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
      });
      $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
          window.location = $(this).attr('href');
        }
      });
    } else {
      $('.navbar-default .dropdown').off('mouseover').off('mouseout');
    }
  }
  $(window).resize(function() {
    onNavbar();
  });
  onNavbar();
});

Установка активного пункта меню с помощью JavaScript

Подсветку активного пункта (установку ему класса active) можно выполнять не только на стороне сервера, но и на клиенте (в браузере) с помощью следующего сценария JavaScript:

JavaScript
$(function() {
  // путь текущей страницы
  var pathPage = location.pathname.slice(1);
  var parentUl = $('.navbar-nav a[href*='+pathPage']').closest('li').addClass('active').parent('ul');
  if (parent.closest('.navbar-nav li').length) {
    parentUl.closest('li').addClass('active');
  }
});

Изменение высоты Navbar

Наиболее простой способ изменить высоту – это собрать свою сборку (например, на странице Bootstrap Customize). За высоту меню Navbar отвечает переменная @navbar-height.

Другой вариант – это переопределить существующие стили (CSS):

CSS
.navbar {
  min-height: 80px;
}
.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}
.navbar-toggle {
  /* (80px - высота кнопки 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

Статьи, связанные с этой темой:

Комментарии: 260

Diana
Diana
Александр, спасибо за подробные статьи, очень хорошо получилось меню. Но есть проблема, если сможете помочь — буду очень благодарна. Сделала справа в навигаторе форму для поиска. Но кнопка «пуск» прилипла к нему снизу. Никак не получается её перенести вправо. Может, если какие-то «насильные» методы размещения кнопки?

Дмитрий
Дмитрий
Здравствуйте! Понравилось ваше меню зеленого цвета, особенно когда в мобильнике можно прокрутить в право. Искал на вашем сайте информацию, но не нашел. Подскажите пжл может, у вас есть статья про меню со скроллингом на мобильных. Буду очень благодарен, если поможете!
Александр Мальцев
Александр Мальцев
Привет! Такого материала нет. Если он нужен, то напишу статью на эту тему.
Дмитрий
Дмитрий
Да нужен, будет очень полезная информация.
simha
simha
Здравствуйте!
Спасибо Вам большое за уроки!
Не могли бы Вы подсказать? Есть меню на Bootstrap. Со временем возникла необходимость увеличить количество пунктов меню; но в одну строку они не помещаются, и меню съезжает под логотип. Нельзя ли сделать так, чтобы пункты меню располагались в 2 строки справа от логотипа? Спасибо!

<nav class="navbar navbar-default bootsnav">
           <div class="container">
               <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="index.html">
                        <img src="assets/img/logo.jpg" class="logo" alt="логотип">
                    </a>
                </div>
                   <div class="collapse navbar-collapse" id="navbar-menu">
                    <ul class="nav navbar-nav navbar-left">
                       <li><a href="">Ссылка 1</a></li> 
                             <li>
                            <a href="">Ссылка 2</a>
                        </li> 
                    <li>   <a href="">Ссылка 3</a> </li> 
                     <li>
                            <a href=""> Ссылка 4</a>
                        </li> 
                     <li>
                            <a href="">Ссылка 5</a>
                        </li> 
                        
                           <li><a href="">Ссылка 6</a>    </li> 
                                <li>
                            <a href="">Ссылка 7</a>
                        </li> 
                           <li>
                            <a href="">Ссылка 8</a>
                        </li> 
                        <li>
                            <a href="">Ссылка 9
                            </a>
                        </li> 
                        <li><a href="">Ссылка 10</a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
Александр Мальцев
Александр Мальцев
Здравствуйте! Оно так организовано, и чтобы его изменить под это описание, в нём придётся много чего переделывать. На мой взгляд в этом случае лучше отказаться от Bootstrap меню и написать своё так как нужно.
Ekzot
Ekzot
Здравствуйте. Есль ли способ в Bootstrap 4 сделать так, чтобы при нажатии на гамбургер менялся фон navbar?
Александр Мальцев
Александр Мальцев
Здравствуйте.
Можно, но только с помощью JavaScript.
Например, так:
$('.navbar-toggler').click(function () {
  if (!$(this).closest('.navbar').find('.navbar-collapse').hasClass('show')) {
    $(this).closest('.navbar').css('background-color', '#fffde7');
  } else {
    $(this).closest('.navbar').css('background-color', 'unset');
  }
});
Пример navbar с меняющимся цветом фона
Ekzot
Ekzot
Спасибо большое за ответ.
Анна
Анна
Здравствуйте, Александр! Мне необходимо реализовать двухуровневое выпадающее меню, как Вы указали. Пытаюсь использовать плагин «bootstrap-submenu», но пока безуспешно.
Не могли бы прокомментировать?
Возможно, я неверно его подключаю:
<head>
  ...
  <link rel="stylesheet" href="dist/css/bootstrap-submenu.css">
  <script src="dist/js/bootstrap-submenu.js" defer></script>
</head>
Файлы в соответствующих директориях.
Для вывода использую такую конструкцию (Joomla):
<nav class="navbar navbar-default" role="navigation" style=" margin: 0 auto; max-width: 1200px;">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <p class="top-name"><a class="navbar-brand" href="#"></a></p>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav" style="padding-top: 10px; font-size: 13px;">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">ПУНКТ 1<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Подпункт</a></li>
          <li class="dropdown-submenu"><a href="#" class="dropdown-toggle">ПОДПУНКТ<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">ЕЩЕ ПОДПУНКТ</a></li>
            </ul>
          </li>
          <li><a href="#">Еще что-то</a></li>
          <li class="divider"></li>
          <li><a href="#">И еще</a></li>
        </ul>
      </li>
  </div>
</nav>
В итоге меню все же схлопывается, стили не используются…
Ссылка на тестовый домен: _http://vianta5f.bget.ru/home-3/in-ektsionnaya-meditsina/biorevitalizatsiya-gialuronovoj-kislotoj-kozhi
Спасибо заранее!
Александр Мальцев
Александр Мальцев
Если Bootstrap 3 версии, то нужно в качестве bootstrap-submenu использовать 2 версию. Третья версия bootstrap-submenu предназначена для Bootstrap 4.
Используется bootstrap-submenu следующим образом.
1. Создание пункта меню с субменю:
...
<li class="dropdown-submenu">
  <a href="#">Ссылка 2.2</a>
  <ul class="dropdown-menu">
    <li><a href="#">Ссылка 2.2.1</a></li>
    <li><a href="#">Ссылка 2.2.2</a></li>
    <li><a href="#">Ссылка 2.2.3</a></li>
    <li><a href="#">Ссылка 2.2.4</a></li>
  </ul>
</li>
...
2. Поместить после меню и подключения «bootstrap-submenu.min.js» скрипт:
<script>
$('[data-toggle="dropdown"]').submenupicker();
</script>
Посмотреть пример Navbar с субменю можно в песочнице.
Анна
Анна
Спасибо большое за ответ!!!
Но все же такой вариант у меня не работает:
при подключении
<script>
$('[data-toggle="dropdown"]').submenupicker();
</script>
выдается ошибка Uncaught TypeError: $ is not a function
при оборачивании
<script src="/js/bootstrap-submenu.min.js"></script>

<script>

jQuery(document).ready(function($){

$('[data-toggle="dropdown"]').submenupicker();

});

</script>
ошибка пропадает, меню не схлопывается при клике, но и не открывается…
Извините, что отнимаю у Вас время!

P.S.
полный код меню:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="top-name"><a class="navbar-brand" href="#"></a></p>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ПУНКТ МЕНЮ<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Подпункт</a></li>
 <li class="dropdown-submenu"><a href="#">Еще подпункт<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Субменю</a></li>
</ul>
</li>
<li><a href="#">Еще что-то</a></li>
<li class="divider"></li>
<li><a href="#">И еще</a></li>
</ul>
</li>
</div>
</nav>
<script src="/js/bootstrap-submenu.min.js"></script>
<script>
jQuery(document).ready(function($){
$('[data-toggle="dropdown"]').submenupicker();
});
</script>
Александр Мальцев
Александр Мальцев
Необходимо убрать стили в «template.css» для «dropdown-menu». Они нарушают логику работы «bootstrap-submenu».
Например, если в браузере отключить эти стили, то всё начинает отображаться:
.dropdown .dropdown-menu {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .3s ease 0s;
}
Анна
Анна
Верно)) Спасибо БОЛЬШОЕ! Спасли нуба :))
Мария
Мария
Здравствуйте! При добавлении на страницу navbar в двух и более количествах, при нажатии на любой из них по кнопке в мобильном виде отображается последний добавленный navbar на страницу :(
Например: имеется navbar1 и navbar2, открыта мобильная версия. При нажатии на navbar1 выпадает список из navbar2, при нажатии на navbar2 — все тот же navbar2, так как последним был добавлен на страницу.
В чем может быть проблема?
Александр Мальцев
Александр Мальцев
Здравствуйте!
Кнопка «гамбургер» открывает то, на что указывает значение атрибута data-target:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
Вот блок, который она открывает #navbar-main (id, равно navbar-main):
<div class="collapse navbar-collapse" id="navbar-main">
Вам нужно в 1 меню в data-target, например, указать #navbar-main1 и блоку (его id), которое будет открываться соответственно navbar-main1.
Во втором меню в data-target, например, указать #navbar-main2 и блоку (его id), которое будет открываться соответственно navbar-main2.
Мария
Мария
Очень благодарю за ответ! Однако, не работает — очень долго ломаю голову. В качестве примера создала два практически одинаковых NavBar'а с разными id, отличие лишь в тексте содержимого. При нажатии на кнопку всё равно открывается последний добавленный.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button id="button_1" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent1">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">H <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">L</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
              <a class="dropdown-item" href="#">A</a>
              <a class="dropdown-item" href="#">A</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">S</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

    <!--     Второй Navbar     -->

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button id="button_2" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent2">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
Александр Мальцев
Александр Мальцев
Значит, всё равно какой-то момент упускаете.
Вот наглядный пример двух navbar в песочнице, посмотрите, всё просто. Первое меню – «navbar-1», второе – «navbar-2».
djdram
djdram
Добрый день может у кого есть пример
navbar при открытии на ПК на большом разрешении имеет горизонтальное меню в виде строки с кнопками
при открытии фронта на мобильном устройстве он превращается в Toggle navigation в виде одной кнопки с выпадающим вертикальным меню.
Вопрос как сделать так чтоб на мобильных устройствах с низким разрешением он не превращался в Toggle navigation а оставался также горизонтальным меню только убирал подписи к кнопкам оставляя допустим значки.

djdram
djdram

суть идеи примерно такая, использую 3 версию
Александр Мальцев
Александр Мальцев
Добрый! Для решения этой задачи кнопки можно поместить в элемент, который в свою очередь поместить в элемент с классом «navbar-header». Видимость этого элемента с кнопками настроить с помощью медиа запросов так, чтоб он показывался только на мобильных устройствах.
Раиса
Раиса
Здравствуйте! Подскажите новичку, пожалуйста! Скопировала Ваш самый первый кусочек кода со структурой
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
        </button>
    	<a class="navbar-brand" href="#">Brand</a>
    	<div class="collapse navbar-collapse" id="navbar-main">
    	</div>
    </div>
</nav>	
, и у меня это выглядит вот так:
pastenow.ru/430195dad66217b0b07463ecf34236f0
Почему?
Раиса
Раиса
Кажется, я поняла, в 4-м бутстрапе эти классы не работают? и что же делать?
Раиса
Раиса
Подключила еще 3-й, но лого справа, а кнопка слева. А нужно наоборот.
pastenow.ru/e4f0f393496954230164519d69a880a6
Александр Мальцев
Александр Мальцев
Использовать HTML структуру компонента Navbar, используемую в 4 версии:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    ...
  </div>
</nav>
Раиса
Раиса
Спасибо, пробую.
Архаил
Архаил
Добрый день, Александр. Подскажите пожалуйста. Добавил на сайт меню bootstrap-offcanvas ссылка на скрипт.
а при нажатии на поле поиска, меню исчезает, появляется клавиатура, можно как то решить задачу, чтобы при клике на поле поиска, меню не пряталось, а вот уже после нажатия на кнопку уходило в сторону(при использовании поиска). Благодарю.
Александр Мальцев
Александр Мальцев
Добрый! Не вижу смысла его дорабатывать, если интересно, то могу написать статью про то, как самостоятельно можно создать такое меню.
Архаил
Архаил
Было бы здорово ознакомиться с материалом по этой теме и научиться самому.
Александр Мальцев
Александр Мальцев
Можете пока посмотреть, как сделать offcanvas меню в этом примере.
Архаил
Архаил
Александр, благодарю!
Дмитрий
Дмитрий
А как сделать чтоб закрывалось по клику на свободной зоне, а не только на креcтик?
Александр Мальцев
Александр Мальцев
Это можно выполнить добавив на страницу следующий скрипт:
$(document).on('click', function (e) {
  if ($('body').hasClass('offcanvas-open')) {
    if (!$(e.target).closest('.navbar').length) {
      $('.offcanvas-collapse').removeClass('open');
      $('body').removeClass('offcanvas-open');
    }
  }
})
Zulya
Zulya
Здравствуйте! Если дочерний список ссылок очень большой и при раскрытии подпунктов, то меню получается очень длинным. А возможно разделить на несколько колонок этот длинный список ссылок?
Александр Мальцев
Александр Мальцев
Здравствуйте! Можно попробовать задать многоколоночный текст.
Например, для всех выпадающих списков или так как это вам нужно:
@media (min-width: 768px) {
  .navbar .nav .dropdown-menu {
    column-width: 200px; // оптимальная ширина колонки
    column-count: 3; // оптимальное количество колонок
    column-gap: 30px; // расстояние между колонками
  }
}
Zulya
Zulya
Здравствуйте! Что-то не получается. Если добавляю
position:relative;
, то 3 колонки появляются и само активное меню (родитель выпадающего меню) расширяется до размера 3 колонок. А без
position:relative;
ничего не происходит.
Александр Мальцев
Александр Мальцев
Так сложно гадать. Покажите пример на jsfiddle или на каком-нибудь другом подобном сервисе. Да и желающих помочь так будет больше…
serega
serega
Была похожая проблема, но с логотипом
serega
serega
Была похожая проблема, но с логотипом решил ее так
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
Данный пример брал от сюда http://q-answer.ru/questions/bootstrap-3-navbar-s-logotipom-8154.html
Вячеслав
Вячеслав
Добрый день, Александр. Классный у Вас сайт. Жаль, что не натолкнулся на него раньше. У меня такая ситуация: сделал сайт на шаблоне в MODX, на кнопку гамбургер обратил внимание только сейчас — она не работает. Делал меню через Wayfinder, помню что долго делал… Подумал — я накосячил. Проверяю шаблон — а там кнопка гамбургер тоже не работает. Значит косячный шаблон? Я новичок, сайт первый, нахватался по верхам. Не могли бы посмотреть в чем проблема? Где ошибку искать?
Шаблон сайта:https://www.gettemplate.com/demo/initio/
Сам сайт: www.dvkgroup.com.ua
И еще одну проблему заметил — на телефоне некоторые картинки вытягиваются.
Заранее спасибо.
Александр Мальцев
Александр Мальцев
Прочитайте внимательно раздел «Назначение атрибутов и классов (как работает схлопывание меню)». Вы пропустили атрибут у элемента с классом navbar-collapse.

Вячеслав
Вячеслав
Cпасибо, Александр. Глаз — алмаз профессионала.
Я попробовал пока на шаблоне. Там имелся такой код.
<div class="container-fluid">
				<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main" data-target="#bs-example-navbar-collapse-1"> 
				<span class="sr-only">Toggle navigation</span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> </button>
			</div>
			
			<div class="navbar-collapse collapse" id="navbar-main">
Я просто заменил
data-target="#bs-example-navbar-collapse-1"
на
data-target="#navbar-main"
как у Вас в примере.
И о чудо! Кнопка заработала! Но возникает естественный вопрос — на кой ляд там этот код
data-target="#bs-example-navbar-collapse-1"
?
Вячеслав
Вячеслав
Все работает! Спасибо Александр — Вы мне сэкономили кучу времени и нервов)
barsik
barsik
Александр, вы делаете крутой контент! Спасибо вам, за столь подробные и понятные статьи. Они дали большой толчок в моем развитии web! Я удивляюсь тому, что вы помогаете всем в комментариях на некоммерческой основе, хотя их проекты делают на этом деньги. Вы Человек с большой буквы! Но я бы ленился отвечать всем, на вопросы «не работает — помогите», чем больше человек сам приложит усилий, тем быстрее сам разовьется.
Александр Мальцев
Александр Мальцев
Спасибо, за отзыв!
Rexedead
Rexedead
Добрый день! А есть ли способ, что бы «гамбургер» нормально отображался при раскрытии, если у navbar выставлено свойство max-height: 35px;? Пример ненормального отображения: i.imgur.com/ovtZ71m.gifv

Если использовать свойство

/*button[aria-expanded=«true»] {
margin-top: -11px;
}*/

то во время анимации(сворачивания), все равно видно смещение

Александр Мальцев
Александр Мальцев
Добрый!
Необходимо просто для мобильной версии уменьшить размеры элементов, значения margin и padding. Например, вот так.
Rexedead
Rexedead
Большое спасибо!
Andrey
Andrey
Нужно сделать горизонтальное расположение элементов внутри navbar, то есть если сидеть с телефона, то расположение элементов будет такое же как на PC, но внутри navbar.
Как это сделать?
Александр Мальцев
Александр Мальцев
Как это должно выглядеть? Лучше картинку, как на PC и как на смартфоне.
Andrey
Andrey
Вид на PC: joxi.ru/Vrwl9aeFON6xkm.png
Вид на телефоне(то что зачёркнуто, должно быть как и на PC т.е горизонтально идти): joxi.ru/82Q5N34ijLBOv2.png
Александр Мальцев
Александр Мальцев
Написать стили, т.е. как эти элементы должны отображаться на мобильных устройствах.
Например, так (демо):
 /* CSS */
@media (max-width: 767.98px) {
  .nav.navbar-nav {
    display: flex;
  }
}
Алекс
Алекс
Здравствуйте, использую на сайте стандартное дефолтное меню bootstrap, все работает и при уменьшении экрана меню скрывается и появляется кнопка. Для выпадающего меню заданы в своем файле css стили. Но проблема заключается в том, что при клике на кнопку .navbar-toggle на секунду появляются дефолтные стили bootstrap, а только затем переназначенные в своем файле css. Можно ли как-то убрать подгрузку дефолтных стилей без правки файла bootstrap.min.css.

Шаг 2 появляется на секунду-полторы секунды, но это просто смотрится очень не эстетично.
Александр Мальцев
Александр Мальцев
Здравствуйте! Скорее всего, установлена анимация при применении CSS свойств, поэтому они и не назначаются сразу. Для того чтобы разобраться из-за чего конкретно, необходимо представить «живой» пример, а не картинку.
Алекс
Алекс
Здравствуйте, а можно как-то отправить ссылку на живой пример, без афиширования в личку (просьба руководителя). Просто уже не в первый раз встречаю такое запаздывание, а решить вопрос не получилось
Ivan
Ivan
Здравствуйте Александр, пересмотрел все комментарии и не нашел ответа на свой вопрос. У меня такая проблема, я сделал 2 меню.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" data-dismiss="#bs-example-navbar-collapse-2">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

		   <button type="button" style="height: 34px;" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
            <span class="sr-only">Toggle navigation</span>
            <span><img src="http://narinyan.ru/wp-content/uploads/2015/09/location-icon-map-png-93d693c9-2482-44c1-9073-d95246ce6de3_iconmonstr-location-16-icon-300x300.png" style="width: 25px; margin-top: -5px;"></span>
          </button>
И сделал 2

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li class="divider"></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li class="divider"></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li class="divider"></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li class="divider"></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
</div>

Проблема в том, что если открыть сначала одну вкладку меню, а потом другую, то первая не пропадает. Хотелось бы чтобы когда нажал первую она была активна, а если нажал вторую, то первая закрывается. Можно решить эту проблему? Заранее спасибо!
Александр Мальцев
Александр Мальцев
Это должно работать по умолчанию. Пример: jsfiddle.net/itchief/u2uxff7z/
Андрей
Андрей
Подскажите пожалуйста, есть бутстрап меню с несколькими уровнями, как сделать чтобы первый уровень который выпадает при наведении был открыт по умолчанию.
Андрей
Андрей
Или просто подскажите может есть какой то способ чтобы оно было по умолчанию открытым.
Александр Мальцев
Александр Мальцев
Это зависит от того какое это меню. В стандартном меню Bootstrap это осуществляется посредством добавления класса open:
...
<li class="dropdown open">
...
Andrey
Andrey
Уважаемый Александр, помогите пожалуйста начинающему.Как сделать что бы меню в bootstrap в мобильной версии закрывалось при клике на пункте из меню? Заранее благодарю, Андрей.
У меня меню выглядит так:
<div class="main-nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <h1><img class="img-responsive" src="logo.jpg" alt="logo"></h1>
          </a>                    
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">                 
            <li class="scroll active"><a href="#home-slider">Пункт1</a></li>
            <li class="scroll"><a href="#services">Пункт2</a></li> 
            <li class="scroll"><a href="#portfolio">Пункт3</a></li>
            <li class="scroll"><a href="#about-us">Пункт4</a></li>
            <li class="scroll"><a href="#team">Пункт5</a></li>
            <li class="scroll"><a href="#contact">Пункт6</a></li>       
          </ul>
        </div>
      </div>
    </div>
Александр Мальцев
Александр Мальцев
В статье приведено решение. Это осуществляется посредством добавления JavaScript на страницу:
$(function(){
  $(".navbar-collapse a").click(function() {
    if (!$(this).hasClass("dropdown-toggle")) {
      $(".navbar-collapse").collapse('hide');
    }
  });
});
Andrey
Andrey
Уважаемый Александр, спасибо большое.Но меню не закрывается.Вот мои скрипты, заранее благодарю.
<script type="text/javascript" src="/assets/house/js/jquery.js"></script>
  <script type="text/javascript" src="/assets/house/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true(30 minutes)"></script>
  <script type="text/javascript" src="/assets/house/js/jquery.inview.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/wow.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/mousescroll.js"></script>
  <script type="text/javascript" src="/assets/house/js/smoothscroll.js"></script>
  <script type="text/javascript" src="/assets/house/js/jquery.countTo.js"></script>
  <script type="text/javascript" src="/assets/house/js/lightbox.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/main.js"></script>
  
  <script src="/assets/house/js/jjj/owl.carousel.min.js"></script>  
  <script src="/assets/house/js/jjj/jquery.parallax-1.1.3.js"></script>
  <script src="/assets/house/js/jjj/jquery.nicescroll.min.js"></script>
  <script src="/assets/house/js/jjj/jquery.appear.js"></script>
  <script src="/assets/house/js/jjj/jquery.nav.js"></script>
  <script src="/assets/house/js/jjj/jquery.sticky.js"></script>  
  <script src="/assets/house/js/jjj/jquery.fitvids.js"></script>
  <script src="/assets/house/js/jjj/custom.js"></script>   
  <script>
      $(function(){
  $(".navbar-collapse a").click(function() {
    if (!$(this).hasClass("dropdown-toggle")) {
      $(".navbar-collapse").collapse('hide');
    }
  });
});
  </script> 
Александр Мальцев
Александр Мальцев
Необходимо проверять на чистой сборке: jsfiddle.net/itchief/Luft0e2c/
В вашем случае необходимо определить скрипт, который предотвращает это действие.
Максим Хализов
Максим Хализов
Доброго дня, подскажите пожалуйста, как сделать в мобильном меню, чтобы при нажатии на какой-то пункт меню, все пункты скрывались и появлялись новые, допустим при клике на «категории» скрылись все пункты и появились пункты «категория 1» «категория 2» и тд, а так же в качестве первого пункта появилась стрелка которая при клике возвращает назад
Александр Мальцев
Александр Мальцев
Добрый день!
Пример как это можно сделать: jsfiddle.net/itchief/qvyacs2r/
sasha
sasha
Добрый день. Подскажите как разместить navbar как у вас в примере itchief.ru/assets/examples/examples.php?id=3
контент->navbar-> контент
тоесть не в самом верху страницы, а скажем через 200px
Спасибо
Александр Мальцев
Александр Мальцев
Добрый день.
Тут будет так как вы написали:
<div class="container">
    Контент до navbar...
<div>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        Контент меню (раздел navbar-header и содержимое navbar-collapse)...
    </div>
</nav>
<div class="container">
    Контент после navbar...
<div>
Ellis
Ellis
Здравствуйте, Александр. Спасибо за Ваш труд!
Осваиваю Bootstrap. Задача следующая. Необходимо сделать прозрачное горизонтальное меню над каруселью. Карусель должна занимать весь экран. Возможно ли это сделать с помощью классов Bootstrap? Буду благодарна за любые советы.
Александр Мальцев
Александр Мальцев
Добрый день!
Просто добавьте в CSS следующее:
.navbar {
    background: rgba(255, 255, 255, 0.8);
}
Значение 0.8 определяет степень прозрачности.
Анна
Анна
Здравствуйте! Начинаю осваивать Bootstrap и уже столкнулась с проблемой: хочу написать свою тему для WP. Создала 3 файла: index.php, header.php и style.css. Файл со стилями пуст, в index.php содержится следующая строка:
<?php get_header(); ?> 
, а в header.php горизонтальное меню с кодом одного из примеров Вашего ресурса, а именно:
<!-- Классы navbar и navbar-default (базовые классы меню) -->
<nav class="navbar navbar-default">
  <!-- Контейнер (определяет ширину Navbar) -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Бренд или название сайта (отображается в левой части меню) -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->
    </div>
  </div>
</nav>
В body больше ничего нет.
Все казалось понятно и просто, но неизвестно откуда взялся отступ сверху. Далее, я пытаюсь сделать фиксированное меню при прокрутке. Добавляю к nav класс «navbar-static-top» и стили «position: -webkit-sticky; position: sticky; top: 0;». Однако у меня получилось то, чего я никак не ожидала.
Вопрос: откуда взялся этот отступ? Как его убрать? Почему у меню сверху пропала граница?
Пожалуйста, помогите.
P.S. Прикрепляю скрин. itchief.ru/assets/uploadify/1/7/d/17dbeffcf7ed2a7a037bb60afa4e53cf.jpg
Александр Мальцев
Александр Мальцев
Не знаю, из-за чего у вас могут быть отступы.
Попробуйте добавить в CSS:
body {
  margin: 0 !important;
  padding: 0 !important;
}

Класс navbar-static-top не делает ничего кардинального, он только изменяет некоторое оформление горизонтального меню Navbar (убирает закругления углов, некоторые границы и т.д.). Из-за него у вас и пропала сверху граница.
Не представляю, как можно сделать фиксированное горизонтальное меню с помощью position:sticky. Он предназначен для фиксирования элемента при прокрутке только в рамках некоторого элемента и то только при условии, что в нём есть свободное вертикальное пространство.
Для создания основного горизонтального фиксированного меню, необходимо использовать position: fixed.
Борис
Борис
Доброе утро, Александр. ctrl+f не помог. Прежде всего хочу поблагодарить за отличный материал и за обратную связь. Никак не могу в стандартном меню (navbar-inverse) выравнять по центру ul на десктопе. Хотелось бы флексом, но уже хоть как-нибудь. Не пойму что и куда двигать. Сместил ul процентами, так на мобилке боковой скролл появился. В общем только на Вас надежда)
Александр Мальцев
Александр Мальцев
Здравствуйте.
Один из вариантов — это использовать абсолютное позиционирование. Для этого необходимо создать дополнительный блок div, например c классом nav-center, и задать ему абсолютное положение внутри nav. А также изменить элемент ul, а именно задать ему CSS-свойство display со значением inline-block и отменить float.
CSS:
@media screen and (min-width: 768px) {
  .nav-center {
    position: absolute;
    left: 120px;
    right: 120px;
    top: 0;
    height: 50px;
    text-align: center;
  }
  .nav-center .navbar-nav {
    display: inline-block;
    float: none;
  }
}
HTML:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="nav">
	  <div class="nav-center">
		  <ul class="nav navbar-nav">
			<li class="active"><a href="#">Ссылка 1<span class="sr-only">(текущая)</span></a></li>
			<li><a href="#">Ссылка 2</a></li>
            <!--...-->
		  </ul>
	  </div>
    </div>
  </div>
</nav>
Мария Грас
Мария Грас
Александр, здравствуйте! Большое спасибо вам за удобный и полезный сайт. :)

У меня следующая проблема: нужно выровнять логотип и горизонтальное меню так, чтобы они были на одном уровне. Логотип все время уезжает вниз, никакие изменения в основном файле CSS на него не действуют.

Скриншот: _http://i93.fastpic.ru/big/2017/0725/5b/7cb274bae1a198f26076b9db42d6a65b.jpg

Сайт:

HTML:
 <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".main-navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   
                        <a href="index.html" class="navbar-brand"><img src="http://uber-help.info/wp-content/uploads/2017/07/logo_5.png"></a>
    </div>
CSS:

.navbar-brand {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 0px;
    margin-left: 0;
    position: relative;
    text-shadow: none;

.navbar-brand img {
    position: relative;
    top: 0px;
    margin-right: 4px;
    left: 0px;
    vertical-align: middle;
    max-height: 100%;
Заранее огромное спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте. Для корректного отображения меню необходимо:
1. Установить ему необходимую высоту, если же оно, конечно же, не равно 50px.
2. Рассчитать необходимые padding и установить их.
3. Откорректировать логотип (задать ему высоту кратную 2). Т.е., например, не 49px, а 50.

Как рассчитать отступы и их установить приведено в разделе этой статьи «Изменение высоты Navbar».
Мария Грас
Мария Грас
спасибо, буду пробовать :)
Александр Мальцев
Александр Мальцев
Пробуйте. Можно конечно изменить и с помощью абсолютного позиционирования, но это будет не очень хорошее решение.
Den
Den
Здравствуйте, подскажите пожалуйста, хочу сделать меню немного больше по высоте, но текст содержимого все равно остается сверху блока, как сделать так чтоб он прижался к низу? Нашел в интернете такое решение, но при его использовании ломается вся адаптивность:
.container{
position:relative;
}
.container>.navbar-collapse{
position: absolute;
left: 130px;
top: 40px;
}
Александр Мальцев
Александр Мальцев
Попробуйте воспользоваться инструкцией, приведённой в статье в разделе «Изменение высоты Navbar».
Максим Хализов
Максим Хализов
Добрый день
Подскажите пожалуйста как сделать кнопку «вернуться на главную» в меню вместо toogle кнопки. Саму кнопку разместить у меня получилось, но выравнять кнопку по правому краю не получается ни как, pull-right не срабатывает, navbar-right тоже не помогает( Хочется чтобы кнопка была при любом разрешении экрана была прижата к правому краю меню, мне мобильное меню не нужно на этой странице. Я бы сделал это меню на обычном html и css, но сейчас уже пошел на принцип чтобы сделать на bootstrap, эту казалось бы простую задачу, опыт такой пригодился бы в будущем) Код выглядит сейчас так:
<header class="header">
                <div class="navbar navbar-default navbar-static-top">
                    <div class="container">
                        <div class="navbar-header">
                            <a href="/" class="navbar-brand">VAPE-DECK.ru</a>
                            <div class="navbar-btn navbar-right">
                                <a href="/" class="btn btn-success"><i class="fa fa-arrow-left" aria-hidden="true"></i> Вернуться на главную</a>
                            </div>
                        </div>
                    </div>
               </div>
            </header>
Александр Мальцев
Александр Мальцев
Добрый!
1. Необходимо отменить, чтобы элемент с navbar-header был плавающим.
2. Использовать вместо navbar-right класс pull-right. Это необходимо сделать для того чтобы элемент выравнивался по правому краю вне зависимости от разрешения.
<header class="header">
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header" style="float:none;">
                <a href="/" class="navbar-brand">VAPE-DECK.ru</a>
                <div class="navbar-btn pull-right pull-padding">
                    <a href="/" class="btn btn-success"><i class="fa fa-arrow-left" aria-hidden="true"></i> Вернуться на главную</a>
                </div>
            </div>
        </div>
    </div>
</header>
Дополнительно необходимо добавить ещё отступ для кнопки на маленьких экранах:
@media (max-width: 767px) {
  .pull-padding {
    padding-right: 15px;
  }
}
djut
djut
Подскажите почему при адаптации сайта под мобильные устройства (RWD Tester в Chrome) размер меню больше на 20 пикселей (при разрешении экрана 375на667 меню имеет ширину 395px, в то время как body 375px). При этом на ноутбуке все в порядке — при разрешении 1366на768 меню имеет ширину как у body.
разметка:
<nav class="navbar navbar-custom navbar-fixed-top">
        <!-- Контейнер (определяет ширину Navbar) -->
        <div class="container-fluid">
            <!-- Заголовок -->
            <div class="navbar-header">
                <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- Бренд или название сайта (отображается в левой части меню) -->
                <a class="navbar-brand" href="#">Startup</a>
            </div>
            
            <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
            <div class="collapse navbar-collapse" id="navbar-main">
                <!-- Содержимое основной части -->
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Works</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Contact</a></li>                                        
                </ul>
            </div>
        </div>
    </nav>
стили .less:
.navbar-custom {
    .navbar-toggle {
        border-color: #fff;
        &:hover, &:focus {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
    .icon-bar {
        background-color: #fff;
    }
    .navbar-brand {
        padding-left: 30px;
        .mon_bld;
        font-size: 24px;
        color: #fff;
    }
    .navbar-nav {
        float: right;
    }
    .nav {
        a {
            .mon_rg;
            font-size: 14px;
            color: #fff;
            &:hover {
                background-color: #fff;
                color: #c0301c;
            }
        }
    }
}
Александр Мальцев
Александр Мальцев
Тут какие-то другие стили влияние оказывают. Наиболее просто в этом разобраться с помощью инструмента браузера «Инспектор элементов».
djut
djut
То есть влияние оказывают стили Bootstrap? Так как все свои стили, примененные к меню я выложил здесь
Александр Мальцев
Александр Мальцев
Если у вас не получается разобраться в этом самостоятельно, то необходимо собрать эту ситуацию, например, на jsfiddle.net. В этом случае можно будет посмотреть, из-за чего это возникло, и, подсказать вам решение. В противном случае можно только гадать…
Kir
Kir
А как сделать форму поиска в nav на всю ширину? Пробую да всё никак не получается.
Александр Мальцев
Александр Мальцев
Так просто это сделать нельзя.
Тут либо использовать абсолютное позиционирование (необходимо просчитать все размеры) или js-код.
Константин
Константин
Александр, добрый день.
Помогите с проблемой, пожалуйста. При нажатии левой кнопки мыши не срабатывает ссылка 1-го уровня меню (правой, в новом окне и т.д. открывается). Со ссылками 2-го уровня все в порядке.
Спасибо.
Александр Мальцев
Александр Мальцев
Воспользуйся следующим скриптиком (добавлен в раздел «Открытие dropdown меню при наведении»).
Константин
Константин
Александр, вы гений! Спасибо!
AndreyAprel
AndreyAprel
Подскажите, пожалуйста, какой js нужно поставить, чтобы navbar закрывался после нажатия на меню (_http://egemon.medialevel.ru/)?
itchief.ru/assets/uploadify/b/e/f/bef9bd20ec6581e6f6005e4b20a70755.jpg
Александр Мальцев
Александр Мальцев
Попробуйте, может поможет вам это решение: itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-2638
Александр
Александр
Александр, приветствую.
А возможно как-то перенаправить выпадающий блок вверх?
(в продолжение использования Аффикс).

То есть задача, следующая:
1. если панелька внизу экрана/не прикрепленная кверху — то выпадающий блок меню должен открываться вверх.
2. если панелька вверху экрана/прикрепленная — то выпадающий блок меню должен открываться вниз.
Александр
Александр
С этим разобрался, методом проб.
Александр, подскажите, а можно сделать так, чтобы выпадающие меню открывались при наведении мыши а не при клике?
Александр Мальцев
Александр Мальцев
Скачать плагин bootstrap-hover-dropdown.
Подключить его к странице:
<script src="js/bootstrap-hover-dropdown.min.js"></script>
Добавить дополнительные атрибуты data-hover и data-close-others ко всем ссылкам меню, имеющим атрибут data-toggle со значением dropdown:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
Готовый пример: yadi.sk/d/h5pbm3L53HMUnK
Александр
Александр
Благодарю.
Сергей
Сергей
Добрый день. Подскажите, имеется 3-х уровневое выпадающее меню. При выпадении первого уровня и отведении мышки от меню оно само не схлопывается (ОК). А вот при отведении мышки от 3-го уровня меню оно схлопывается и остается только второй уровень открытым. Не подскажите, какой класс отвечает за то, что бы и 3-й не схлопывался?
<div class="collapse navbar-collapse" id="mainMenu">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Модельный ряд<span class="glyphicon glyphicon-menu-down"></span></a>
      <ul class="dropdown-menu subbed">
        <li>
          <a href="#">Кроссоверы</a>
          <ul class="list-inline text-uppercase sub-menu">
            <li><a href="#"><figure><img src="..." alt="..."><figcaption>All cars</figcaption></figure></a></li>
            ...
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
Должно оставаться так (_http://prntscr.com/et76n5), а остается так (http://prntscr.com/et7fuh).
Александр Мальцев
Александр Мальцев
В Bootstrap 3 по умолчанию нет 3 уровневого меню. Поэтому назначение классов, которые вы используете для реализации 3-его уровня, можете знать только вы.
Для создания трёхуровневого меню navbar можете воспользоваться хорошим плагином Bootstrap-submenu.
Stacy
Stacy
Подскажите пожалуйста. Как сделать так чтобы меню, при адаптации выезжало с право?
Александр Мальцев
Александр Мальцев
Bootstrap Navbar не имеет таких настроек, с помощью которых можно было это настроить.
Чтобы это создать придётся добавлять много CSS и JavaScript кода. Пример, как это сделать, можно посмотреть на jsfiddle.
Ещё вариант — это использовать расширение Jasny Bootstrap.
Stacy
Stacy
Спасибо огромное! Лучший сайт! ;)
Max
Max
Здравствуйте, Алексей. Помогите плз, допилить 3х уровневое меню на bootstrap. Имеется следующий код:
HTML
<div class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
CSS:
.navbar-toggle:hover {
  top:0;
  left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
}
Мне необходимо, чтобы меню открывалось при наведении курсора на кнопку. То есть чтобы список вываливался не при клике на кнопку «drop down», а при наведении на кнопку. В последующем эта кнопка будет заменена на ссылку.
Александр Мальцев
Александр Мальцев
Для этой задачи уже есть готовый компонент. Посмотрите в этом комментарии:
itchief.ru/lessons/bootstrap-3/bootstrap-3-custom-navigation-menu#comment-2832
Сергей
Сергей
Добрый день, Александр. Большое спасибо за ресурс! Подскажите пожалуйста: navbar-fixed-top, cms drupal, с body понятно, но под navbar уходит и админ панель, как ее оттуда вытащить? Заранее спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте. Необходимо сдвинуть либо navbar, либо панель администратора.
Например, можно сделать так:
<style>
body {
  padding-top: 170px;
}
.navbar-fixed-top {
  top: 100px;
}
</style>
Тимофей
Тимофей
Добрый день, как сделать, что бы меню открывалось не вниз, а на верх?
Александр Мальцев
Александр Мальцев
Воспользуйся этим комментарием: itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-3457
Alex-RNS
Alex-RNS
Шеф, помоги! Есть выпадающий список, который при помощи
@media (min-width: 767px){
.dropdown:hover  .dropdown-menu {
		margin: 0;
		display: block;
}
}
сделал выпадающим при наведении, но само выпадающее меню неактивно. Нужно кликнуть по родителю, чтоб были активны дети.
Александр Мальцев
Александр Мальцев
Попробуй вместо CSS-стилей использовать JavaScript-код:
$(function() {
  $('ul.nav li.dropdown').hover(
    function(){ 
	  if (window.matchMedia('(min-width:768px)').matches) {		
        $(this).addClass('open');
	  }
	},
    function(){ 
      if (window.matchMedia('(min-width:768px)').matches) {
        $(this).removeClass('open');
      }
    }
  );	
});
Arhan
Arhan
Помогите, пожалуйста, с навигацией на сайте.
1. Сделал чанк Navbar
2. Закинул в него pdoMenu со следующим кодом:
<!-- Меню -->
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header">
        [[pdoMenu? 
            &level=`2` 
            &parents=`0`
            &outerClass=`nav navbar-nav navbar-right`
            &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
            &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
            &tplParentRow=`@INLINE 
            <li [[+classes]]>
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="[[+link]]" [[+attributes]]>
                    [[+menutitle]]<span class="caret"></span>
                </a>
                [[+wrapper]]
            </li>`
        ]]
        </div>
    </div>
</nav>
3. Закинул чанк в шаблон
, но не все меню работает правильно т.е. меню без категорий работает нормально, но при нажатии на категорию или вложеное в ней меню (со второго клика) сайт начинает падать, отображаться не правильно: картинки не отображаются, не придерживается стилей как-будто их нет вовсе, любой клик на пункт меню перекидывает на главную страницу, но нажав на лого или пункт главная приводит сайт в порядок.
Может кто сталкивался или знает где ошибка?
Александр Мальцев
Александр Мальцев
Проверьте, правильно ли у вас подключён на главной и других страницах сайта фреймворк Bootstrap. А также обследуйте, каким образом у вас осуществляется построение меню на всех страницах сайта, а не только на главной. Ну и проверьте базовые составляющие страницы (HTML, CSS, JavaScript).
Arhan
Arhan
Вот так я подключаю css (чанк Head):
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>[[*pagetitle]]</title>

    <!-- Bootstrap -->    
	<!--<link href="/assets/template/css/bootstrap.css" rel="stylesheet">-->
    <link href="/assets/template/css/bootstrap.min.css" rel="stylesheet">
    <!--<link href="/assets/template/css/bootstrap-theme.css" rel="stylesheet">-->
    <link href="/assets/template/css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="/assets/template/css/style.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
так я подключаю js-скрипты (чанк Footer-script):
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

	<!--<script src="../assets/template/js/bootstrap.js"></script>-->
    <script src="../assets/template/js/bootstrap.min.js"></script>
    <script src="../assets/template/js/npm.js"></script>
    <script src="../assets/template/js/jquery-3.1.1.min.js"></script>
    
    <!-- Скрипт для чанка FeelBack (обратная связь) -->
    <!--<script src="assets/template/js/FeelBackMessage.js"></script>-->
Меню строю так (чанк Navbar):
<!-- Меню -->
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header navbar-right">
        [[pdoMenu? 
            &level=`2` 
            &parents=`0`
            &outerClass=`nav navbar-nav`
            &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
            &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
            &tplParentRow=`@INLINE 
                <li [[+classes]]>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>
                        [[+menutitle]]<span class="caret"></span>
                    </a>
                    [[+wrapper]]
                </li>`
        ]]
        </div>
    </div>
</nav>
Шаблон Главной страницы:
<!DOCTYPE html>
<html lang="en">
    
    [[$Head?]]
    
  <body>
      
    <div class="jumbotron">
    <!-- Шапка (Header) -->
    [[$Header?]]
    
    <!-- Меню -->
    [[$Navbar?]]
    
    <!-- Слайдер -->
    [[$Slider?]]

    </div>

    <!-- Thumbnails -->
    [[$Thumbnails?]]

    
    
    
    <!-- Наполнение (Содержимое) -->
    <div class="container">
    [[*content]]
    </div>
    
    <!-- Подвал (Footer) -->
    [[$Footer?]]
    
    <!-- Скрипты -->
    [[$Footer-script?]]
  </body>
</html>
Основной шаблон (для других страниц):
<!DOCTYPE html>
<html lang="en">
    [[$Head?]]
  <body>
    <div class="jumbotron">
        <!-- Шапка (Header) -->
        [[$Header?]]
        
        <!-- Меню -->
        [[$Navbar?]]
    </div>
    
    <!-- Крошки -->
        [[$Crumbs?]]
        
    <!-- Наполнение (Содержимое) -->
    <div class="container">
        <h3>[[*longtitle]]</h3>
        [[*content]]
    </div>
    
    <!-- Подвал (Footer) -->
    [[$Footer?]]
    
    <!-- Скрипты -->
    [[$Footer-script?]]
  </body>
</html>
Было начал грешить на бесплатный хостинг — beget.
Подскажите, пожалуйста, где ошибка? И как Вы код, на форуме, делаете цветным?
Спасибо.
Arhan
Arhan
Могу ссылку на сайт открыть, а то появилось большое желание перейти на другой движек (сроки поджимают)
Александр Мальцев
Александр Мальцев
Здравствуйте. Что-то не заметил у вас тега base в разделе head?
<base href="[[++site_url]]">
После указания этого тега пути к файлам будут рассчитываться уже относительно корня сайта. Указания путей к файлам осуществляйте следующим образом:
<link href="[[++assets_url]]template/css/bootstrap.min.css" rel="stylesheet">
<script src="[[++assets_url]]template/js/bootstrap.min.js"></script>
Александр Мальцев
Александр Мальцев
Перед тем как что-то делать на движке MODX Revolution, надо с ним хотя бы немножко разобраться. Если вышеприведённый комментарий не сможете выполнить, то пришлите коды на сайт, помогу исправить вашу проблему…
Александр Мальцев
Александр Мальцев
Оформление кода (раскраску) можно выполнить с помощью скрипта prettyprint. Чтобы он автоматически выставлялся в комментариях необходимо воспользоваться настройками Jevix. Для этого необходимо перейти в раздел админки «Наборы параметров», выбрать соответствующий набор и отредактировать в нём параметр cfgSetAutoReplace. Например, так:
[["±","©","©","®","©","©","®","<code","code>"],["±","©","©","®","©","©","®","<pre class=\"prettyprint\"","pre>"]]
Arhan
Arhan
Спасибо Вам большое. Вы очень помогли. Сайт зафункционировал правильно. Спасибо.
Arhan
Arhan
Это Вы про modx или на Вашем сайте?
Александр Мальцев
Александр Мальцев
Это про MODX и дополнение Tickets, которое использует Jevix.
Александр Мальцев
Александр Мальцев
Если на сайте, то код необходимо обернуть в конструкцию:
<pre class="prettyprint">
</pre>
На сайте некоторое время назад, любой фрагмент кода получал автоматическую расцветку. Т.е. код, помещённый в элемент code, превращался в вышеприведённую конструкцию. Это конечно хорошо, но если кусков кода на странице много, то это увеличивает время необходимое на отображение этой страницы в браузере. Т.е. открытие страницы сильно нагружает процессор пользователя, т.к. ему приходится отформатировать различными цветами большие куски кода. Поэтому в последнее время на сайте этого не происходит. Но если вы хотите это сделать, то оберните код не в элемент code, а в pre с классом prettyprint.
Виталий
Виталий
Александр, добрый день. Можете помочь подключить navbar(версия bootstrap 4) к instantcms 2.6.1? Как-то там непонятно меню устроено…
Думаю это многим полезно будет.
С меня пиво на любой кошелек.
Спасибо.
Александр Мальцев
Александр Мальцев
Здравствуйте, с instantcms не знаком. Извините, не смогу вам помочь.
Валерий
Валерий
Александр, добрый день! Подскажите, пжлста, как к пункту подменю добавить пункт под-подменю. Пробовал по такой же схеме, как для меню-подменю, так не раскрывается и схлопывается.
Александр Мальцев
Александр Мальцев
Код для такого подменю можно взять из Bootstrap 2.
Элемент li необходимо расположить в ul с классом dropdown-menu:
<li class="dropdown-submenu">
  <a tabindex="-1" href="#">Наведи на меня...</a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт под-подменю 1...</a></li>
    <li><a href="#">Пункт под-подменю 2...</a></li>
    <li><a href="#">Пункт под-подменю 3...</a></li>
  </ul>
</li>
В CSS добавить следующие стили:
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}
.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
Валерий
Валерий
Александр, огромное спасибо: и за оперативный ответ, и за реальную помощь. На вашем сайте недавно, но уже успел оценить его.
Аноним
Аноним
Здравствуйте, Александр, подскажите пжлста с вопросом:
— bootstrap 3
— в одной строке «навигационное меню» по сайту и меню «входа/регистрации»
Вопрос — есть ли возможность схлопывания меню в кнопку (с выпадающим вертикальным меню) при разных разрешениях экрана. Т.е. чтобы меню входа/регистрации схлопывалось при разрешении 992px, а основное меню схлопывалось в кнопку при разрешении 768px?
Заранее спасибо за ответ
Александр Мальцев
Александр Мальцев
С помощью медиа запросов. Основное меню и так будет схлопываться при разрешении 768px. А вот для регистрации необходимо будет создать два состояния меню. Одно будет видно при разрешения больше 992px, а другое когда данная ширина меньше.
Аноним
Аноним
Это получается для меню регистрации необходимо отдельные классы создавать, копировать CSS отвечающий за схлопывание при 768px, переписывать в этом CSS классы для регистрации и выставлять значение схлопывания 992px?
Александр Мальцев
Александр Мальцев
Не знаю как там у Вас.
Можно например сделать так:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- ... -->
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- Основное меню --> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <!-- Пункты 1 и 2 (будут отображаться на всех устройствах, кроме sm) -->
        <li class="hidden-sm"><a href="#">Пункт 1</a></li>
        <li class="hidden-sm"><a href="#">Пункт 2</a></li>
        <!-- Эти пункты на sm будут схлопываться -->
        <li class="dropdown hidden-xs hidden-md hidden-lg">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-menu-hamburger"></i></a>
          <ul class="dropdown-menu">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
Аноним
Аноним
Ребята помогите с проблемой, когда меню схлопывается(для маленьких экранов) и появляется кнопка для раскрытия меню, у меня на сайте есть слайдер и вот когда меню открывается оно проходит под слайдером, вместо того что бы его сдвигать вниз?
Александр Мальцев
Александр Мальцев
Настройка положения элементов по оси Z осуществляется с помощью CSS свойства z-index.
Вам необходимо сделать что-то подобное этому:
.navbar .nav > li {
  z-index: 10001;
}
Аноним
Аноним
Впервые пробую работать с bootstrap, скачал готовый шаблон, в котором идет переход по якорям
<li><a href="#top">Главная</a></li>
и тд. Но если поставить в ссылку
<li><a href="index.html#top">Главная</a></li>
, то при клике мышкой перехода не будет, подскажите как разрешить переход?
Александр Мальцев
Александр Мальцев
Переход будет на страницу (если не используется тег base), которая расположена в этом же разделе, но имеет имя index.html. При этом после перехода на эту страницу (index.html) браузер прокрутит её до элемента имеющего идентификатор top. Если у Вас этой страницы нет, то получите ошибку 404.
Т.е. допустим сейчас открыта страница:
https://itchief.ru/bootstrap/navbar-v3
Если сейчас я в ней размещу ссылку:
<a href="index.html#top">Главная</a>
То при нажатию на неё я перейду на страницу index.html, расположенную в этом разделе:
https://itchief.ru/bootstrap/index.html#top
Если Вы хотите чтобы относительные ссылки шли от корня, то используйте элемент base:
<base href="https://itchief.ru/">
После этого эта ссылка будет ввести на страницу, расположенную в корневом разделе.

Кроме использования относительных ссылок, можно использовать абсолютные (т.е. от корня сайта). Начинаются они со слэша (/).
<a href="/index.html#top">Главная</a>
Аноним
Аноним
такой метод пробовал, элемент base в обще не получилось применить.
а вот
<a href="http://мойсайт/index.html">Главная</a>
так же как и
<a href="/index.html">Главная</a>
при наведении мышкой показывает ссылку, если нажать правой мышкой и в контекстном меню выбрать открыть в новом окне то откроется главная, а если нажать левый мышкой то ничего не происходит, левой мышкой работают только якоря.
Аноним
Аноним
вот сам шаблон, если конечно есть время с этим помочь разобраться.
Аноним
Аноним
спасибо за ответы, разобрался, дело было Single Page Nav Plugin JS.
Аноним
Аноним
Здравствуйте! У меня в мобильной версии когда кликаю на пункт меню, не раскрывается подменю. А если на обычном разрешении, то все работает нормально. Подскажите в чем проблема?
Александр Мальцев
Александр Мальцев
Здравствуйте! За раскрытие пункта подменю отвечает плагин Bootstrap Dropdowns и соответствующие стили. Если Вы используете полную версию Bootstrap, и данные плагины и стили включены в файлы bootstrap.js и boostrap.css, то необходимо проверить не оказывает ли на работу влияние сторонние стили или скрипты. Попробуйте отключить всё кроме Bootstrap и библиотеки jQuery, и проверить.
Аноним
Аноним
привет! а есть отдельный .css для этого меню? выложи плиз))
Александр Мальцев
Александр Мальцев
Вот сборка состоящая из одного компонента navbar:
getbootstrap.com/customize/?id=e4ae3166f551d396cc928acf43d4d66a

В конце страницы нажми на кнопку «Compile and Download». В архиве будут 2 файла (bootstrap.css и bootstrap.js). Их необходимо подключить к странице.
Аноним
Аноним
И вопрос туда же. Хочу сделать иконку большего размера, но меню при этом растягивается по высоте, остальные пункты меню смещаются относительно пункта с иконкой. Как это можно исправить, не увеличивая текущей высоты navbar, и выравнять остальные пункты?
Александр Мальцев
Александр Мальцев
Например, иконку размером 30px:
.menu-item-14 a {
  height: 50px !important;
  line-height: 50px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
} 
.menu-item-14 a:before {
  font-family: FontAwesome;
  content: "\f0ac";
  padding-right: 7px;
  font-weight: normal;
  font-size: 30px;
  vertical-align: middle;
}
Аноним
Аноним
Здравствуйте Александр. Помогите пожалуйста разобраться с иконками в меню. Есть пункт с выпадающим списком, ему задаю иконку, но она наследуется всеми вложенными подпунктами. Как сделать иконку только для текущего пункта?
.menu-item-14 a:before {
    font-family: FontAwesome;
    content: "\f0ac";
    padding-right: 7px;
    font-weight: normal;
}
Александр Мальцев
Александр Мальцев
Измени, чтобы использовалась только на детей:
.menu-item-14>a:before {
    font-family: FontAwesome;
    content: "\f0ac";
    padding-right: 7px;
    font-weight: normal;
}
Аноним
Аноним
Спасибо! Все получилось :)
Аноним
Аноним
Здравствуйте, Александр!

Сейчас делаю сайт (использую Bootstrap), в котором присутствует полоска адаптивного меню, при нажатии на пункты обрабатывается событие, которое подгружает в блок content необходимую информацию, у предыдущего пункта меню убирает класс active, и добавляет его в пункт, который мы нажали (меняется цвет ссылки пункта).

$(".navbar-nav li").click(function(){

    var current_page = $("li.active")
	$(current_page).toggleClass("active");
	
	var navbar = $(".collapse")
	
    var page = $("a",this).attr("href");
    var content_id = page.split('.')[0];
	
    $(".content").attr("id", content_id);
    $(".content").load(page);
	
	return false;
	
    $(this).toggleClass("active");
    
});
И вот я столкнулся с двумя проблемами:
1) active не присваивается пунктам меню при нажатии, хотя контент подгружается.
2) Так же не получается сделать, что бы меню сворачивалось при нажатии на пункт (в мобильной версии)
Вариант который вы предложили выше с $(".navbar-collapse").collapse('hide'); не сработал.

<div class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Открыть навигацию</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				<div class="mainlogo"></div>
			</a>
		</div>
		<div class="navbar-collapse collapse">
			<nav class="nav navbar-nav">
				<li class="active"><a href="main.html">Главная</a></li>
				<li><a href="#">Наши клиенты</a></li>
				<li><a href="services.html">Услуги</a></li>
				<li><a href="#">Оборудование</a></li>
				<li class="hidden-xs"><a href="#">Сертификаты</a></li>
				<li><a href="#">Контакты</a></li>
			</nav>
		</div>
	</div>			
</div>
не могли бы вы предложить какие-нибудь способы решения этих проблем. Заранее спасибо)
Аноним
Аноним
Первый вопрос снимается, там же return не в конце, ужасная оплошность.
Аноним
Аноним
Да и второй тоже, перепробовал кучу всего, но после return ((( Надо было всего лишь сходить пообедать, что бы отвлечься и заметить это.
Вот рабочий код
$(".navbar-nav > li").click(function(){
	
    var current_page = $(".navbar-nav > li.active")
	$(current_page).toggleClass("active");
	
    var page = $("a",this).attr("href");
    var content_id = page.split('.')[0];
	
    $(".content").attr("id", content_id);
    $(".content").load(page);
    $(this).toggleClass("active");
	
    if ($(".collapse").hasClass("in")) {
    	$(".collapse").collapse("hide");
    }
    return false;
});
Аноним
Аноним
Спасибо! Получилось, добавив указанный вами код в .js, в css добавил — .navbar-nav > li.active > a {
color: #fff;
background-color: #012B53;
}

Все работает, но можете мне помочь подкорректировать код в function.php, не пойму что в нем дополнить (изменить), что бы получить тот же результат?
Код
class bootstrap_menu extends Walker_Nav_Menu {
  private $open_submenu_on_hover;
  function __construct($open_submenu_on_hover = true) {
    $this->open_submenu_on_hover = $open_submenu_on_hover;
  }
  function start_lvl(&$output, $depth = 0, $args = array()) {
    $output .= "\n<ul class=\"dropdown-menu\">\n";
  }
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $item_html = '';
    parent::start_el($item_html, $item, $depth, $args);
    if ( $item->is_dropdown && $depth === 0 ) {
      if (!$this->open_submenu_on_hover) $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"', $item_html);
        $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
    }
    $output .= $item_html;
  }
  function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
    if ( $element->current ) $element->classes[] = 'active';
    $element->is_dropdown = !empty( $children_elements[$element->ID] );
    if ( $element->is_dropdown ) {
      if ( $depth === 0 ) {
        $element->classes[] = 'dropdown';
        if ($this->open_submenu_on_hover) $element->classes[] = 'show-on-hover';
      } elseif ( $depth === 1 ) {
        $element->classes[] = 'dropdown-submenu';
      }
    }
    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
  }
}
Александр Мальцев
Александр Мальцев
Попробуйте использовать следующий код.
Код
add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );
function add_active_class($classes, $item) {
  if( $item->menu_item_parent == 0 && 
    in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
    ) {
    $classes[] = "active";
  }
  return $classes;
}
Аноним
Аноним
Как сделать, чтобы при активном дочернем меню, родительское было активно (подсвечивалось)
Александр Мальцев
Александр Мальцев
Здравствуйте.
Добавить класс active к необходимому пункту меню можно, например, на сервере при генерировании соответствующей страницы с помощью скрипта php. Т.е. когда пользователь нажмет на некоторый пункт меню, он перейдёт на некоторую страницу, которая будет сгенерирована на сервере и соответственно иметь меню с нужным активным пунктом. Здесь необходимо разобраться как Вы получаете меню, и настроить скрипт php.

Если Вы просто используете набор статичных страниц, то попробуйте это сделать, например так:
$(function(){
  $('.navbar-nav a').each(function(){
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('active'); 
      $(this).parents('li').addClass('active');
    }
  });
});
Аноним
Аноним
Здравствуйте! Подскажите пожалуйста. Имеется подменю 2 уровня. При его просмотре, родительское меню мне удалось сделать подсвеченным.
.navbar-nav > li:hover > a {
color: #fff;
background-color: #0165C2;
}
Вопрос? А как мне сделать, так что бы при клике на пункт подменю, его родитель оставался подсвеченным. Я как понимаю, это чрез active, но самостоятельно разобраться не получается
Burboss
Burboss
Отбой. Спасибо
Burboss
Burboss
Александр, здравствуйте.
Благодарю Вас за отличные уроки. Это лучшее, что есть в инете.
Вопрос: между брендом и собственно меню надо вставить картинку с телефонным номером.
Вставляю, так она, зараза, бегает то вверх, то вниз относительно середины блока.
Помогите разобраться, пожалуйста
Александр Мальцев
Александр Мальцев
Здравствуйте, спасибо.
Так и вставляйте её после бренда.
Например так (телефон в виде текста):
<a href="#" class="navbar-brand">Бренд</a>
<div style="float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px;">Номер телефона</div>
Если картинку, то так:
<a href="#" class="navbar-brand">Бренд</a>
<img src="1.png" style="float: left; height: 50px; padding: 0px 0px; margin-right: 10px;">
Если картинка меньше чем 50px, то соответственно добавить отступы.
Burboss
Burboss
Благодарю Вас, Александр.
Burboss
Burboss
Вставил текст «номер телефона», так он залип сверху блока и никак оттуда…
Аноним
Аноним
Здравствуйте. Вновь должен обратиться к Вам за советом.
Создал навигационное меню:
<header id="header">
  <div>
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container-flued">
        <div id="logo-box" class="navbar-header">
          <button class="navbar-toggle" data-target="#br-main-navbar-collapse" data-toggle="collapse" type="button">
           <a class="navbar-brand" href="/">Сайт</a>
        </div>
        <div id="br-main-navbar-collapse" class="collapse navbar-collapse">
          ...
        </div>
      </div>  
    </nav>
  </div>
</header>
После него дугой контент («витрина»).
Проблема в том, что между меню и навигационным меню образовывается пробел (отступ). Firebug подсвечивает его желтым и относит к тегу nav.
Другие элементы внутри тега nav (ссылки, бренд) подсвечиваются правильно и занимают отведенную им высоту. Даже header, в котором расположен nav также занимает правильную высоту, судя по firebug.
Из за чего это может быть? Как убрать этот отступ?
Изображение
Александр Мальцев
Александр Мальцев
Это отступ navbar.
Если он Вам не нужен, то сделайте так:
/* CSS */
.navbar {
  margin-bottom: 0px;
}
Аноним
Аноним
Здравствуйте. Как и все мы, за советом. После подключения плагина affix к меню, один из блоков оказался выше и при прокрутке залазит на меню. Не подскажите в чём беда? HTML блока обычный: container -> row -> две колонки. Вот стили:
.about {
height: 750px;
}
.about-left-container {
background-image: url(../images/maza.jpg);
background-repeat: no-repeat;
background-position: center;
height: 750px;
}
.about-right-container {
background: #ffffe5;
height: 750px;
}
Александр Мальцев
Александр Мальцев
Здравствуйте, посмотрите ответ здесь:
Как правильно зафиксировать колонку на Bootstrap?

Вы добавили стили, которые говорят только о фоне элементов, но не раскрывают их суть.
Добавлять affix к элементам можно либо с помощью data-атрибутов, либо с помощью JavaScript.
1. С помощью data-атрибутов:
<div id="myAffix" data-spy="affix" data-offset-top="100">
  ...
</div>
2. С помощью JavaScript:
$('#myAffix').affix({
  offset: {
    top: 100
  }
})
В данном примере под цифрой 100 понимается смещение (скролл) от экрана. При достижении этой цифры, элемент открепляется от экрана. Теперь его положение и размеры Вы должны указать. Задается это с помощью настройки класса .affix. Например положение от верха 150px, ширина 250px и т.д.
.affix {
  top: 100px;
  width: 250px;
}
Наверно Вы не настроили класс .affix.
Аноним
Аноним
Извините ещё раз, я наверное не правильно объяснил. У меня при прокрутке блок (ABOUT) наезжает на меню и оно пропадает, а когда этот блок прокручивается меню появляется и с последующими блоками уже нормально. Предполагаю что стили не правильно установил. Может взгляните?
_http://plnkr.co/edit/VU2bROs0OVpLFzryL056?p=preview
Аноним
Аноним
Спасибо, разобрался. Но сейчас появилась под меню полоса примерно в 10px. Ну никак не могу с ней справиться. Может подскажите как от неё избавиться? Спасибо
Изображение
Александр Мальцев
Александр Мальцев
Скорее всего, это отступ. Измените его на значение 0px.
Аноним
Аноним
Как всё просто :) Спасибо
Аноним
Аноним
Добрый день.

Я версткой раньше не занимался, но появилась такая необходимость. Пытаюсь с помощью navbar сверстать адаптивное меню для сайта.

Возможно Вы сможете мне помочь или направить)

Есть две проблемы:

1. Не пойму как настроить адаптивность при изменении разрешения.

Мое меню выглядит так:

Брэнд Меню1 Меню2 Меню3 Вход Регистрация

Вход и регистрация привязаны к правому краю.
В момент изменения разрешения, когда пункты меню уже не влазят в одну строку, происходит переход на новую. Сначала туда слетают пункты Вход и Регистрация (при этом все еще прижатые к правому краю). Т.е новая строка пустая и в самом конце два пункта.

Потом Бренд остается на 1й строчке, пункты меню на второй, а Вход и Регистрация на 3ю падает.

И только потом все это сворачивается в гамбургер.

Выглядит ужасно, а как поправить не знаю.
В идеале либо чтобы размер шрифта уменьшался (до заданного минимума) и меню оставалось в одну строку, либо чтобы сразу сворачивалось в гамбургер, как только переставало помещаться в одну строку.

2. Когда меню свернуто в гамбургер, Вход и Регистрация наезжают на другие пункты меню.
Плюс включается прокрутка, так как не все пункты помещаются в 1 экран.


Буду рад за совет где поискать и что почитать про настройку адаптации.
Александр Мальцев
Александр Мальцев
Необходимо подобрать точку сворачивания navbar. Т.е. ширину экрана при котором меню будет сворачиваться в мобильный вид.
Наиболее просто это сделать на странице _http://getbootstrap.com/customize/#grid-system. На ней необходимо изменить значение переменной @grid-float-breakpoint на необходимое значение (например, 1000px). Данная установка будет означать, что меню navbar будет иметь мобильный вид уже с 999px. После этого необходимо скомпилировать и скачать сборку.
Можете также изменить и размер шрифта:
.navbar-collapse {
  font-size: 12px;
}
Для выравнивания элементов по правому краю используйте класс navbar-right.
Аноним
Аноним
Спасибо большое! Попробую.
Аноним
Аноним
А где можно поправить этот параметр в уже загруженном бутстрапе? поиск в файле bootstrap.min.css по имени grid-float-breakpoint ничего не дает(
Александр Мальцев
Александр Мальцев
grid-float-breakpoint — это переменная LESS. Разработчики Bootstrap 3 сначало пишут стили на LESS, а потом преобразуют в CSS. LESS — это язык стилей, который облегчает написание CSS и его поддержку, т.к. обладает более богатыми возможностями чем CSS. В CSS нет grid-float-breakpoint, она есть только в LESS.

Скорее всего Вам предётся слишком много поправлять (добавлять в свой файл CSS). Если это необходимо, то можете это сделать сами:
1. Скачать готовую сборку Bootstrap.
2. Сделать кастомную сборку (с необходимым grid-float-breakpoint) и скачать её.
3. Сравнить 2 файла bootstrap.css (например, с помощью какого-либо инструмента).
4. Получить отличия и добавить их в свой файл CSS.
Аноним
Аноним
Спасибо за ваши уроки! Это лучшее, что есть в рунете по Бутстрапу.

Пытаюсь освоить адаптированную верстку, наконец стало что-то получаться. )

У меня почему-то дефолтная панель навигации (классы navbar и navbar-default) прилипает к верхней границе окна, хотя перед ней находится шапка. Удалось избавиться от этого только после удаления в классе navbar «position: relative». Как поняла, класс navbar-static-top просто даёт смещение. Наверно, можно без него обойтись?

И ещё вопрос. У вас в коде дефолтной панели data-target="#navbarCollapse" и div id=«navbarCollapse». В стилях версии 3.3.6 нету navbarCollapse. Может быть, это из устаревшей версии?

Александр Мальцев
Александр Мальцев
Марина, спасибо.
Меню navbar у Вас скорее расположено в каком-то другом блоке, который имеет position отличную от static (например: fixed). Поэтому у Вас получается не так как хочется. Изменять position:relative не стоит, т.к. в этом случае у Вас не будут правильно отображаться выпадающие меню. Правильное решение в этой ситуации — это создать правильную разметку.
navbarCollapse — это просто идентификатор, который можно указать любым. Он нужен для того, чтобы в мобильной версии меню можно было вызвать по кнопке.
Аноним
Аноним
Извиняюсь за назойливость, но возник тут же ещё вопрос. Как сделать такое меню, как в примере выше, в маленьком окне? У меня появляется скролл и выпадающее меню ложится под контент
Александр Мальцев
Александр Мальцев
Перекрытие элементов определяется свойством z-index. Следовательно, другой контент имеет более высокое значение, чем оно установлено у выпадающего меню. Значение z-index по умолчанию у dropdown-menu составляет 1000.
Аноним
Аноним
Спасибо Вам большое! Все получилось)
Аноним
Аноним
И ещё вопрос, как в выпадающем меню сделать разделительные полоски в том же примере
Александр Мальцев
Александр Мальцев
Разделительные полоски можно добавить так:
.dropdown-menu li {
    border-bottom: 1px solid #e5e5e5;;
}
Аноним
Аноним
Здравствуйте! Подскажите пожалуйста, как сделать что бы при переходе на пункт выпадающего меню, основной пункт меню, под которым оно находиться становилось нужного цвета? И ещё похожий вопрос, когда переходишь из пункта выпадающего меню в пункт субменю, что бы пункт выпадающего меню оставался подсвеченным. Все как в примере _http://visavik.com. Bootstrap 3
Александр Мальцев
Александр Мальцев
1. Цвет открытого пункта меню:
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  /* цвет */
  color: #555;
  /* фон */
  background-color: #e7e7e7;
}
2. По умолчанию Bootstrap 3 имеет двухуровневое меню.
Аноним
Аноним
в 1 пункте не получилось что то, перехожу в пункт подменю, ничего не проиходит
Аноним
Аноним
весь день ищу, ничего не получается. Почему когда нажимаю на пункт dropdown меню, основной пункт не меняет цвет:(
Аноним
Аноним
Добрый день, действительно хорошая статья, спасибо.
Никак не могу решить проблему, и у Вас тоже ничего не написано.
Если меню прижать к низу, то после того как оно «схлопывается», при наведении на гамбургер оно пытается раскрыться вниз, а там конец страницы и ничего не происходит. Можно как-то сделать, чтобы оно раскрывалось вверх?
Александр Мальцев
Александр Мальцев
Здравствуйте, меню navbar, как Вы описали выше, так и работает. Дополнительно ничего настраивать не требуется.
<nav class="navbar navbar-default navbar-fixed-bottom">
...
</nav>
Если у Вас что-то не работает, то проверьте, есть ли ошибки (в Chrome — клавиша F12, вкладка Console).
igor
igor
Огромное спасибо!
Ваш сайт лучший!
И помощь реальная!
igor
igor
Здравствуйте!
При добавлении скрипта взятого из второго ответа за 17 декабря вылезает проблема!
— при переключении с одного пункта меню на другой проскакивает горизонтальная прокрутка, прямо на месте меню. При третьем переключении этот эффект пропадает, до обновления страницы.
Скрипт вынесен в отдельный файл.
//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});
Cкрин прилагаю:
Скриншот
Александр Мальцев
Александр Мальцев
Здравствуйте!
Покажите Вашу ситуацию на jsfiddle или на чём-то подобном.
Так как у меня ничего такого не возникает.
igor
igor
А можно я вам на почту сброшу шаблон с которым я работаю?
Аноним
Аноним
Добрый день. Помогите, пожалуйста, нужно разместить текст в навигационной панели (по сути это заголовок страницы), чтобы он был по центру оставшегося свободного пространства после названия сайта, меню и прочих элементов.
Фото
Александр Мальцев
Александр Мальцев
Это можно выполнить так.
Добавить в CSS:
.navbar-default {
  text-align:center;
}
.navbar-center {
  display: inline-block;
  float: none; 
}
.navbar-center>span {
  position: relative;
  display: block;
  padding: 15px 15px;
}
HTML-код:
<nav class="navbar navbar-default">
  <div class="container-fluid">
  ...
  </div>

  <div class="collapse navbar-collapse" id="example-navbar">
    <ul class="nav navbar-nav">
    ...  
    </ul>
    <!-- Блок, содержащий текст, который необходимо отобразить по центру -->
    <div class="nav navbar-nav navbar-center">
      <span>Текст по центру</span>
    </div>
    <!-- Конец блока -->
    <ul class="nav navbar-nav navbar-right">
    ...
    </ul>
    </div>
  </div>
</nav>
Аноним
Аноним
Спасибо большое, помогло!
Аноним
Аноним
Здравствуйте! помогите пожалуйста! Нужно сделать меню fixed-top, но при просмотре на мобильном экране, чтобы оно пропадало и появлялось только при переходе к началу страницы. Заранее спасибо.
Александр Мальцев
Александр Мальцев
Здравствуйте.
Насколько я понимаю, Вам необходимо на sm, md и lg отображать меню с классом navbar-fixed-top, а на xs без него.
$(function(){
  var toggleNavbarFixed = function() {
    $navbar = $('.navbar');
    if ($(window).width()>=768) {
      if (!$navbar.hasClass('navbar-fixed-top')) {
        $navbar.addClass('navbar-fixed-top');
      }
    }
    else {
      if ($navbar.hasClass('navbar-fixed-top')) {
        $navbar.removeClass('navbar-fixed-top');
      }
    }
  }
  toggleNavbarFixed();
  $(window).resize(function(){
    toggleNavbarFixed();
  });
});
igor
igor
Спасибо! Прекрасно работает!
Новая проблема!
При развернутом меню, если нажать на кнопку оно не сворачивается. Мышкой еще получается по двойному или тройному клику, а вот пальцем не всегда удается. Образец взят у вас из урока. Заранее спасибо.
igor
igor
Спасибо! ошибку нашел сам.
Аноним
Аноним
Привет. Столкнулся с такой же проблемой. Если не трудно, поделись, пожалуйста, какую именно ошибку ты нашел. Бьюсь — не могу найти. Спасибо тебе заранее.
igor
igor
Честно! Уже не помню, потому что ошибка была элементарная (синтаксическая или закрытие тега потерял), а может свои изменения css убрал, чтобы конфликта с bootstrap не было…
Извини…
Аноним
Аноним
Добрый день!
Можно попросить совета, как сделать подсветку названия той категории, в которой нахожусь в данный момент? В какую категорию бы не зашел, или ничего не подсвечивается, или активен link4…
Не получается с таким кодом:
	<nav role="navigation" class="navbar navbar-default">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="container">
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">brand</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">brand</a>
  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
	  <li><a href="#">link4</a></li>
	  <li><a href="#">link5</a></li>
	  <li><a href="#">link6</a></li>
    </ul>
  </div></div>
</nav>
Александр Мальцев
Александр Мальцев
Это действие обычно выполняется на сервере, посредством добавления класса active к нужному пункту меню.
Аноним
Аноним
А как скопировать только верхнее меню к себе на сайт? На своем сайте нравится все, кроме этого меню))
В html разобрался, а вот из css bootstrap скопировал в свой css все строчки с navbar, и меню в результате сломалось)
Так же интересно, js файлы тоже копировать для работы только меню?
Александр Мальцев
Александр Мальцев
Перейти на страницу getbootstrap.com/customize/, на которой можно выбрать из Bootstrap только то что нужно.
Для navbar понадобится как минимум:
в Less files:
— из раздела Components: Navs, Navbar.
— из раздела JavaScript components: Component animations (includes Collapse), Dropdown (если необходимы выпадающие списки).
в jQuery plugins: Dropdown, Collapse.

После этого нажать Compile and Download и получить необходимые CSS и JS файлы.
Перед подключением из CSS файла можно удалить общие стили.
Аноним
Аноним
Здравствуйте! помогите пожалуйста советом. Решил сделать навигацию внутри страницы на якорях, но из-за плавающего навбара на Bootstrap3, столкнулся с проблемой — навбар закрывает 50 пикселей нужного пространства. Для боди прописал паддинг-топ:50пкс, помогло.
Затем использовал ваш пример:

#preim:before { 
  display: block; 
  content: " "; 
  padding-top: -50px; 
  height: 50px; 
  visibility: hidden; 
}
Проблема тоже решилась, но тут же породилась новая — появляется разрыв в 50 пикселей. И как назло в таком месте, где никак не спрячешь, белый фон. Есть конечно вариант сделать очень широкой полосу с текстом, но это уже крайности. Может есть какой ещё вариант избавиться от этого? Я вот подумываю в сторону z-index, но пока ещё особо не понимаю как сделать, возможно и ошибаюсь.
Изображение
Аноним
Аноним
как решили эту проблему?
Александр Мальцев
Александр Мальцев
А в чём проблема?
Например, добавляете ко всем необходимым заголовкам класс section:
<h2 class="section" id="h2">...</h2>
<h3 class="section" id="h3">...</h3>
В CSS прописываете код:
body { padding-top: 60px; }
.section:before { 
  display: block; 
  content: " "; 
  margin-top: -60px; 
  height: 60px; 
  visibility: hidden; 
}
Если необходимо изменить отступ, то изменяете число 60 на какое-нибудь другое.

Кроме этого, если у Вас блок начинается с заголовка, то он имеет margin-top: 20px. Чтобы его компенсировать необходимо уменьшить высоту на 20px и соответственно назначить этому заголовку другой класс (например, section1):
.section1:before {
  display: block; 
  content: " "; 
  margin-top: -60px; 
  height: 40px; 
  visibility: hidden; 
}
Аноним
Аноним
Здравствуйте.
1. а как сделать еще 1 уровень вложенности?
2. а как сделать, чтобы dropdown открывалось по наведению указателя, а не по щелчку?
Александр Мальцев
Александр Мальцев
Попробуйте SmartMenus. Данное меню полностью адаптивное и многоуровневое.
Страница проекта:
_http://www.smartmenus.org/
Демо:
_http://vadikom.github.io/smartmenus/src/demo/
Bootstrap Second Level:
_http://codepen.io/anon/pen/BjQqPO
Аноним
Аноним
Такой вопрос. Если нужно чтобы изначально меню располагалось под шапкой, и только потом как начинаем прокручивать страницу вниз оно фиксировалось сверху.Как это сделать?
Александр Мальцев
Александр Мальцев
Это делается с помощью плагина Bootstrap Affix.
Код HTML:
<div style="height:100px;">Шапка</div>
<nav id="navbar" class="navbar navbar-default" data-spy="affix" data-offset-top="100">
...
</nav>
Код CSS:
#navbar {
  top:0;
  width:100%;
}
Сергей
Сергей
При этом на navbar накладываются все элементы сайта, если выставить ему z-index проблема решается, но он начинает накладываться в свою очередь поверх overlay… как быть в этом случае?
Александр Мальцев
Александр Мальцев
Установить navbar значение z-index больше чем у других элементов сайта, но меньше чем у overlay. Или overlay установить большее значение z-index.
Сергей
Сергей
Спасибо за комментарий! я это понимал, но z-index оверлею не выставлялся. Может кому пригодится — drupal overley по умолчанию z-index 500
Аноним
Аноним
Здравствуйте. Не получается скорректировать css свойства navbar. Пытаюсь поменять фон при наведении (хочу отменить его совсем).
Код HTML:
<div class="bs-example">
  <nav id="myNavbar" role="navigation">
    <div class="container">
       <ul class="nav navbar-nav">
         <li><a href="#">Главная</a></li>
        <li><a href="#">Профайл</a></li>
         <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Галерея</a>
              <ul class="dropdown-menu">
                 <li><a href="#">Пункт 1</a></li>
                  <li><a href="#">Пункт 2</a></li>
                 <li><a href="#">Пункт 3</a></li>
              </ul>
            </li>
          </ul>
        </div>
       </nav>
     </div>

Пытаюсь в css сделать так
CSS код:
.navbar-nav>.active>a,
.navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus{
color: green;
background-color: none;
}
Александр Мальцев
Александр Мальцев
Здравствуйте, Фёдор.
В CSS Вы пытаетесь это сделать для активного пункта меню, а я как понимаю, Вам необходимо это сделать для всех. Кроме этого, у background-color нет значения none.
Вам необходимо изменить код CSS на следующий:
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
  color: green;
  background-color: transparent;
}
Аноним
Аноним
Все равно фон пунктов остается
Александр Мальцев
Александр Мальцев
Если необходимо и для выпадающего, то сделайте так:
.navbar-nav a:hover,
.navbar-nav a:focus {
  color: green;
  background-color: transparent !important;
}
</style>
Для гарантии можете добавить !important.
Аноним
Аноним
Спасибо за помощь, Александр! Частично помогло. Только вот в выпадающем списке по прежнему почему-то фон для пунктов (Пункт1, Пункт2, Пункт3) остается, либо я что-то не так делаю(((
Причем как интересно получается: в горизонтальном расположении меню, у пунктов выпадающего списка фон ЕСТЬ. А в вертикальном расположении меню (если сузить окно браузера), у пунктов выпадающего списка фона НЕТ. Странно
Аноним
Аноним
Подскажите, пожалуйста, как справиться с такой проблемой (Bootstrap 4):
В Google Chrome все нормально работает.
В IE 11 выдает следующую ошибку:
Необработанное исключение в строке 7, столбце 2411 в _localhost:49343/js4/bootstrap.min.js
0x800a139e — Ошибка выполнения JavaScript: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/).
Остальные браузеры не проверял.
PS:
Установлен bootstrap-4.0.0-alpha.2-dist, система Windows-10.
На мой взгляд, дизайн в Bootstrap 4 действительно стал адаптивным.
Александр Мальцев
Александр Мальцев
Подключить библиотеку tether.min.js перед подключением bootstrap.min.js. Скачать можете по ссылке, которую привели.
Данная строчка в файле bootstrap.min.js проверяет, подключен ли Tether, и если не подключен, то выбрасывает исключение.
<script src="/путь/до/tether.min.js"></script>
Аноним
Аноним
Подскажите как выравнивать ссылки в навигационном меню по всей ширине, а то сейчас они прилипают к левому краю, хотелось бы что бы выравнивались по всему контейнеру как например группы кнопок, красивее получается
Александр Мальцев
Александр Мальцев
А почему бы тогда его не использовать. В качестве меню можно использовать не только navbar, но, например, как Вы предлагаете Группы кнопок. Тем более что такие меню применяются на сайтах.
В navbar, например, с помощью Flex это можно сделать так:
Код CSS и HTML
/*Стили CSS:*/
@media (min-width: 768px) { 
  ul.navbar-nav {
    width: 100%;
    display: flex;
    -webkit-justify-content: space-around; /* Safari */
    justify-content: space-around;
  }
}
<!--HTML разметка:-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainmenu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="mainmenu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
      </ul>
    </div>
  </div>
</nav>
Аноним
Аноним
навбар нужен для того чтобы при входе с мобильных устройств меню отображалось с помощью иконки, которая при нажатии раздвигается и выводит список, к сожалению я не нашел способа как это сделать при помощи группы кнопок
Аноним
Аноним
Александр посмотрел ваш пример, спасибо за помощь!
Виктор
Виктор
Большое спасибо за помощь, я попробую так сделать. Это реально первый сайт который я встретил где реально помогают!!! С НОВЫМ ГОДОМ!!! ЖЕЛАЮ ВСЕХ БЛАГ!!!
Александр Мальцев
Александр Мальцев
Спасибо. Вас тоже с наступившим 2016 годом!
Стараюсь, по возможности отвечать на все комментарии :)
Виктор
Виктор
приветствую, а как сделать что бы то что вне меню (контент) не заезжал под меню, то есть меню с верху, и когда заходишь на сайт верхнее меню как бы поверх контента сверху размещается, а нужно что бы было меню а потом контент, но при прокрутке страницы меню оставалось сверху, вот ещё как сделать что бы меню было активным, у меня пункт с подпунктоми не разварачиваются
Александр Мальцев
Александр Мальцев
Здравствуйте.
Фиксированное меню Bootstrap располагается поверх контента с помощью CSS свойства z-index (если значение его больше чем у другого элемента, то он располагается над ним):
.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
Сместить контент от верхнего края страницы (body) можно указав в CSS следующее правило:
body { padding-top: 70px; }
Если что-то не работает, то проверьте, подключили ли Вы файлы Bootstrap (bootstrap.css, bootstrap.js) и библиотеку jQuery. Кроме этого проверьте, если ли у Вас ошибки в консоли браузера (клавиша F12).
Виктор
Виктор
css подключен js нет, а как его подключить?
Александр Мальцев
Александр Мальцев
Это описано на уроке Bootstrap 3 — Начало работы в разделе Шаг 2. Подключение платформы Bootstrap 3 к веб-странице.
Аноним
Аноним
Как это меню сдвинуть влево чтоб добавить еще элементы. А в опере вообще после главной остальные пункты ушли вниз.
Александр Мальцев
Александр Мальцев
Меню Bootstrap navbar занимает всю ширину контейнера в которое оно помещено.
Куда его можно сдвинуть, если оно занимает всю ширину контейнера?
Если его необходимо поместить в некоторый блок, то сделайте разметку и поместите его в этот блок.

Бутстрап поддерживает следующие браузеры:
Браузеры, которые официально поддерживает Bootstrap
* Internet Explorer 8-11
Аноним
Аноним
И снова здравствуйте! На этот раз ситуация такая: когда экран достигает такой ширины, что меню «сворачивается» в кнопку, при нажатии на эту кнопку появляется выпадающее меню. И вот это выпадающее меню сдвигает весь контент, который под ним, а хочется, чтобы оно отображалось «поверх» контента. Можно ли это сделать и если да, то как? И ещё хочется, чтобы при нажатии на любой из пунктов меню оно самостоятельно закрывалось опять «в кнопочку». Спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте.
Если Вам так это необходимо, то тут придётся для начала выполнить следующее действие:
.navbar {
  position: relative;
}
.collapse.in {
  position: absolute !important;
}
А потом перейти к визуальному оформлению этих блоков и поработать с анимацией.
Скорее всего, потребуется использование события:
$('.navbar').on('show.bs.collapse', function () {
  // …
})
Для решения второго вопроса попробуйте использовать следующее решение:
//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});
Аноним
Аноним
Спасибо, попробую.
Аноним
Аноним
Здравствуйте, у меня следующий вопрос.
Навигационное меню в bootstrap 3 class=«nav» при прокрутке страницы разделы меню подсвечиваются, указаны , пробую отменить подсветку разделов не могу найти как отключил скрипт скролла, не помогает.
Цель что бы при наведении мышкой раздел в меню подсвечивался, но при прокрутке страницы разделы не подсвечивались. Спасибо.
Вижу раздел «Пример совместного использования плагинов Affix и ScrollSpy» но описание отсутствует.
Александр Мальцев
Александр Мальцев
Здравствуйте, странное желание.
Можно так:
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #777;
  background-color: transparent;
}
/* Изменяем цвет и фон активного пункта только при наведении */
.nav .active a:hover {
   color: yellow;
   background-color: green !important;
}
Тимофей
Тимофей
Спасибо! Ты лучший! Немного переделал под свои нужды, т.к. твое меню с PDO не схлопывалось на мобильных. HTML-кода было вполне достаточно )).
Было бы круто, если бы у тебя получилось выделить время и написать урок в соответствующем разделе о том, как пользоваться редкими плейсхолдерами типа [[+classnames]] и [[+attributes]], а то достаточно сложно найти по ним информацию.
Постараюсь задонатить при первой возможности на твой сайт — подобные проекты должны развиваться.
Тимофей
Тимофей
Шеф, привет! Подскажи, пожалуйста, возможно ли сделать меню с расщепленными кнопками? Т.е. основная категория — в основном поле, а вложенные в нее подкатегории — в прикрепленной выпадайке.
Нужно по вот такому принципу: Скриншот.
И потом разложить все это с помощью pdoMenu. Буду благодарен за пример HTML — кода.
PS. Классный upload-ер!
Александр Мальцев
Александр Мальцев
Привет, Тимофей!
HTML-код меню:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- Кнопка 1 с разделителем -->
        <li>
          <div class="btn-group navbar-btn">
            <button type="button" class="btn btn-danger">Action</button>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
            </ul>
          </div>
        </li>
        <!-- Конец кода кнопки 1 с разделителем -->
        
        <!-- Кнопка 2 с разделителем -->
        <!-- Кнопка 3 с разделителем -->
        <!-- ... -->
      </ul>
    </div>
  </div>
</nav>
Александр Мальцев
Александр Мальцев
PDOMenu (MODX Revolution):
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    [[pdoMenu?
      &startId=`0`
      &level=`2`
      &tplParentRow=`@INLINE
        <li class="[[+classnames]]">
	  <div class="btn-group navbar-btn">
            <a href="[[+uri]]" class="btn btn-danger" [[+attributes]]>[[+menutitle]]</a>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
	    <ul class="dropdown-menu">[[+wrapper]]</ul>
	  </div>
	</li>`
      &tplOuter=`@INLINE [[+wrapper]]`
      &rowClass=`menuid[[+id]]`
    ]]
  </ul>
</div>
Аноним
Аноним
Здравствуйте! Подскажите, пожалуйста, как в меню добавить разделители, чтобы получить что-то типа такого:
Main | Services | About us | Contacts
Спасибо.
Александр Мальцев
Александр Мальцев
Здравствуйте.
Это можно сделать с помощью стилей CSS.
Например так:
.navbar ul.nav>li {
  border-right: 1px solid black;
}
.navbar ul.nav>li:last-of-type {
  border-right: none;
}
Аноним
Аноним
Спасибо. Попробую.
Аноним
Аноним
Подскажите, пожалуйста, как привязать Easing эффекты на dropdown-menu?
Александр Мальцев
Александр Мальцев
1. Скачать плагин jquery.easing.1.3.js или какой-то другой.
2. Подключить его к странице
3. Добавить на страницу скрипт, изменяющий анимацию компонента dropdown при его открытии и (или) закрытии:
<script>
// после загрузки страницы //
$(function(){
  // добавить анимацию к dropdown при открытии //
  $('.dropdown').on('show.bs.dropdown', function(){
    $(this).find('.dropdown-menu').first().stop(true, true).animate({height: "show"}, 2000, "easeInOutCubic");
  });
  // добавить анимацию к dropdown при закрытии //
  $('.dropdown').on('hide.bs.dropdown', function(){
    $(this).find('.dropdown-menu').first().stop(true, true).animate({height: "hide"}, 2000, "easeInOutCubic");
  });
}); 
</script>
4.Настроить временные интервалы (в примере 2000 мс) и методы easing (в примере easeInOutCubic)
Аноним
Аноним
Александр, огромное спасибо. У вас очень хороший и полезный ресурс.
Аноним
Аноним
Очень нужно сделать высоту навбара в 25px, полдня убил, ничего не смог найти, тупо пересобрал BS под себя в высотой навбара 25, но это э не то :(, подскажите плиз стиль где задается эта высота
Александр Мальцев
Александр Мальцев
Привет, если тебе надо с помощью CSS, то попробуй вот так:
.navbar-nav > li > a, .navbar-brand {
  padding-top:2.5px !important; 
  padding-bottom:2.5px !important;
  height: 25px;
}
.navbar {
  min-height:25px !important;
}
.navbar-toggle {
  padding-top:2.5px !important; 
  padding-bottom:2.5px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
Аноним
Аноним
В Bootstrap меню схлопывается при экране 768px, а как увеличить этот параметр средствами CSS до 1200, может, подскажите?
Решение через @grid-float-breakpoint не подходит, так как при этом вся сетка тоже сворачивается.
У меня в меню довольно много пунктов, не могу победить эту проблему (
Александр Мальцев
Александр Мальцев
Привет, Сергей.
Используйте следующий код CSS:
@media (max-width: 1200px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
}
Аноним
Аноним
Спасибо.
Есть еще один вопрос, если можно. Использую фиксированное меню, и когда ссылка ведет на id (анкор) то меню перекрывает контекст. Для статики это решается добавлением к body свойства padding-top: 40px. А вот как быть с ссылками-анкорами не понятно.
Александр Мальцев
Александр Мальцев
Попробуйте использовать следующий стиль:
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
А почему Вы используете высоту 40px? По умолчанию высота Navbar 50px, да ещё необходимо обеспечить хоть небольшой отступ (не меньше 20px). В итоге получается, что отступ необходимо задавать как минимум пикселей 70.
Аноним
Аноним
Ещё раз спасибо, Александр, за ответы на вопросы.
Помогло, правда, я использовал div[id]:before — т.к. на теге ссылок висят свои ID, позволяющие переходить дальше с клавиатуры, а делать их блочными нельзя.
Относительно высоты отступа, ввиду того, что я не профессионал, а любитель, то у меня порой стоят переводы строк. Возможно, нужно будет подумать и сделать код более чистым.
И не сочтите совсем уж за наглость, а можно как-то после перехода по ссылке, div[id] подсветить её средствами CSS?
Александр Мальцев
Александр Мальцев
:target {
  background: yellow;
}
Аноним
Аноним
Спасибо, то, что нужно!
Пришлось только поменять цвет на выделение bold, т.к. блок у нас же стал выше после :before. Но выделение цветом и не важно, главное понятно, на каком тексте фокус.
Аноним
Аноним
А как решить вопрос, чтобы меню прилипало к верху (после прокрутки). Уже 3-й день бьюсь с этой проблемой. Кучу скриптов перебрал, ни один не работает. Может, подскажете решение.
Видел вроде в самом бутстрапе есть плагины affix. Но так и не разобрался, как его прикрутить к меню, чтобы оно прилипало.
Буду благодарен, если подскажите, как решить проблему.
Александр Мальцев
Александр Мальцев
Не знаю что у вас конкретно не получается с вашим меню, но с affix необходимо работать следующим образом:
1. Добавить к необходимому элементу (например: меню navbar) атрибуты data-spy=«affix» (подключаем affix) и data-offset-top=«200» (задаём смещение, при котором элемент переходит в состояние position:fixed и обратно).
2. Задать необходимые стили с помощью CSS, кроме position:fixed; для класса .affix
3. Для классов .affix, .affix-top и .affix-bottom (в вашем случае для .affix-top и .affix) самостоятельно (независимо от этого плагина) задать вручную актуальные позиции.

Т.е. для вашего меню кроме указания атрибутов, Вам как минимум надо написать ещё CSS для определения положения и ширины вашего блока (меню).

Например, описать положения элемента (меню), когда к нему добавляется класс .affix (т.е. он становится фиксировано спозиционирован):
.affix {
  left: 0;
  width:100%;
}
Аноним
Аноним
«Примечание: Располагайте содержимое навигационного меню внутри контейнера»
Контейнер имеет отступы по бокам. Я добавил к меню класс row.
class="navbar navbar-default <b>row</b>"
PS. Каждый блок (шапка, контент, подвал) у меня в отдельном row.
Аноним
Аноним
Уважаемый автор! Этот сайт сделан на чистом Bootstrap или еще какая-то тема прикручена?
Александр Мальцев
Александр Мальцев
Frontend сайта выполнен на Bootstrap 3.