- Как в Bootstrap создать горизонтальное адаптивное меню
- Фиксированное (плавающее) меню
- Неподвижное верхнее горизонтальное меню
- Меню, имеющее тёмные цвета
- Как изменить точку переключения navbar
- Как зафиксировать меню при прокрутке
- Bootstrap Navbar - Анимация кнопки меню
- Изменение максимальной высоты collapsed блока
- Горизонтальное меню для навигации по странице
- Navbar - Открытие dropdown меню при наведении
- Установка активного пункта меню с помощью JavaScript
- Изменение высоты Navbar
- Комментарии
Bootstrap 3 - Navbar (горизонтальное меню)
В этой статье вы узнаете, как в Bootstrap 3 осуществляется создание главного (основного) горизонтального меню для сайта.
Как в Bootstrap создать горизонтальное адаптивное меню
Создание горизонтального адаптивного меню для сайта в Bootstrap осуществляется с помощью компонента Navbar.
Navbar имеет 2 режима отображения:
- десктопный (обычный) – выводятся все элементы меню;
- мобильный (свёрнутый) – по умолчанию отображается бренд и кнопка «Гамбургер» (для открытия основного содержимого меню).



Режим отображения меню зависит от ширины viewport браузера. По умолчанию меню Navbar имеет мобильный вид при ширине viewport меньше 768px.
Демонстрация компонента Navbar
Описание меню Navbar
Меню Navbar состоит из:
- заголовка
navbar-header
(кнопки «Гамбургер» и бренда); - основной части (места для размещения ссылок, кнопок, форм и других элементов).
HTML-структура Bootstrap меню Navbar (без поддержки вспомогательных технологий):
<!-- Классы 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
).
Добавление в меню ссылок и выпадающего списка
Добавление ссылок в меню осуществляется следующим образом:
<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
предназначен для подсвечивания активного пункта меню.
Добавление выпадающего списка в меню:
<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
:
<li role="separator" class="divider"></li>
Добавим в меню ещё блок, содержащий ссылку и выпадающий список, но расположенный справа:
<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
и связанным с ним id
, в меню Navbar используются и много других сущностей. Они играют роль селекторов, с помощью которых к элементам меню добавляются стили (CSS) и логика (JavaScript).
Например, у кнопки «Гамбургер» атрибут data-toggle="collapse"
предназначен для того, чтобы JavaScript его инициализировал как Collapse. После инициализации эта кнопка может переключать видимость элемента, указанного в data-target
.
Кроме этого, JavaScript, в зависимости от состояния меню, добавляет и к другим элементам различные классы.
Один из этих классов – это collapsed
. Он присутствует у кнопки «Гамбургер», когда меню находится в свёрнутом (не в открытом) состоянии.
Для элемента, в котором отображается основной контент, логика JavaScript устанавливает определённый класс (классы) из следующего списка:
collapse
(скрыт);collapsing
(находится в процессе открытия или закрытия);collapse
иin
(открыт).
Поддержка вспомогательных технологий
HTML-структура Bootstrap меню Navbar с поддержкой вспомогательных технологий:
<!-- Классы 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. Т.е. содержимое нижеприведённых элементов будет доступно только им:
<span class="sr-only">Toggle navigation</span>
<span class="sr-only">(current)</span>
При чтении HTML страницы пользователь не поймёт что это за элемент, если к нему не добавить поясняющий текст. Например, фраза Toggle Navigation поясняет, что с помощью этого элемента осуществляется переключение навигации.
Кстати, если ваша аудитория является русскоговорящей и пользователь не знает английского языка, то он и в этом случае может не понять назначение элемента.
Поэтому для русскоговорящей аудитории текст желательно указывать так:
<span class="sr-only">Кнопка, для переключения навигации</span>
<span class="sr-only">(текущая)</span>
Атрибут role
предназначен для того, чтобы указать назначение того или иного элемента:
role="navigation"
– содержит навигацию;role="button"
– элемент, на который можно кликнуть.
Атрибуты, начинающиеся с aria
, предназначены для описания элементов и их состояния:
aria-expanded
– сообщает, развёрнут или свёрнут элемент;aria-haspopup
– сообщает, что элемент имеет подменю или контекстное меню.
Если вам не нужна поддержка вспомогательных технологий, то данные сущности при создании меню можно не использовать.
Использование в качестве бренда изображения
В качестве бренда можно использовать не только текст, но и изображение (img
).
<a class="navbar-brand" href="/">
<img src="navbar-brand.svg" height="36" alt="Название бренда или сайта">
</a>
При установке изображения придётся немного подкорректировать класс navbar-brand
. А именно в зависимости от высоты изображения изменить значение padding
отступов.
Например, для изображения, имеющего высоту 36px, в качестве значений отступов padding-top
и padding-bottom
необходимо установить следующее:
/* 50px - 36px = 14px
14px / 2 = 7px
50px - высота меню Navbar по умолчанию */
.navbar-brand {
padding-top: 7px;
padding-bottom: 7px;
}
Вставка формы в меню
Помещение формы в меню осуществляется посредством добавления к ней класса navbar-form:
<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
.
<button type="button" class="btn btn-default navbar-btn">Войти</button>
Класс navbar-btn
может применяться к элементам a
и input
.
Вставка текста в меню
Для того чтобы в меню поместить некоторый текст, его необходимо обернуть с помощью элемента p
и добавить к нему класс navbar-text
.
<p class="navbar-text">Вошли как Тимофей</p>
Ссылки вне элемента nav
Для использования стандартных ссылок вне специально предназначенного для этого элемента, к ним необходимо добавить класс navbar-link
.
<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
:
<ul class="nav navbar-nav navbar-right">
...
</ul>
Управление видимостью элементов меню на устройствах
В Bootstrap 3 имеется набор адаптивных классов (например, hidden-xs
, hidden-sm
, hidden-md
, hidden-lg
), с помощью которых можно очень просто скрыть отображения элемента на определённых устройствах.
Например, скроем отображения элемента в меню на маленьких (sm) и средних (md) экранах.
<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
.
<!-- Класс 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):
body {
padding-top: 70px;
}
Данное правило необходимо включить в свой файл CSS. Этот файл должен быть подключен после Bootstrap CSS.
Кроме этого, из-за того что у нас основной контент сдвинут, переход к определённому месту страницы, посредством якоря, будет выполняться не корректно. Чтобы это исправить, в CSS необходимо добавить следующий код:
:target:before {
display: block;
content: " ";
margin-top: -70px;
height: 70px;
visibility: hidden;
}
Меню, прикрепленное к нижней части страницы
Прикрепление меню к нижней части страницы осуществляется посредством добавления к нему дополнительного класса navbar-fixed-bottom
.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Чтобы нижнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body
добавить следующее CSS правило:
body {
padding-bottom: 70px;
}
Неподвижное верхнее горизонтальное меню
При расположении обычного (прокручиваемого) меню в верхней части страницы к нему желательно добавить класс navbar-static-top
.
<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
).
<nav class="navbar navbar-inverse">
...
</nav>

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

Способ изменения точки схлопывания меню с помощью 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
.
<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.
<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):
.navbar.affix {
top:0;
width:100%;
}
Bootstrap Navbar - Анимация кнопки меню
Примеры кода, с помощью которых вы можете «оживить» кнопку «Гамбургер».
1 вариант (анимация в иконку закрытия):
.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 вариант (анимация в стрелочку, направленную вверх):
.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.
.navbar-collapse {
max-height: 340px;
}
Если вы хотите данное значение устанавливать динамически, т.е. в зависимости от высоты устройства, то можно воспользоваться следующим скриптом (для верхнего фиксированного меню Navbar):
$(function() {
$('.navbar-collapse').css({
maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
});
});
Если необходимо с учётом возможного изменения экрана, то так:
$(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):
<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):
<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 блок:
//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
//если она не имеет класс dropdown-toggle
if (!$(this).hasClass("dropdown-toggle")) {
//то закрыть меню
$(".navbar-collapse").collapse('hide');
}
});
Navbar - Открытие dropdown меню при наведении
Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):
$(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:
$(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):
.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;
}
}
Статьи, связанные с этой темой:
Спасибо Вам большое за уроки!
Не могли бы Вы подсказать? Есть меню на Bootstrap. Со временем возникла необходимость увеличить количество пунктов меню; но в одну строку они не помещаются, и меню съезжает под логотип. Нельзя ли сделать так, чтобы пункты меню располагались в 2 строки справа от логотипа? Спасибо!
Можно, но только с помощью JavaScript.
Например, так:
Пример navbar с меняющимся цветом фона
Не могли бы прокомментировать?
Возможно, я неверно его подключаю:
Файлы в соответствующих директориях.
Для вывода использую такую конструкцию (Joomla):
В итоге меню все же схлопывается, стили не используются…
Ссылка на тестовый домен: _http://vianta5f.bget.ru/home-3/in-ektsionnaya-meditsina/biorevitalizatsiya-gialuronovoj-kislotoj-kozhi
Спасибо заранее!
Используется bootstrap-submenu следующим образом.
1. Создание пункта меню с субменю:
2. Поместить после меню и подключения «bootstrap-submenu.min.js» скрипт:
Посмотреть пример Navbar с субменю можно в песочнице.
Но все же такой вариант у меня не работает:
при подключении
выдается ошибка Uncaught TypeError: $ is not a function
при оборачивании
ошибка пропадает, меню не схлопывается при клике, но и не открывается…
Извините, что отнимаю у Вас время!
P.S.
полный код меню:
Например, если в браузере отключить эти стили, то всё начинает отображаться:
Например: имеется navbar1 и navbar2, открыта мобильная версия. При нажатии на navbar1 выпадает список из navbar2, при нажатии на navbar2 — все тот же navbar2, так как последним был добавлен на страницу.
В чем может быть проблема?
Кнопка «гамбургер» открывает то, на что указывает значение атрибута data-target:
Вот блок, который она открывает #navbar-main (id, равно navbar-main):
Вам нужно в 1 меню в data-target, например, указать #navbar-main1 и блоку (его id), которое будет открываться соответственно navbar-main1.
Во втором меню в data-target, например, указать #navbar-main2 и блоку (его id), которое будет открываться соответственно navbar-main2.
Вот наглядный пример двух navbar в песочнице, посмотрите, всё просто. Первое меню – «navbar-1», второе – «navbar-2».
navbar при открытии на ПК на большом разрешении имеет горизонтальное меню в виде строки с кнопками
при открытии фронта на мобильном устройстве он превращается в Toggle navigation в виде одной кнопки с выпадающим вертикальным меню.
Вопрос как сделать так чтоб на мобильных устройствах с низким разрешением он не превращался в Toggle navigation а оставался также горизонтальным меню только убирал подписи к кнопкам оставляя допустим значки.
суть идеи примерно такая, использую 3 версию
, и у меня это выглядит вот так:
pastenow.ru/430195dad66217b0b07463ecf34236f0
Почему?
pastenow.ru/e4f0f393496954230164519d69a880a6
а при нажатии на поле поиска, меню исчезает, появляется клавиатура, можно как то решить задачу, чтобы при клике на поле поиска, меню не пряталось, а вот уже после нажатия на кнопку уходило в сторону(при использовании поиска). Благодарю.
Например, для всех выпадающих списков или так как это вам нужно:
.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
Шаблон сайта:https://www.gettemplate.com/demo/initio/
Сам сайт: www.dvkgroup.com.ua
И еще одну проблему заметил — на телефоне некоторые картинки вытягиваются.
Заранее спасибо.
Я попробовал пока на шаблоне. Там имелся такой код.
Я просто заменил
на
как у Вас в примере.
И о чудо! Кнопка заработала! Но возникает естественный вопрос — на кой ляд там этот код ?
Если использовать свойство
/*button[aria-expanded=«true»] {
margin-top: -11px;
}*/
то во время анимации(сворачивания), все равно видно смещение
Необходимо просто для мобильной версии уменьшить размеры элементов, значения margin и padding. Например, вот так.
Как это сделать?
Вид на телефоне(то что зачёркнуто, должно быть как и на PC т.е горизонтально идти): joxi.ru/82Q5N34ijLBOv2.png
Например, так (демо):
Шаг 2 появляется на секунду-полторы секунды, но это просто смотрится очень не эстетично.
И сделал 2
Проблема в том, что если открыть сначала одну вкладку меню, а потом другую, то первая не пропадает. Хотелось бы чтобы когда нажал первую она была активна, а если нажал вторую, то первая закрывается. Можно решить эту проблему? Заранее спасибо!
У меня меню выглядит так:
В вашем случае необходимо определить скрипт, который предотвращает это действие.
Пример как это можно сделать: jsfiddle.net/itchief/qvyacs2r/
контент->navbar-> контент
тоесть не в самом верху страницы, а скажем через 200px
Спасибо
Тут будет так как вы написали:
Осваиваю Bootstrap. Задача следующая. Необходимо сделать прозрачное горизонтальное меню над каруселью. Карусель должна занимать весь экран. Возможно ли это сделать с помощью классов Bootstrap? Буду благодарна за любые советы.
Просто добавьте в CSS следующее:
Значение 0.8 определяет степень прозрачности.
В body больше ничего нет.
Все казалось понятно и просто, но неизвестно откуда взялся отступ сверху. Далее, я пытаюсь сделать фиксированное меню при прокрутке. Добавляю к nav класс «navbar-static-top» и стили «position: -webkit-sticky; position: sticky; top: 0;». Однако у меня получилось то, чего я никак не ожидала.
Вопрос: откуда взялся этот отступ? Как его убрать? Почему у меню сверху пропала граница?
Пожалуйста, помогите.
P.S. Прикрепляю скрин. itchief.ru/assets/uploadify/1/7/d/17dbeffcf7ed2a7a037bb60afa4e53cf.jpg
Попробуйте добавить в CSS:
Класс navbar-static-top не делает ничего кардинального, он только изменяет некоторое оформление горизонтального меню Navbar (убирает закругления углов, некоторые границы и т.д.). Из-за него у вас и пропала сверху граница.
Не представляю, как можно сделать фиксированное горизонтальное меню с помощью position:sticky. Он предназначен для фиксирования элемента при прокрутке только в рамках некоторого элемента и то только при условии, что в нём есть свободное вертикальное пространство.
Для создания основного горизонтального фиксированного меню, необходимо использовать position: fixed.
Один из вариантов — это использовать абсолютное позиционирование. Для этого необходимо создать дополнительный блок div, например c классом nav-center, и задать ему абсолютное положение внутри nav. А также изменить элемент ul, а именно задать ему CSS-свойство display со значением inline-block и отменить float.
CSS:
HTML:
У меня следующая проблема: нужно выровнять логотип и горизонтальное меню так, чтобы они были на одном уровне. Логотип все время уезжает вниз, никакие изменения в основном файле CSS на него не действуют.
Скриншот: _http://i93.fastpic.ru/big/2017/0725/5b/7cb274bae1a198f26076b9db42d6a65b.jpg
Сайт:
Заранее огромное спасибо!
1. Установить ему необходимую высоту, если же оно, конечно же, не равно 50px.
2. Рассчитать необходимые padding и установить их.
3. Откорректировать логотип (задать ему высоту кратную 2). Т.е., например, не 49px, а 50.
Как рассчитать отступы и их установить приведено в разделе этой статьи «Изменение высоты Navbar».
.container{
position:relative;
}
.container>.navbar-collapse{
position: absolute;
left: 130px;
top: 40px;
}
Подскажите пожалуйста как сделать кнопку «вернуться на главную» в меню вместо toogle кнопки. Саму кнопку разместить у меня получилось, но выравнять кнопку по правому краю не получается ни как, pull-right не срабатывает, navbar-right тоже не помогает( Хочется чтобы кнопка была при любом разрешении экрана была прижата к правому краю меню, мне мобильное меню не нужно на этой странице. Я бы сделал это меню на обычном html и css, но сейчас уже пошел на принцип чтобы сделать на bootstrap, эту казалось бы простую задачу, опыт такой пригодился бы в будущем) Код выглядит сейчас так:
1. Необходимо отменить, чтобы элемент с navbar-header был плавающим.
2. Использовать вместо navbar-right класс pull-right. Это необходимо сделать для того чтобы элемент выравнивался по правому краю вне зависимости от разрешения.
Дополнительно необходимо добавить ещё отступ для кнопки на маленьких экранах:
разметка:
стили .less:
Тут либо использовать абсолютное позиционирование (необходимо просчитать все размеры) или js-код.
Помогите с проблемой, пожалуйста. При нажатии левой кнопки мыши не срабатывает ссылка 1-го уровня меню (правой, в новом окне и т.д. открывается). Со ссылками 2-го уровня все в порядке.
Спасибо.
itchief.ru/assets/uploadify/b/e/f/bef9bd20ec6581e6f6005e4b20a70755.jpg
А возможно как-то перенаправить выпадающий блок вверх?
(в продолжение использования Аффикс).
То есть задача, следующая:
1. если панелька внизу экрана/не прикрепленная кверху — то выпадающий блок меню должен открываться вверх.
2. если панелька вверху экрана/прикрепленная — то выпадающий блок меню должен открываться вниз.
Александр, подскажите, а можно сделать так, чтобы выпадающие меню открывались при наведении мыши а не при клике?
Подключить его к странице:
Добавить дополнительные атрибуты data-hover и data-close-others ко всем ссылкам меню, имеющим атрибут data-toggle со значением dropdown:
Готовый пример: yadi.sk/d/h5pbm3L53HMUnK
Должно оставаться так (_http://prntscr.com/et76n5), а остается так (http://prntscr.com/et7fuh).
Для создания трёхуровневого меню navbar можете воспользоваться хорошим плагином Bootstrap-submenu.
Чтобы это создать придётся добавлять много CSS и JavaScript кода. Пример, как это сделать, можно посмотреть на jsfiddle.
Ещё вариант — это использовать расширение Jasny Bootstrap.
HTML
CSS:
Мне необходимо, чтобы меню открывалось при наведении курсора на кнопку. То есть чтобы список вываливался не при клике на кнопку «drop down», а при наведении на кнопку. В последующем эта кнопка будет заменена на ссылку.
itchief.ru/lessons/bootstrap-3/bootstrap-3-custom-navigation-menu#comment-2832
Например, можно сделать так:
1. Сделал чанк Navbar
2. Закинул в него pdoMenu со следующим кодом:
3. Закинул чанк в шаблон
, но не все меню работает правильно т.е. меню без категорий работает нормально, но при нажатии на категорию или вложеное в ней меню (со второго клика) сайт начинает падать, отображаться не правильно: картинки не отображаются, не придерживается стилей как-будто их нет вовсе, любой клик на пункт меню перекидывает на главную страницу, но нажав на лого или пункт главная приводит сайт в порядок.
Может кто сталкивался или знает где ошибка?
так я подключаю js-скрипты (чанк Footer-script):
Меню строю так (чанк Navbar):
Шаблон Главной страницы:
Основной шаблон (для других страниц):
Было начал грешить на бесплатный хостинг — beget.
Подскажите, пожалуйста, где ошибка? И как Вы код, на форуме, делаете цветным?
Спасибо.
После указания этого тега пути к файлам будут рассчитываться уже относительно корня сайта. Указания путей к файлам осуществляйте следующим образом:
На сайте некоторое время назад, любой фрагмент кода получал автоматическую расцветку. Т.е. код, помещённый в элемент code, превращался в вышеприведённую конструкцию. Это конечно хорошо, но если кусков кода на странице много, то это увеличивает время необходимое на отображение этой страницы в браузере. Т.е. открытие страницы сильно нагружает процессор пользователя, т.к. ему приходится отформатировать различными цветами большие куски кода. Поэтому в последнее время на сайте этого не происходит. Но если вы хотите это сделать, то оберните код не в элемент code, а в pre с классом prettyprint.
Думаю это многим полезно будет.
С меня пиво на любой кошелек.
Спасибо.
Элемент li необходимо расположить в ul с классом dropdown-menu:
В CSS добавить следующие стили:
— bootstrap 3
— в одной строке «навигационное меню» по сайту и меню «входа/регистрации»
Вопрос — есть ли возможность схлопывания меню в кнопку (с выпадающим вертикальным меню) при разных разрешениях экрана. Т.е. чтобы меню входа/регистрации схлопывалось при разрешении 992px, а основное меню схлопывалось в кнопку при разрешении 768px?
Заранее спасибо за ответ
Можно например сделать так:
Вам необходимо сделать что-то подобное этому:
Т.е. допустим сейчас открыта страница:
Если сейчас я в ней размещу ссылку:
То при нажатию на неё я перейду на страницу index.html, расположенную в этом разделе:
Если Вы хотите чтобы относительные ссылки шли от корня, то используйте элемент base:
После этого эта ссылка будет ввести на страницу, расположенную в корневом разделе.
Кроме использования относительных ссылок, можно использовать абсолютные (т.е. от корня сайта). Начинаются они со слэша (/).
а вот
так же как и
при наведении мышкой показывает ссылку, если нажать правой мышкой и в контекстном меню выбрать открыть в новом окне то откроется главная, а если нажать левый мышкой то ничего не происходит, левой мышкой работают только якоря.
getbootstrap.com/customize/?id=e4ae3166f551d396cc928acf43d4d66a
В конце страницы нажми на кнопку «Compile and Download». В архиве будут 2 файла (bootstrap.css и bootstrap.js). Их необходимо подключить к странице.
Сейчас делаю сайт (использую Bootstrap), в котором присутствует полоска адаптивного меню, при нажатии на пункты обрабатывается событие, которое подгружает в блок content необходимую информацию, у предыдущего пункта меню убирает класс active, и добавляет его в пункт, который мы нажали (меняется цвет ссылки пункта).
И вот я столкнулся с двумя проблемами:
1) active не присваивается пунктам меню при нажатии, хотя контент подгружается.
2) Так же не получается сделать, что бы меню сворачивалось при нажатии на пункт (в мобильной версии)
Вариант который вы предложили выше с $(".navbar-collapse").collapse('hide'); не сработал.
не могли бы вы предложить какие-нибудь способы решения этих проблем. Заранее спасибо)
Вот рабочий код
color: #fff;
background-color: #012B53;
}
Все работает, но можете мне помочь подкорректировать код в function.php, не пойму что в нем дополнить (изменить), что бы получить тот же результат?
Код
Код
Добавить класс active к необходимому пункту меню можно, например, на сервере при генерировании соответствующей страницы с помощью скрипта php. Т.е. когда пользователь нажмет на некоторый пункт меню, он перейдёт на некоторую страницу, которая будет сгенерирована на сервере и соответственно иметь меню с нужным активным пунктом. Здесь необходимо разобраться как Вы получаете меню, и настроить скрипт php.
Если Вы просто используете набор статичных страниц, то попробуйте это сделать, например так:
.navbar-nav > li:hover > a {
color: #fff;
background-color: #0165C2;
}
Вопрос? А как мне сделать, так что бы при клике на пункт подменю, его родитель оставался подсвеченным. Я как понимаю, это чрез active, но самостоятельно разобраться не получается
Благодарю Вас за отличные уроки. Это лучшее, что есть в инете.
Вопрос: между брендом и собственно меню надо вставить картинку с телефонным номером.
Вставляю, так она, зараза, бегает то вверх, то вниз относительно середины блока.
Помогите разобраться, пожалуйста
Так и вставляйте её после бренда.
Например так (телефон в виде текста):
Если картинку, то так:
Если картинка меньше чем 50px, то соответственно добавить отступы.
Создал навигационное меню:
После него дугой контент («витрина»).
Проблема в том, что между меню и навигационным меню образовывается пробел (отступ). Firebug подсвечивает его желтым и относит к тегу nav.
Другие элементы внутри тега nav (ссылки, бренд) подсвечиваются правильно и занимают отведенную им высоту. Даже header, в котором расположен nav также занимает правильную высоту, судя по firebug.
Из за чего это может быть? Как убрать этот отступ?
Изображение
Если он Вам не нужен, то сделайте так:
.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-атрибутов:
2. С помощью JavaScript:
В данном примере под цифрой 100 понимается смещение (скролл) от экрана. При достижении этой цифры, элемент открепляется от экрана. Теперь его положение и размеры Вы должны указать. Задается это с помощью настройки класса .affix. Например положение от верха 150px, ширина 250px и т.д.
Наверно Вы не настроили класс .affix.
_http://plnkr.co/edit/VU2bROs0OVpLFzryL056?p=preview
Изображение
Я версткой раньше не занимался, но появилась такая необходимость. Пытаюсь с помощью navbar сверстать адаптивное меню для сайта.
Возможно Вы сможете мне помочь или направить)
Есть две проблемы:
1. Не пойму как настроить адаптивность при изменении разрешения.
Мое меню выглядит так:
Брэнд Меню1 Меню2 Меню3 Вход Регистрация
Вход и регистрация привязаны к правому краю.
В момент изменения разрешения, когда пункты меню уже не влазят в одну строку, происходит переход на новую. Сначала туда слетают пункты Вход и Регистрация (при этом все еще прижатые к правому краю). Т.е новая строка пустая и в самом конце два пункта.
Потом Бренд остается на 1й строчке, пункты меню на второй, а Вход и Регистрация на 3ю падает.
И только потом все это сворачивается в гамбургер.
Выглядит ужасно, а как поправить не знаю.
В идеале либо чтобы размер шрифта уменьшался (до заданного минимума) и меню оставалось в одну строку, либо чтобы сразу сворачивалось в гамбургер, как только переставало помещаться в одну строку.
2. Когда меню свернуто в гамбургер, Вход и Регистрация наезжают на другие пункты меню.
Плюс включается прокрутка, так как не все пункты помещаются в 1 экран.
Буду рад за совет где поискать и что почитать про настройку адаптации.
Наиболее просто это сделать на странице _http://getbootstrap.com/customize/#grid-system. На ней необходимо изменить значение переменной @grid-float-breakpoint на необходимое значение (например, 1000px). Данная установка будет означать, что меню navbar будет иметь мобильный вид уже с 999px. После этого необходимо скомпилировать и скачать сборку.
Можете также изменить и размер шрифта:
Для выравнивания элементов по правому краю используйте класс navbar-right.
Скорее всего Вам предётся слишком много поправлять (добавлять в свой файл 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 — это просто идентификатор, который можно указать любым. Он нужен для того, чтобы в мобильной версии меню можно было вызвать по кнопке.
2. По умолчанию Bootstrap 3 имеет двухуровневое меню.
Никак не могу решить проблему, и у Вас тоже ничего не написано.
Если меню прижать к низу, то после того как оно «схлопывается», при наведении на гамбургер оно пытается раскрыться вниз, а там конец страницы и ничего не происходит. Можно как-то сделать, чтобы оно раскрывалось вверх?
Если у Вас что-то не работает, то проверьте, есть ли ошибки (в Chrome — клавиша F12, вкладка Console).
Ваш сайт лучший!
И помощь реальная!
При добавлении скрипта взятого из второго ответа за 17 декабря вылезает проблема!
— при переключении с одного пункта меню на другой проскакивает горизонтальная прокрутка, прямо на месте меню. При третьем переключении этот эффект пропадает, до обновления страницы.
Скрипт вынесен в отдельный файл.
Cкрин прилагаю:
Скриншот
Покажите Вашу ситуацию на jsfiddle или на чём-то подобном.
Так как у меня ничего такого не возникает.
Фото
Добавить в CSS:
HTML-код:
Насколько я понимаю, Вам необходимо на sm, md и lg отображать меню с классом navbar-fixed-top, а на xs без него.
Новая проблема!
При развернутом меню, если нажать на кнопку оно не сворачивается. Мышкой еще получается по двойному или тройному клику, а вот пальцем не всегда удается. Образец взят у вас из урока. Заранее спасибо.
Извини…
Можно попросить совета, как сделать подсветку названия той категории, в которой нахожусь в данный момент? В какую категорию бы не зашел, или ничего не подсвечивается, или активен link4…
Не получается с таким кодом:
В html разобрался, а вот из css bootstrap скопировал в свой css все строчки с navbar, и меню в результате сломалось)
Так же интересно, js файлы тоже копировать для работы только меню?
Для navbar понадобится как минимум:
в Less files:
— из раздела Components: Navs, Navbar.
— из раздела JavaScript components: Component animations (includes Collapse), Dropdown (если необходимы выпадающие списки).
в jQuery plugins: Dropdown, Collapse.
После этого нажать Compile and Download и получить необходимые CSS и JS файлы.
Перед подключением из CSS файла можно удалить общие стили.
Затем использовал ваш пример:
Проблема тоже решилась, но тут же породилась новая — появляется разрыв в 50 пикселей. И как назло в таком месте, где никак не спрячешь, белый фон. Есть конечно вариант сделать очень широкой полосу с текстом, но это уже крайности. Может есть какой ещё вариант избавиться от этого? Я вот подумываю в сторону z-index, но пока ещё особо не понимаю как сделать, возможно и ошибаюсь.
Изображение
Например, добавляете ко всем необходимым заголовкам класс section:
В CSS прописываете код:
Если необходимо изменить отступ, то изменяете число 60 на какое-нибудь другое.
Кроме этого, если у Вас блок начинается с заголовка, то он имеет margin-top: 20px. Чтобы его компенсировать необходимо уменьшить высоту на 20px и соответственно назначить этому заголовку другой класс (например, section1):
1. а как сделать еще 1 уровень вложенности?
2. а как сделать, чтобы dropdown открывалось по наведению указателя, а не по щелчку?
Страница проекта:
_http://www.smartmenus.org/
Демо:
_http://vadikom.github.io/smartmenus/src/demo/
Bootstrap Second Level:
_http://codepen.io/anon/pen/BjQqPO
Код HTML:
Код CSS:
Код HTML:
Пытаюсь в css сделать так
CSS код:
В CSS Вы пытаетесь это сделать для активного пункта меню, а я как понимаю, Вам необходимо это сделать для всех. Кроме этого, у background-color нет значения none.
Вам необходимо изменить код CSS на следующий:
Для гарантии можете добавить !important.
Причем как интересно получается: в горизонтальном расположении меню, у пунктов выпадающего списка фон ЕСТЬ. А в вертикальном расположении меню (если сузить окно браузера), у пунктов выпадающего списка фона НЕТ. Странно
В 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 действительно стал адаптивным.
Данная строчка в файле bootstrap.min.js проверяет, подключен ли Tether, и если не подключен, то выбрасывает исключение.
В navbar, например, с помощью Flex это можно сделать так:
Код CSS и HTML
Стараюсь, по возможности отвечать на все комментарии :)
Фиксированное меню Bootstrap располагается поверх контента с помощью CSS свойства z-index (если значение его больше чем у другого элемента, то он располагается над ним):
Сместить контент от верхнего края страницы (body) можно указав в CSS следующее правило:
Если что-то не работает, то проверьте, подключили ли Вы файлы Bootstrap (bootstrap.css, bootstrap.js) и библиотеку jQuery. Кроме этого проверьте, если ли у Вас ошибки в консоли браузера (клавиша F12).
Куда его можно сдвинуть, если оно занимает всю ширину контейнера?
Если его необходимо поместить в некоторый блок, то сделайте разметку и поместите его в этот блок.
Бутстрап поддерживает следующие браузеры:
* Internet Explorer 8-11
Если Вам так это необходимо, то тут придётся для начала выполнить следующее действие:
А потом перейти к визуальному оформлению этих блоков и поработать с анимацией.
Скорее всего, потребуется использование события:
Для решения второго вопроса попробуйте использовать следующее решение:
Навигационное меню в bootstrap 3 class=«nav» при прокрутке страницы разделы меню подсвечиваются, указаны , пробую отменить подсветку разделов не могу найти как отключил скрипт скролла, не помогает.
Цель что бы при наведении мышкой раздел в меню подсвечивался, но при прокрутке страницы разделы не подсвечивались. Спасибо.
Вижу раздел «Пример совместного использования плагинов Affix и ScrollSpy» но описание отсутствует.
Можно так:
Было бы круто, если бы у тебя получилось выделить время и написать урок в соответствующем разделе о том, как пользоваться редкими плейсхолдерами типа [[+classnames]] и [[+attributes]], а то достаточно сложно найти по ним информацию.
Постараюсь задонатить при первой возможности на твой сайт — подобные проекты должны развиваться.
Нужно по вот такому принципу: Скриншот.
И потом разложить все это с помощью pdoMenu. Буду благодарен за пример HTML — кода.
PS. Классный upload-ер!
HTML-код меню:
Main | Services | About us | Contacts
Спасибо.
Это можно сделать с помощью стилей CSS.
Например так:
2. Подключить его к странице
3. Добавить на страницу скрипт, изменяющий анимацию компонента dropdown при его открытии и (или) закрытии:
4.Настроить временные интервалы (в примере 2000 мс) и методы easing (в примере easeInOutCubic)
Решение через @grid-float-breakpoint не подходит, так как при этом вся сетка тоже сворачивается.
У меня в меню довольно много пунктов, не могу победить эту проблему (
Используйте следующий код CSS:
Есть еще один вопрос, если можно. Использую фиксированное меню, и когда ссылка ведет на id (анкор) то меню перекрывает контекст. Для статики это решается добавлением к body свойства padding-top: 40px. А вот как быть с ссылками-анкорами не понятно.
А почему Вы используете высоту 40px? По умолчанию высота Navbar 50px, да ещё необходимо обеспечить хоть небольшой отступ (не меньше 20px). В итоге получается, что отступ необходимо задавать как минимум пикселей 70.
Помогло, правда, я использовал div[id]:before — т.к. на теге ссылок висят свои ID, позволяющие переходить дальше с клавиатуры, а делать их блочными нельзя.
Относительно высоты отступа, ввиду того, что я не профессионал, а любитель, то у меня порой стоят переводы строк. Возможно, нужно будет подумать и сделать код более чистым.
И не сочтите совсем уж за наглость, а можно как-то после перехода по ссылке, div[id] подсветить её средствами CSS?
Пришлось только поменять цвет на выделение bold, т.к. блок у нас же стал выше после :before. Но выделение цветом и не важно, главное понятно, на каком тексте фокус.
Видел вроде в самом бутстрапе есть плагины 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 (т.е. он становится фиксировано спозиционирован):
Контейнер имеет отступы по бокам. Я добавил к меню класс row.
PS. Каждый блок (шапка, контент, подвал) у меня в отдельном row.