Bootstrap 3 - Настройка компонента Navbar

Содержание:
  1. Изменение цвета navbar (навигационного меню) с помощью CSS
  2. Изменение цвета навигационного меню при создании пользовательской сборки
  3. Навигационное меню и фоновое изображение
  4. Комментарии

На этом уроке мы научимся настраивать (оформлять) компонент Twitter Bootstrap Navbar (навигационное меню) под дизайн сайта, а также рассмотрим различные варианты совмещения данного меню с фоном веб-страницы.

Изменение цвета navbar (навигационного меню) с помощью CSS

Навигационное меню в Twitter Bootstrap 3 имеет следующие цветовые стили:

  • В светлых тонах (navbar-default);
  • В тёмных тонах (navbar-inverse).

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

Но прежде чем переходить к изменению цветовой палитры компонента navbar, необходимо знать какие стили Bootstrap CSS отвечают за установления цвета данного компонента. Приведём с пояснениями часть кода CSS платформы Twitter Bootstrap 3, который отвечает за установление цвета компонента "Navbar" (навигационное меню).

Код HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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="#">Название сайта</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
      <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 class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"

aria-expanded="false">Пункт с подпунктами 1<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Подпункт 1.1</a></li>
            <li><a href="#">Подпункт 1.2</a></li>
            <li><a href="#">Подпункт 1.3</a></li>
            <li class="divider"></li>
            <li><a href="#">Подпункт 1.4</a></li>
            <li class="divider"></li>
            <li><a href="#">Подпункт 1.5</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Найти">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Пункт 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Код CSS

/* цвет фона и рамки навигационного меню */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* цвет текста, содержащий название сайта или бренда */
.navbar-default .navbar-brand {
    color: #777;
}
/* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Цвет пунктов навигационного меню */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
/* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
/* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
/* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
/* Цвет стрелочки (треугольничка), открывшегося пункта меню */
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* CSS стили для мобильных устройств */
/* Цвет рамки у кнопки, которая открывает меню */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
/* Цвет полосочек в кнопочке, которая открывает меню */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}

@media (max-width: 767px) {
/* Цвет пунктов меню в раскрывающихся списках */
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
/* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent;
    }
}

Навигационное меню Twitter Bootstrap по умолчанию

Для изменения цвета компонента "Navbar" мы будем использовать цветовую палитру, состоящую из 4 цветов.

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

Остальные два цвета будем применять для задания фона пунктов меню и рамок. Первый цвет будем использовать для установления фона меню. Второй цвет будем использовать для установления цвета фона пункта меню при поднесении к нему курсора мышки, установления цвета фона активного пункта меню, а также для открытого пункта меню и рамок.

Например: создадим навигационное меню зелёного цвета (текст: 1 цвет - #ecf0f1, 2 цвет - #d1ffed; фон: 1 цвет - #2ecc71, 2 цвет - #27ae60).

/* цвет фона и рамки навигационного меню */
.navbar-default {
    background-color: #2ecc71;
    border-color: #27ae60;
}
/* цвет текста, содержащий название сайта или бренда */
.navbar-default .navbar-brand {
    color: #ecf0f1;
}
/* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #d1ffed;
}
/* Цвет пунктов навигационного меню */
.navbar-default .navbar-nav > li > a {
    color: #ecf0f1;
}
/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #d1ffed;
}
/* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #d1ffed;
    background-color: #27ae60;
}
/* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #d1ffed;
    background-color: #27ae60;
}
/* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ecf0f1;
    border-bottom-color: #ecf0f1;
}
/* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #d1ffed;
    border-bottom-color: #d1ffed;
}
/* Цвет стрелочки (треугольничка), открывшегося пункта меню */
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #d1ffed;
    border-bottom-color: #d1ffed;
}
/* CSS стили для мобильных устройств */
/* Цвет рамки у кнопки, которая открывает меню */
.navbar-default .navbar-toggle {
    border-color: #27ae60;
}
/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #27ae60;
}
/* Цвет полосочек в кнопочке, которая открывает меню */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
/* Цвет пунктов меню в раскрывающихся списках */
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ecf0f1;
  }
/* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #d1ffed;
        background-color: #27ae60;
    }
}

Зелёное навигационное меню

Зелёный цвет Красный цвет Фиолетовый цвет Оранжевый цвет
Цвет пункта меню (текст) #ecf0f1 #ecf0f1 #ecf0f1 #ecf0f1
Цвет пункта меню (текст), при поднесении к нему курсора мышки, а также цвет активного пункта меню #d1ffed #ffbbbc #ecdbff #ffe6d1
Цвет фона пункта меню #2ecc71 #e74c3c #9b59b6 #e67e22
Цвет фона пункта меню, при поднесении к нему курсора мышки, а также цвет рамки меню #27ae60 #c0392b #8e44ad #d35400
Ссылка для скачивания CSS Скачать Скачать Скачать Скачать

Цветные навигационные меню

В зависимости от дизайна сайта Вы можете создать свою цветовую палитру для навигационного меню, состоящую из 4 цветов. Применить данные цвета можно посредством замены в файле CSS исходных цветов (например: красного navbar) на Ваши подобранные цвета.

Изменение цвета навигационного меню при создании пользовательской сборки

Изменить цвет компонента "Navbar" (навигационного меню) также можно с помощью изменения значения переменных, отвечающих за цветовую палитру данного меню, во время создания пользовательской сборки. Для этого Вам необходимо перейти на страницу Customize веб-сайта Twitter Bootstrap, на которой в разделе "Navbar" необходимо изменить значения переменных, отвечающих за цвета, на необходимые значения. После чего переместиться вниз страницы и нажать на кнопку "Compile and Download" для получения пользовательской сборки Bootstrap.

Изменение палитры цветов navbar с помощью изменения значений переменных при создании пользовательской сборки

Данный способ в отличие от вышеприведенного (с помощью файла CSS) является более предпочтительным, т.к. он не требует дополнительного подключения файла со стилями. В итоге это приводит к уменьшению времени, необходимой для загрузки веб-страницы сайта, выполненной по данному способу.

Скачать пользовательскую сборку с красным navbar

Многие веб-разработчики на сайтах размещают после навигационного меню фоновое изображение, которое придаёт веб-странице некоторый стиль и делает дизайн сайта более завершённым. В этом разделе мы рассмотрим несколько вариантов совмещения навигационного меню и фона веб-страницы.

1 Вариант

В первом варианте заставку выполним в виде фонового изображения, на которой поместим текст и расположим её после навигационного меню. Код HTML, CSS и JavaScript приведём ниже с пояснениями.

<!-- Навигационное меню -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
  ...
  </div>
</nav>

<!-- Заставка -->
<div class="splash">
  <div class="container">
    <!-- Текст, размещенный на заставке -->
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Totam rem aperiam eaque ipsa, quae ab illo inventore. Dolorum fuga deleniti

atque corrupti, quos dolores et accusamus.</p>
  </div>
</div>

...
/* Отступ сверху для содержимого body (высота navbar = 50px)*/
body
{
padding-top: 50px;
}
/* Заставка */
.splash {
/* Отступ для содержимого, помещенного в splash */
padding:9em 0 2em;
/* Картинка, которая используются для splash */
background-image:url(../img/bg.jpg);
/* Масштабируем картинку с сохранением пропорций */
background-size:cover;
/* Запрещаем фоновому изображению прокручиваться, т.е. делаем его неподвижным */
background-attachment:fixed;
/* Цвет текста */
color:#fff;
/* Выравниваем текста внутри splash по центру */
text-align:center;
}
(function(){
  $(window).scroll(function () {
      // значение, на которое сместилась страница при прокрутке
      var top = $(document).scrollTop();
      $('.splash').css({
        //задаём позицию фонового изображения
        'background-position': '0px -'+(top/3).toFixed(2)+'px'
      });
  });
})();

Навигационное меню и фоновое изображение

Демо Скачать

2 Вариант

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

<nav class="navbar navbar-default navbar-fixed-top">
  <!-- ... -->
</nav>

<div class="article container">
  <div class="row">
    <div class="col-md-8">
      <h1 class="h2 page-header">Заголовок страницы</h1>
      <!-- ... -->
    </div>
    <div class="col-md-4">
      <!-- ... -->
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <!-- ... -->
  </div>
</footer>

<!-- Подключаем плагин Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<script>
    // Устанавливаем изображение, которое будет являться фоном веб-страницы
    $.backstretch("img/bg.jpg");
</script>
/* Отступ сверху для содержимого body */
body {
padding-top:250px;
}

/* Прозрачный фон для основного содержимого */
.article {
background:rgba(255,255,255,0.88);
padding-top: 20px;
margin-bottom: 10px;
}

/* Стили для подвала страницы */
footer {
background:rgba(255,255,255,0.7);
line-height: 30px;
padding: 0 15px 0 15px;
}

Навигационное меню и фоновое изображение, выполненное с помощью плагина Backstretch

Демо Скачать

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

Илья
Илья
Добрый день! Как можно сделать ваше меню, чтобы оно было ниже шапки, но затем когда опускаешься вниз, то было сверху закреплено как и сейчас? Пример того, что я имею ввиду вот здесь: codepen.io/senff/pen/ayGvD но хочу это сделать с вашим
Александр Мальцев
Александр Мальцев
Привет!
Для создания такого меню достаточно добавить к элементу свойства «position: sticky» и «top: 0»:
<nav class="navbar navbar-default" style="position: sticky; top: 0;">
  ...
</nav>
Ссылка на пример: b3-navbar-sticky
Илья
Илья
Спасибо, получилось супер! Даже проще, чем в примере, что скинул. Теперь возник вопрос с отметкой активной страницы. Чтобы не прописывать меню на каждой странице, то я его вывожу с помощью <?php include 'menu.php'; ?>, но при таком методе я выходит не могу ставить активным в меню нужный пункт. Есть ли какой-то метод, чтобы не копировать каждый раз меню на страницу с заменой идентификатора для обозначения страницы, на которой находишься?
Александр Мальцев
Александр Мальцев
Отлично! Добавить класс active к необходимому пункту меню можно как на сервере, так и на клиенте. На сервере нужно определить какую вы страницу генерируете и соответственно вставить active в нужное место. Если на сервере не хотите, то тогда можно с помощью JavaScript, например, так:
$('.navbar').find('a').each(function() {
  if (location.href.indexOf(this.href) > -1) {
    $(this).parent().addClass('active');
  }
});
Илья
Илья
Извиняюсь за глупый вопрос, а куда этот код вставить?) Вставил код ниже в файл mynavbar.js, но ничего не происходит, если к примеру перехожу на страницу контактов.

(function(){
$('.navbar').find('a').each(function() {
  if (location.href.indexOf(this.href) > -1) {
    $(this).parent().addClass('active');
  }
});
})();
Александр Мальцев
Александр Мальцев
Выведите значения в консоль и посмотрите:
console.log('location.href = ' + location.href);
$('.navbar').find('a').each(function() {
  console.log('this.href = ' + this.href);
  if (location.href.indexOf(this.href) > -1) {
    $(this).parent().addClass('active');
  }
});
Пункт будет подсвечиваться, если «this.href» будет является частью «location.href». Если нужно по-другому, то необходимо дописать скрипт.
Roman
Roman
Здравствуйте! Пытаюсь делать все как описано, но не получается изменить фон активного пункта меню. И при отображении мобильной версии лезет какая то грязно-черная полоса. Где может быть ошибка? Спасибо!



Александр Мальцев
Александр Мальцев
Привет! Сделайте пример в какой-нибудь песочнице (JS Bin или др.), по картинке не определишь, где ошибка.
Roman
Roman
Спасибо! Уже разобрался. Мой косяк был. Недостаточно усвоил базовую теорию ), в частности вашу статью о базовой разметке бутстрапа. Все уже ОК.
Alexey
Alexey
Дополнение к первому вопросу.

Подскажите как в навбаре сделать надпись динамической в зависимости от логина, под которым входит юзер и его роли, чтобы в навбаре слева выводился логин юзера и роль?

itchief.ru/assets/uploadify/b/1/4/b146d64219c74b9b3ebea0d622cf49ba.png

itchief.ru/assets/uploadify/e/1/d/e1da88afd53fbce59b2ddc57f1f679ed.png
Александр Мальцев
Александр Мальцев
Здравствуйте! Если на сервере, то вам нужно знать где это храниться или как это получить. После этого указать эту переменную вместо названия сайта.
Например:
<a class="navbar-brand" href="#"><?php echo $user;?></a>
Alexey
Alexey
Спасибо
Alexey
Alexey
Здравствуйте!
Подскажите как в навбаре сделать надпись динамической в зависимости от логина, под которым входит юзер, чтобы в навбаре слева выводился логин юзера?
Sergey
Sergey
Здравствуйте, Александр. Подскажите с разделителями в меню навбар. Хочу установить разделитель между вкладками меню (фон вкладок — прозрачный, поэтому выделяется только ссылка).

<nav role="navigation" class="navbar navbar-inverse navbar-fixid-top">

	  				<div class="container"> <!-- 1 -->

	  					<div class="navbar-header header">

    					<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    						<span class="sr-only">Toggle navigation</span>
    						<span class="icon-bar"></span>
    						<span class="icon-bar"></span>
    						<span class="icon-bar"></span>
    					</button>
    				</div><!-- navbar-header -->

    				<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">

    					<ul class="nav nav-pills">
    						<li class="active"><a href="#">Home</a></li>
    						<li class="divider">|</li>
    						<li><a href="#">Our service</a></li>
    						<li class="divider">|</li>
    						<li><a href="#">Gallery</a></li>
    						<li class="divider">|</li>
    						<li><a href="#">Contact</a></li>
    					</ul>
  				</div><!-- id navbarCollapse -->
    			</div> <!-- container/nav -->
    		</nav>
В СSS задаю стиль
.navbar.nav.divider {
color: red;
}

РАЗДЕЛИТЕЛЬ НЕ РЕАГИРУЕТ (обращение к селектору не правильное либо свойство указанно не правильно либо Ваш вариант)
Нужно не только ему цвет задать, но и размер сделать по высоте вкладок меню.
Сейчас это выглядит так(((

Возможно существует иной, лучший, способ достижения описанной цели?

Спасибо
Александр Мальцев
Александр Мальцев
Здравствуйте!
Можно не добавлять дополнительные элементы, а реализовать это с использованием CSS-свойства border-right или через псевдоэлементы.
Пример, в котором показано как добавить вертикальные линии в качестве разделителей пунктов меню.
Sergey
Sergey
Спасибо, буду разбираться далее!
Sergey
Sergey
Александр, теперь у меня, в связи с этим, возникли новые вопросы!
до использования вашего кода, выравнивая по центру меню на маленьких экранах задалось в медиазапросе:
@media (min-width: 768px) 
.nav-pills>li {
		float: none;
	}

	.nav-pills {
		text-align: center;
	}
код немного изменился, изменил и я медиазапрос:
    @media (min-width: 767px) {
.navbar-collapse li {
        border-right: 1px solid #616161;
      }

.navbar-collapse li:last-child {
        border-right: none;
      }

.navbar-nav>li> {
		float: none;
	}

.navbar-nav 
		text-align: center;
	}
Меню все равно прижато к левому краю.

Спасибо!
Sergey
Sergey
пошел к обратному — назад исправив свой документ и применил лишь медиазапрос Ваш! Все стало на свои места, как и предполагалось. На данном этапе — пробую создать копию по учебному материалу, но внося некоторые дополнения. Копия 1/1 уже готова и мне показалось, что я почти освоил верстку…
Очевидно, мне еще предстоит много чего узнать! Например, я cразу и не увидел разницу, но она есть:
@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
	}

	.nav-pills {
		text-align: center;
	}

	.header h1 { 
	    font-size: 280%;
	    letter-spacing: 5px;
	}

	.header {
		text-align: center;
	}
} 

 @media (min-width: 767px) {
.navbar-collapse li {
        border-right: 1px solid #616161;
      }

.navbar-collapse li:last-child {
        border-right: none;
      }
}
Спасибо, таким людям, как Вы!
Александр Мальцев
Александр Мальцев
Пожалуйста! Рад, что помог.
Oleksandr
Oleksandr
Как сделать меню, чтобы в мобильной версии не было полосочки, только кнопка:
как здесь, то-есть как вынести кнопку за переделы блока: getinstance.info/articles/css/responsive-menu/
<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>
  <a class="navbar-brand" href="#">Brand</a>
</div>
R
R
Александр, приветствую. Подскажите, пожалуйста, как вместо dropdown (или в самом элементе) сделать картинку? Естественно, с сохранением функций. Спасибо!
Vladimir
Vladimir
При загрузке сайта с телефона меню по умолчанию раскрыто. Как его скрыть, чтобы открывалось только при нажатии на иконке?
Александр Мальцев
Александр Мальцев
Удалить класс in у элемента navbar-collapse:
...
<nav class="navbar-collapse collapse" id="navbar">
...
</nav>
...
Добавить collapsed к элементу с классом navbar-toggle:
...
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">...</button>
...
Vladimir
Vladimir
Спасибо! И статья отличная!
Вадим
Вадим
Александр добрый вечер, подскажите как можно при нажатии (когда меню открыто) на:

<button type="button" data-toggle="collapse" data-target="#menu-top" aria-expanded="false" class="navbar-toggle collapsed"></button>
Добавлять дополнительный класс к:

<nav class="navbar navbar-default red"></nav>
А при закрытии убрать его!
Михаил
Михаил
$(document).ready(function(){
  $(".collapse").on('show.bs.collapse', function(){
    $('.navbar-default').addClass('red');
  });
  $(".collapse").on('hide.bs.collapse', function(){
    $('.navbar-default').removeClass('red');
  });
});
Архаил
Архаил
Александр, добрый день. Подскажите, как сделать чтобы на мобильной версии при адаптации, подменю- (dropdown-menu) выпадало плавно и плавно скрывалось.
Александр Мальцев
Александр Мальцев
Здравствуйте, Архаил!
Добавьте на страницу (после подключения js файла Bootstrap) следующий скрипт:
$(function(){
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            $('.dropdown').removeClass('open');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});
Архаил
Архаил
Добавил, но появился баг, при нажатии на разворачивании другого раздела, предыдущее выпадающее под-меню (class=«dropdown-menu») остается висеть поверх меню со стилем (display: block) не скрывается и так с каждым разделом, не отрабатывает скрытие.
Александр Мальцев
Александр Мальцев
Немного поправил.
Попробуйте так:
$(function(){
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
	var self = this;
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            $(self).removeClass('open');
            $(self).find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});
Архаил
Архаил
Благодарю! сейчас все работает корректно!)
Максим Хализов
Максим Хализов
Добрый день, Александр! Всех благ в ваш дом! Подскажите пожалуйста по свойству border. Заказчик хочет чтобы у кнопок в виде рамки были только уголки, левый верхний и правый нижний углы. Остальное нужно скрыть. Так ещё и хочет чтобы линии от углов плавно переходили в прозрачность. А сами уголки имели свечение. Ни приложу ума как выполнить этот каприз( помогите пожалуйста.
Александр Мальцев
Александр Мальцев
Здравствуйте!
Для этого необходимо использовать абсолютное позиционирование.
В navbar элементам li по умолчанию уже назначено относительное позиционирование. Ваша задача — это добавлять элементы в li, устанавливать им абсолютное позиционирование, позиционировать их с помощью CSS-свойств left, top, right, bottom и что-то с помощью них выводить.
Например, для того чтобы вывести треугольники понадобится 4 элемента. С помощью псевдоэлементов ::after и ::before можно создать только 2. Поэтому этот вариант в данном случае не подойдёт, придётся добавлять элементы в li.
HTML-код:
<ul class="nav navbar-nav">
  <li class="active"><a href="#">Ссылка 1<span class="sr-only">(текущая)</span></a>
    <span class="top-left"></span>
    <span class="top-left-offset"></span>
    <span class="bottom-right"></span>
    <span class="bottom-right-offset"></span>
  </li>
  <!-- ... -->
CSS-код:
.navbar-nav>.active>a,
.navbar-nav>.active>a:focus,
.navbar-nav>.active>a:hover {
  background-color: #f8f8f8 !important;
}
.top-left {
  position: absolute;
  left: 3px; top: 3px;
  border: 10px solid transparent;
  border-left: 10px solid red;
  border-top: 10px solid red;
}
.top-left-offset {
  position: absolute;
  left: 5px; top: 5px;
  border: 10px solid transparent;
  border-left: 10px solid #f8f8f8;
  border-top: 10px solid #f8f8f8;
}
.bottom-right {
  position: absolute;
  right: 3px; bottom: 3px;
  border: 10px solid transparent;
  border-right: 10px solid red;
  border-bottom: 10px solid red;
}
.bottom-right-offset {
  position: absolute;
  right: 5px; bottom: 5px;
  border: 10px solid transparent;
  border-right: 10px solid #f8f8f8;
  border-bottom: 10px solid #f8f8f8;
}
Так будет выделяться активный пункт меню:
Bootstrap Navbar - активный пункт меню выделяется с помощью стрелочекДобавление другого оформления будет осуществляться аналогичным способом.

Другой способ это осуществить можно с помощью canvas и JavaScript.
Влад
Влад
Здравствуйте, Александр! Может я что то не понимаю но у меня
<nav id="site-navigation" class="main-navigation" role="navigation">
а navbar я нигде не вижу, а хочу сделать меню с левой стороны вертикально согласно дизайну
Александр Мальцев
Александр Мальцев
Здравствуйте, Влад. Если вы хотите сделать вертикальное меню на основании классов Bootstrap, то тогда используйте следующую конструкцию:
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
</ul>
Stas
Stas
а как сделать чтобы меню при нажатии на кнопку выпадало вверх, на примере стандартного bootstrap? тоесть в обычном состоянии оно выпадает вниз и сдвигает весь контент, а как сделать чтоб оно открывалось вверх и тоже сдвигался контент как на картинке
Александр Мальцев
Александр Мальцев
Очень просто.
Необходимо блок с классом navbar-collapse расположить до блока с классом navbar-header, т.е. поменять их местами.
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="collapse navbar-collapse" id="main-menu">
      ...
    </div>
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" 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>
</nav>
Сергей
Сергей
Привет! Подскажите, пожалуйста, при переходе на страницу не подсвечивается фон активной кнопки меню. Получается, что если я напишу код #ссылка, то фон будет всегда подсвечен возле этой одной кнопки. Но так как меню у меня заключено в <?php include 'menu.php'; ?>, то он получается одинаковым для всех страничек. Получается, что всегда подсвечена только одна ссылка. А мне бы сделать так, чтобы пользователь видел подсвеченный фон той кнопки, на которую он нажал при переходе. Надеюсь, понятно рассказал. Подскажите, пожалуйста, буду благодарен!!!
Александр Мальцев
Александр Мальцев
Если вы хотите сделать это на стороне клиента, то необходимо написать сценарий JavaScript. Данный код должен после загрузки страницы определить текущий адрес страницы (location.pathname) и найти ему соответствующий пункт меню. После этого для найденного элемента a (anchor) определить li и добавить к нему класс active.
$(function() {
  // перебрать все элементы a меню navbar
  $('.navbar-nav a').each(function() {
    // определяем, является ли искомый пункт нужным
    if (($(this).prop('href').toString()).indexOf((location.pathname.slice(1).toString())) !== -1) {
      // добавляем к родительскому пункту класс active
      $(this).parent('li').addClass('active');
      // прерываем дальнейшее выполнения метода each
      return false;
    }
  });
});
Но всё это зависит от того, как реализовано меню.
Кроме этого меню необходимо включать на страницу без класса active. Это позволит не выполнять после загрузки страницы лишние действия по его удалению, что немного увеличит быстродействие.
Сергей
Сергей
Вы Гений!!!
Аноним
Аноним
Добрый день.
Подскажите пожалуйста как настроить меню так чтобы такая кнопка как на мобильной версии была и с компьютера выпадающее меню как на скриншоте.

Заранее спасибо
Александр Мальцев
Александр Мальцев
Как сделать такое меню можно посмотреть, перейдя по следующей ссылке (jsfiddle.net):
Меню с кнопкой dropdown
Аноним
Аноним
Здравствуйте! Подскажите как сделать фон меню прозрачным? Устанавливал opacity для всего меню, только и текст ссылок получается прозрачным. А надо что б только фон. За ним видна картинка шапки сайта. Спасибо! И за урок тоже!!!
Аноним
Аноним
в своей таблице написать:
.navbar {
    background-color: rgba(255, 255, 255, 0);
}
Аноним
Аноним
Подскажите пожалуйста как можно прикрепить navbar-brand справа к кнопке свёрнутого меню collapse только на маленьких разрешениях? Как скрыть — понятно — через .hidden-xs и .hidden-sm а как сместить вправо?
Вот как-то так:

Заранее спасибо.
Александр Мальцев
Александр Мальцев
Добавить в свой файл CSS:
.navbar-brand {
  float: right !important;
}
Аноним
Аноним
Туплю. Спасибо. Я так понимаю, для того, чтобы данный костыль работал только на мобильных версиях, надо использовать медиазапросы? А стандартными средствами бутстрапа не получится?
Аноним
Аноним
Сам нашёл: класс pull-right
Спасибо за наводку
Аноним
Аноним
После перехода по пункту меню — меню не закрывается и загораживает пол-экрана.

Куда копать?
Александр Мальцев
Александр Мальцев
Попробуйте добавить на страницу следующий скрипт:
<script>
$(function(){
  $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
      $(this).collapse('hide');
    }
  });
});
</script>
Аноним
Аноним
Здравствуйте, статья супер. Но у меня почему-то в стили бутстрапа не стилизируються в CSS. Никакой реакции. В чем может быть проблема?
Александр Мальцев
Александр Мальцев
Здравствуйте, спасибо.
Представленные стили необходимо вставлять в свой файл CSS, который должен быть подключен после основного файла bootstrap.min.css. Или если его нету, то создать и подключить его после bootstrap css с помощью тега link.
Или можете прямо вставить на страницу. Для этого создайте в разделе head после bootstrap css элемент style и вставьте туда код css.
<style>
  ...
</style>
Аноним
Аноним
У вас в примере есть картинка после меню с эффектом паралакса(фоновое изображение) Не подскажете, как менять ее размер? Спасибо!
Александр Мальцев
Александр Мальцев
В примере высота элемента, содержащее фоновое изображение, определяется в зависимости от содержимого, которое в него помещено и внутренних полей до этого содержимого (вверху — 9em, снизу — 2em и 0em — справа и слева).
.splash { 
  padding: 9em 0 2em;
}
Но никто Вам не мешает установить данному элементу фиксированную высоту
.splash { 
  height: 150px;
}
или фиксированную на определённом диапазоне
.splash {
  height: 100px;
}
@media (min-width: 768px) {
  .splash {
    height: 125px;
  }
}
@media (min-width: 992px) {
  .splash {
    height: 250px;
  }
}
@media (min-width: 1200px) {
  .splash {
    height: 200px;
  }
}
Аноним
Аноним
Огромное вам спасибо!
Аноним
Аноним
Суть проблемы: при разрешении экрана 675 пикселей и меньше появляется отступ, который хотелось бы убрать. Меню .navbar-static-top. Ну и картинки для примера
itchief.ru/assets/uploadify/6/f/3/6f3c4c58bbb6e2dc7d39c59b51fd00c5.png
itchief.ru/assets/uploadify/2/2/b/22b89d3b47841aaa3287cb6692604c14.png
Александр Мальцев
Александр Мальцев
По одним картинкам сложно определить. Желательно привести страницу на jsfiddle.net или подобном сервисе.
Аноним
Аноним
Здравствуйте. Помогите пожалуйста в очередной раз. При уменьшении монитора до смартфона появляется белая полоса сбоку, т.е все блоки сжимаются, а меню не до конца, оставляя под собой полосу. Может я чё в стилях перемудрил?
itchief.ru/assets/uploadify/9/2/3/923532ff220b620bd71c020ff60851f0.png
Аноним
Аноним
И ещё вопрос. Возможно ли расположить список в открывающемся меню не по левую сторону, а по правую, или по середине?
Аноним
Аноним
По второму вопросу разобрался. Помог обычный text-align для списка ( это так, может кому тоже будет нужно). Ну а с первым никак, help…
Александр Мальцев
Александр Мальцев
Здравствуйте. Проверьте, может отступы padding или margin. В таких случаях желательно изучать страницу с помощью панели разработчика (Ctrl+Shift+I). В этой панели есть вкладка Elements. А в ней вкладка Styles. На этой вкладке (Styles) отображаются стили, которые применены к выбранному элементу. Выбор элемента осуществляется либо визуально на странице, либо в дереве, которое расположено во вкладке Elements. Используя эти инструменты попробуйте изучить то, что Вы там перемудрили.
Аноним
Аноним
В классе .row пропишите margin-left: 0; и margin-right: 0;
Аноним
Аноним
Здравствуйте!

Необходимо частично отключить адаптивность меню на мобильных, оставить только автовыравнивание по ширине.

Прописал css указанные на bootstrap сайте.

1. На компьютере отображается как надо.
itchief.ru/assets/uploadify/1/a/0/1a0442f6577dcc3b2dad8a3e3d89ebb2.png

2. Пробовал на телефоне, все равно складывается, гугл тест тоже складывает.
itchief.ru/assets/uploadify/e/a/9/ea915404a7a76681f3f11cba9357250d.png

В чем может быть проблема?
Александр Мальцев
Александр Мальцев
Если Вы хотите отключить схлопывание меню, то лучше этого сделать через собственную сборку, например на странице customize.
Для этого Вам необходимо будет установить переменной@grid-float-breakpoint значение 0.
Посмотрите этот комментарий:
itchief.ru/lessons/bootstrap-3/38-bootstrap-3-navigation-menu#comment-2034
Аноним
Аноним
А вот, все… Решил проблему
Вот так прописал
.navbar .dropdown-menu li {
  background-color: #fff;
}
Аноним
Аноним
А вот у меня такой вопрос.
При нормальном просмотре на компе выпадающий список белого цвета,
если к примеру меню красное. А при адаптивном виде выпадающий список
такого же цвета как и меню, тоже красный.
Подскажите, какие классы отвечают за фоновый цвет выпадающего списка
при адаптивном просмотре?
Аноним
Аноним
Отличная статья! Автору +… Возможно еще смогу получить ответ на свой вопрос по Collapse Accordion group list: заметил очень неудобную штуку, когда так называемая гармошка расположена внизу страницы и выпадает вниз за область просмотра, в итоге нужно скролить страницу вниз, бывает наоборот, когда скролом пропустил гармошку вверх области просмотра, а потом решил её расскрыть — она выпадает наверх:(
Возможно ли как то задавать направление для этой самой гармошки и можно ли как-то закрепить область просмотра гармошки, чтобы выпадающие списки оставались в поле зрения (в области просмотра, без необходимости скролить страницу)???
Заранее спасибо
Александр Мальцев
Александр Мальцев
Спасибо.
Самый простой способ сделать так, чтобы гармошка открывалась вверх — это поменять блоки контента и заголовка местами:
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
      <div class="panel-body">
        Содержимое 1...
      </div>
    </div>
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Заголовок 1
        </a>
      </h4>
    </div>
  </div>
</div>
Другой способ — это предоставить блоку (гармошки) пространство для открытия сверху и убрать возможность ему открытия вниз. Для этого всё содержимое гармошки необходимо обернуть в блок с классом header-up и добавить следующие CSS-стили:
.panel-group {
  position: absolute;
  width: 100%;
  bottom: 0;
  margin: 0
}
.header-up {
  padding: 0;
  position: relative;
  height: 300px;
}
<div class="header-up">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    ...
  </div>
</div>
Вторая часть вопроса немного не понятна. Если Вы хотите чтобы гармошка была всегда в области просмотра, то используйте Affix.
Если нужно прокручивать программно, то попробуйте следующее:
$('#accordion').on('shown.bs.collapse', function (e) {
   var id = $(e.target).prev().find("[id]")[0].id;
   $('html, body').animate({
     scrollTop: $("#" + id).offset().top
   }, 1000);
})
Аноним
Аноним
Увы, самый простой способ не подошел, он буквально меняет местами заголовок и содержание, при таком варианте во время просмотра создается вппечатление что контент нижней вкладки относится к закрытому (.collapse) заголовку, который расположен выше(((
Александр Мальцев
Александр Мальцев
Попробуйте тогда 2 вариант.
Аноним
Аноним
Подскажите как можно убрать полосу прокрутки которая появляется при раскрытии кнопки на маленьких экранах?
Александр Мальцев
Александр Мальцев
Что за полоса прокрутки и как она возникает? Опишите подробнее.
Аноним
Аноним
Здравствуйте, Александр!
Меню по умолчанию может сворачиваться в кнопку, саму кнопку можно настроить под себя или заменить на рисунок. А как сделать, чтобы вместо кнопки подключался слайдер, например, типа elastislide?
Аноним
Аноним
Здравствуйте.
Пожалуйста подскажите
Столкнулся с проблемой преобразования navbar'a в открывающую его кнопку при ширине 767 и меньше px. Как убрать эту фичу?
Александр Мальцев
Александр Мальцев
Наиболее просто это осуществить с помощью изменения переменной LESS @grid-float-breakpoint на значение 0, например, на странице getbootstrap.com/customize/.
Вот ссылка на сборку Bootstrap, у которой переменная @grid-float-breakpoint имеет значение 0:
getbootstrap.com/customize/?id=37773b5afa0006199c9c7af096003264

Аноним
Аноним
Разобрался все просто достаточно добавлять высоту только если навбар не изменился.

@media (min-width: 769px) {
.mynavbar {
height: 105px;
}
}
Аноним
Аноним
У меня проблема скомпилил себе navbar на странице getbootstrap.com/customize/ высота 100.
Добавляю бордер navbar'у border-bottom: 5px solid #dddddd;.
Получаю следующее высота navbar увеличивается на 5px. а мне надо сделать как тут (http://openaddon.com/joomla/vt_family/index.php) то есть кнопочка и нижний боредер соприкасаются.
Если указать жестко высоту height: 100px;. То мобильная версия самой собой не работает(((
Подскажите как сделать, замучился.
Аноним
Аноним
Спасибо большое автору! Хорошая статья!
Аноним
Аноним
Здравствуйте. Почему то при уменьшении размера экрана меню фиксируется с небольшим опозданием, и чем меньше экран, тем больше опоздание. Нельзя ли изменить скрипт чтобы было точнее вычисление при уменьшении экрана, или может в свойствах надо что дописать?
Александр Мальцев
Александр Мальцев
Не знаю что у Вас тормозит. Время за которое элемент переходит из одного состояние в другое составляет 0-2мс. Может быть у Вас это действие выполняется с анимацией. Вот простенький скрипт, который позволяет получить время за которое элемент переход из состояния affix-top в affix и обратно.
<script>
 $('#myAffix').on('affix.bs.affix',function(){
  console.time('timer1');
 });
 $('#myAffix').on('affixed.bs.affix',function(){
  console.timeEnd('timer1');
 });
 $('#myAffix').on('affix-top.bs.affix',function(){
  console.time('timer2');
 });
 $('#myAffix').on('affixed-top.bs.affix',function(){
  console.timeEnd('timer2');
 });
</script>
Аноним
Аноним
Разобрался. Всё со скриптом хорошо, просто после каждого уменьшения экрана надо перезагрузить страницу(ну а иначе как скрипт сработает?). Казалось бы логично, а сколько нервов попортило :) Большое спасибо за все ваши ответы
Dmitry
Dmitry
Александр, только начал вникать в Bootstrap). Подскажите, а как не меняя особо поставку (а например, в своей дополнит. CSS), сделать чтобы сверху фиксированного меню типа navbar-fixed-top была небольшой высоты строка, куда размещу типа header (логотип, название сайта, телефон...)?
Dmitry
Dmitry
вот пример, что хочется… _http://p120.createme.tk/
шапка над фиксированным меню, при прокрутке шапка может исчезать…
Александр Мальцев
Александр Мальцев
Это делается в Bootstrap 3 с помощью Affix.
1. Фиксированная шапка.
HTML:
<body>
  <header id="header">
    <div class="container-fluid">
      <div style="height: 100px; background-color: green;"></div>
    </div>
  </header>
  <nav class="navbar navbar-default" id="myAffix" data-spy="affix" data-offset-top="100">
    <div class="container-fluid">
      ...
    </div>
  </nav>
  ...
CSS:
.affix {
  top: 0;
  width: 100%;
}
2. Если Вы не знаете какая будет высота шапки, то необходимо написать функцию, которая будет вычислять высоту шапки автоматически.
HTML:
<body>
  <header id="header">
    <div class="container-fluid">
      <div style="height: 100px; background-color: green;"></div>
    </div>
  </header>
  <nav class="navbar navbar-default" id="myAffix">
    <div class="container-fluid">
      ...
    </div>
  </nav>
  ...
CSS:
.affix {
  top: 0;
  width: 100%;
}
JavaScript:
$(function(){
  $('#myAffix').affix({
    offset: {
      top: function () {
        return (this.top = $('#header').outerHeight(true))
      }
    }
  });
});
Аноним
Аноним
Подскажите пожалуйста, что в bootstrap отвечает за толщину навбара. Можно ли его сделать уже?
Александр Мальцев
Александр Мальцев
1. С помощью CSS (например, 30px):
.navbar-nav > li > a, .navbar-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 30px;
}
.navbar {
  min-height:30px !important;
}
2. Собрать свою сборку (на странице _http://getbootstrap.com/customize/ или с помощью изменения переменной LESS). За высоту navbar отвечает @navbar-height.
Аноним
Аноним
как сделать на размере lg margin-left:100px;
а на md margin-left:50px;
Александр Мальцев
Александр Мальцев
Например, изменить у элементов, имеющих класс block:
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .block {
    margin-left:50px;
  }
}
@media screen and (min-width: 1200px) {
  .block {
    margin-left:100px;
  }
}
Аноним
Аноним
Подскажите, пожалуйста, как поменять цвет у класса icon-bar в Toggle navigation при hover?
Скажем я хочу, чтоб полоски «гамбургера» были красными при наведении курсора, и когда кнопка в состоянии «active».
Александр Мальцев
Александр Мальцев
Здравствуйте, можете использовать следующий скрипт:
$(function() {
  var color = '#ff0000';
  var show = false;
  var active = false;
  $('.navbar-default .navbar-toggle').hover(
    function(){
      $('.navbar-default .navbar-toggle .icon-bar').css('background-color',color);
    },
    function(){
      if (show==true) return;
      if (active==true) return;
      $('.navbar-default .navbar-toggle .icon-bar').css('background-color','#888');
    }
  );
  $('.navbar-default .navbar-toggle')
    .focus(function(){
      active = true;
      $('.navbar-default .navbar-toggle .icon-bar').css('background-color',color);
    })
    .blur(function() {
      if (show==true) return;
      active = false;
      $('.navbar-default .navbar-toggle .icon-bar').css('background-color','#888');
  });
  //#navbar-collapse - id блока, имеющего класс .navbar-collapse
  $('#navbar-collapse').on('show.bs.collapse', function () {
    show = true;
    $('.navbar-default .navbar-toggle .icon-bar').css('background-color',color);
  });
  //#navbar-collapse - id блока, имеющего класс .navbar-collapse
  $('#navbar-collapse').on('hide.bs.collapse', function () {
    show = false;
  });
});
Решение конечно не самое оптимизированное получилось :)
Аноним
Аноним
Большое спасибо за ответ. Решение, и правда, впечатляет. Это ж не лень вам было время тратить :)
Обязательно попробую и отпишу.
Александр Мальцев
Александр Мальцев
Набросал то его сразу. А вот оптимизировать его как-то или записать более элегантно не получилось :) Может кто-то из посетителей предложит более простой и интересный вариант.
Аноним
Аноним
Здравствуйте, скажите а как сделать свои размеры навигационной панели, мне нужно ширина 960px высота 100px? И все кнопки в левую сторону а лого в правую
Александр Мальцев
Александр Мальцев
Высоту navbar можно установить различными путями:
1. С помощью CSS:
.navbar-brand,
.navbar-nav>li>a {
  height: 100px;
  line-height: 100px;
  padding-top: 0;
}
2. Собственная сборка с высотой navbar 100px: _http://getbootstrap.com/customize/
3. С помощью переменной LESS.

Если Вам нужна фиксированная ширина (960px), то так:
.navbar {
  width:960px !important;
  margin-left: auto;
  margin-right:auto;
}
Но т.к. ширина панели будет фиксированной, то некоторую разметку можно убрать:
<nav class="navbar navbar-default">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">1 Ссылка</a></li>
    <li><a href="#">2 Ссылка</a></li>
  </ul>
</nav>
Ну и добавить некоторые стили для того чтобы выровнять элементы и убрать сворачивание:
.navbar-nav {
  margin:0;
  float:left;
}
.navbar-nav > li {
  float:none;
  display:inline-block;
}
.navbar-nav > li.open > ul.dropdown-menu {
  position: absolute;
  border: 1px;
  background-color: #fff;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-brand {
  float: right !important;
}
Аноним
Аноним
Подключил bootstrap все работает меню работает блоки и все такое только дефолтное а вот стили не сторонние например ваши подгружаются только с применением !important
Александр Мальцев
Александр Мальцев
Их необходимо располагать или подключать после строчки, в которой Вы подключаете bootstrap.min.css.
Аноним
Аноним
Здравствуйте. Как сделать navbar-fixed-top по центру. Не как не получается.
Код
<div class="container-fluid  menu-border">
<nav role="navigation" class="navbar navbar-default ">
<div class="container">
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <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 id="navbarCollapse" class="collapse navbar-collapse ">
 <ul id="nav" class="nav navbar-nav  pull-center ">
<li><a href="#">ГЛАВНАЯ</a></li>
<li class="gic"><a href="#">О КОМПАНИИ</a></li>
<li class="gic"><a href="#">КАТАЛОГ</a></li>
<li class="gic"><a href="#">САНТЕХНИЧЕСКИЕ УСЛУГИ</a></li>
<li class="gic"><a href="#">СКИДКИ</a></li>
<li class="gic"><a href="#">ОПЛАТА И ДОСТАВКА</a></li>
<li class="gic"><a href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</nav>

</div>

.menu-border{background-color:#fff;margin-top:10px;border-top:1px solid #858585;border-left:1px solid #858585;border-right:1px solid #858585;}
.navbar { position: relative;min-height: 40px;margin:0px;width:100%;  }
.navbar-default {background-color:#fff; color:#000;border-style: none; }
#nav{background-color:#fff;color:#000;font-size:12px;font-weight:bold;font-family:Times New Roman;}
.navbar-default .navbar-nav > li > a{color: #000;background-color: transparent;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: rgb(51, 51, 51);background-color:#e3e3e3;}
.nav > li > a {position: relative;display: block;padding: 10px auto;color: #000;}
Александр Мальцев
Александр Мальцев
Здравствуйте.
Добавьте добавьте в конце вашего CSS следующий код.
CSS код
@media (min-width: 768px) {
  .navbar .navbar-collapse ul {
    position:relative;
    left:50%;
    float:left;
    margin-right:0;
    margin-left:0;
  }
  .navbar .navbar-collapse li {
    position:relative;
    right:50%;
    float:left;
    margin:0;
    list-style:none;
  }
}
Аноним
Аноним
Спасибо ) НО появляется полоса прокрутки. Что не так?
Аноним
Аноним
спасибо. С новым годом! не могу разобраться как в выпадаюшем верхнем меню подсветку при наведении курсора сделать. у меня вордпресс с бутстрап шаблоном. цсс поправляю как могу, но результата нет. верхнее меню подсвечивается без проблем, а выпадающее никак. в стилях собакаа порылась. если знаете, помогите.
Александр Мальцев
Александр Мальцев
Андрей, с новым годом!
Ответ на данный вопрос смотри в этом комментарии. А именно в (2) Стили для dropdown-menu:
Если не будут применяться, то добавьте !important:
.navbar .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: #262626 !important;
  background-color: #f5f5f5 !important;
}
Aleksandr Ustinov
Aleksandr Ustinov
все сделал! нашел дублера в css
Aleksandr Ustinov
Aleksandr Ustinov
Код работает но что то не то, мне нужно что бы меню «полосочки» появлялось лишь тогда когда когда я захочу(с определенного момента) а именно «На устройствах имеющих средний размер экрана (md)» а оно появляется только лишь на «На устройствах имеющих маленький размер экрана (sm)» а если я ставлю разные цифры в начале ((1) Измените 1000 на необходимое Вам значение и вставьте стили в Ваш файл CSS:) то меню просто меняет центрирование с правого на левое на данной ширене экрана
Aleksandr Ustinov
Aleksandr Ustinov
_test.theone1.ru это сайт который делаю
Александр Мальцев
Александр Мальцев
Должно работать.
Посмотри на http://jsfiddle.net/itchief/agq7wq1g/.
Или что-то другое хочешь?
Aleksandr Ustinov
Aleksandr Ustinov
самое главное там работает! а у меня на сайте нет! Сворачивает в меню только на 750
Aleksandr Ustinov
Aleksandr Ustinov
Доброго времени суток! Подскажите пожалуйста
(1)как сделать так что бы Toggle navigation появлялась не на маленькх а например на среднем экране.И еще вопрос
(2)как переопределить стили для выпадающего меню Toggle navigation
Спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте, Александр.
(1) Измените 1000 на необходимое Вам значение и вставьте стили в Ваш файл CSS:
@media (max-width: 1000px) {
  .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;
  }
}
(2) Стили для dropdown-menu:
.navbar .dropdown-menu {
  /* цвет фона dropdown */
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar .dropdown-menu .divider {
  /* цвет разделителя */
  background-color: #e5e5e5;
}
.navbar .dropdown-menu > li > a {
  color: #333333;
}
.navbar .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: #262626;
  background-color: #f5f5f5;
}
.navbar .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #337ab7;
}
Aleksandr Ustinov
Aleksandr Ustinov
спасибо
Аноним
Аноним
У кого то была проблемы с прыгающей нав панелью фиксированной при быстром скролинге?
Александр Мальцев
Александр Мальцев
Проверьте Ваши стили…
Такой проблемы у компонента нет.
Аноним
Аноним
Здравствуйте! А как реализовать меню чтобы вместо navbar-header была картинка? Я пробовал, но макет при этом ломается
Dmitriy
Dmitriy
Немного дополню вопрос выше: картинка в navbar-header больше стандартной высоты navbar-header, если переопределить высоту на фиксированную, то ломается адаптивность
И мой вопрос: в пунктах меню есть картинка и текст, как убрать картинку, когда меню сворачивается в кнопку на маленьких экранах
ПС спасибо автору за уроки!
Александр Мальцев
Александр Мальцев
Здравствуйте.
По умолчанию данная область (navbar-brand) имеет высоту 20px. Она получается следующим образом:
50px (высота navbar) — 30px (внутренние отступы padding сверху и снизу по 15px, которые задаются с помощью класса .navbar-brand).
<a class="navbar-brand" href="#">Brand</a>
Если вы хотите поместить туда картинку, большего размера, например с высотой 30px, то надо тогда изменить эти отступы на 10px (50-10*2=30px):
<!-- CSS: -->
.navbar-brand {
  padding: 10px 15px !important;
}
<!-- HTML -->
<a class="navbar-brand" href="#">
  <img src="1.jpg" height="30">
</a>
А если вы хотите поместить туда картинку с высотой 40px, то надо тогда изменить эти отступы на 5px (50-5*2=40px):
<!-- CSS: -->
.navbar-brand {
  padding: 5px 15px !important;
}
Александр Мальцев
Александр Мальцев
Я так и не совсем понял, Вы хотите переопределить navbar-brand или весь navbar-header.

Если Вы хотите попенять кнопку в navbar-header, то можно сделать так:
1. Переопределить отступы в CSS:
.navbar-toggle {
  padding: 0px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  border: none !important;
}
2. Заменить navbar-header на следующий HTML-код:
    <div class="navbar-header">
      <a class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-
navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <img class="img-rounded" src="1.jpg" height="56">
      </a>
    </div>
В этом случае вместо кнопки открывающей меню будет картинка высотой 56px.

Убрать картинки в меню на xs (<768px) можно используя следующий CSS-код:
@media (max-width: 768px) {
  .navbar .nav img{
    display: none;
  }
}
Андрей
Андрей
Попытался поставить логотип в navbar-brend, но он почему-то съезжал вниз, пока не указал выравнивание align=«left».
Но при установке картинки 40px текст бренда становится не по середине полосы navbar. Можно его выровнять по центральной линии?
И еще вопрос по navbar — выпадающее меню при широком экране всегда белое, или его цвет тоже можно настроить?
Александр Мальцев
Александр Мальцев
Может какие-то Ваши стили это изменяют. Проверьте на чистом Bootstrap без использование своих стилей.
Выпадающее меню — это dropdown-menu. Попробуй его настроить с помощью изменения стилей, представлено в этом комментарии:
itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-902
Андрей
Андрей
На чистом Bootstrap на черной стандартной теме выпадающее меню на полном экране тоже белое. На вашем сайте тоже выпадающее белое. А в мобильном виде все подразделы окрашены. Возможно так и должно быть, но есть сомнения.
Александр Мальцев
Александр Мальцев
Всё зависит от Вашего желания. Можно настроить как угодно.
Настроить dropdown можно по приведённой ссылке выше. Просто надо попробовать.
_https://jsfiddle.net/itchief/84oeut2a/
Аноним
Аноним
Здравствуйте!
подскажите, как изменить начало фиксации панели при скролл.Например при scroll 50 или scroll 100.До этих значений чтобы было статическое меню.
Спасибо
Александр Мальцев
Александр Мальцев
Здравствуйте, Сергей!
Это делается с помощью плагина Bootstrap Affix.

CSS:
/* режим affix */ 
#nav.affix {
  top: 0;
  width: 100%;
}
HTML:
<!-- Навигационное меню -->
<nav id="nav" class="navbar navbar-default">
  ...
</nav>

<script>
$('#nav').affix({
  offset: {
    // устанавливаем 100px, или любое другое значение 
    top: 100
  }
});
</script>
Аноним
Аноним
@media (max-width: 768px) {
 ... 
}
Код работает, но вместо max надо указать min. Иначе работает наоборот телефоны на автораскрытии меню и с пк надо кликать.
но вот скрипт подключить не получается
<script>
$(function() {
  if ($(window).width()>=768) {
    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
      }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
    });
    $('.navbar .dropdown > a').click(function() {
      location.href = this.href;
    });
  }
});
</script>
Аноним
Аноним
Александр Мальцев
Спасибо большое опробую данный способ
Вот только гадаю как добавить скрипт, куда и как вставить новичек все таки )
// DROPDOWN CLASS DEFINITION
  // =========================

  var backdrop = '.dropdown-backdrop'
  var toggle   = '[data-toggle="dropdown"]'
  var Dropdown = function (element) {
    $(element).on('click.bs.dropdown', this.toggle)
  }
Нашел интересную надпись отвечающую за раскрытие меню возможно можно его как-то подашаминть
Аноним
Аноним
Огромная благодарность автору данного проекта за наглядные примеры, доступность описания + потраченное время. Желаю всех благ и развития ресурса.
Аноним
Аноним
Здравствуйте, недавно занялся создание сайтов с использованием бутстрапа+Joomla 3.
Сделал меню с раскрывающимся списком, но не могу понять как сделать родительский пункт меню активным(с переходом на закрепленную за ним ссылку). По умолчанию он неактивен. Привел код html и css может кому пригодится.
Код:
<nav class="navbar navbar-default" role="navigation" >
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="topmenu">
      <jdoc:include type="modules" name="position-4" style="none" />
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
Для раскрытия меню по наведению добавил CSS код:
.dropdown:hover > .dropdown-menu { 
  display: block;
}
.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;
}
Александр Мальцев
Александр Мальцев
Алексей, т.к. данная функциональность на мобильных устройствах и планшетах не нужна, то предлагаю вышеприведённый CSS код обернуть с помощью конструкции:
@media (max-width: 768px) {
 ... 
}
Кроме этого предлагаю ещё решение данной проблемы на JavaScript:
<script>
$(function() {
  if ($(window).width()>=768) {
    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
      }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
    });
    $('.navbar .dropdown > a').click(function() {
      location.href = this.href;
    });
  }
});
</script>
Аноним
Аноним
фоновое изображение, которое придаёт веб-страницы некоторый
Мне кажется правильно веб-странице, у вас опечатка видимо. Первый абзац в Навигационное меню и фоновое изображение
Александр Мальцев
Александр Мальцев
Спасибо, Артём. Поправил.
Аноним
Аноним
Привет всем!
Насчет меню — понятно,
а вот как оформить пункт меню под свои нужды??
Александр Мальцев
Александр Мальцев
1. Настроить пункты меню можно с помощью переопределения значений свойств CSS:
nav .dropdown-menu {
  /*цвет фона dropdown меню*/
  background-color: #E74C3C;
  /*граница*/
  border: 1px solid rgba(0, 0, 0, 0.15);
  /*тень меню*/
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
}
nav .dropdown-menu > li > a {
  /*цвет текста пункта меню*/
  color: #fff;
}
nav .dropdown-menu > li > a:hover,nav .dropdown-menu > li > a:focus {
  /*цвет текста пункта меню при поднесении к нему курсора*/
  color: #fff;
  /*цвет фона пункта меню при поднесении к нему курсора*/
  background-color: green;
}
nav .dropdown-menu .divider {
  /*цвет разделителя*/
  background-color: #000;
}
2. Настроить пункты меню также можно с помощью переменных LESS, которые находятся в разделе Dropdowns (т.к. оно выполнено с помощью этого компонента). Изменение настроек Dropdown в этом случае повлияет не только на выпадающие меню компонента NavBar, но и на остальные компоненты, в которых данное меню (Dropdown) используется.
Andrey964
Andrey964
Добрый день. Еще вопрос. Как установить, чтобы подсветка пункта подменю была на всю ширину блока. Сейчас выдается с отступами слева и справа
Александр Мальцев
Александр Мальцев
Она и так по умолчанию занимает всю ширину блока. Скорее всего, на данное меню оказали влияние Ваши собственные стили. Их необходимо проверить.
Не знаю, как там у Вас реализовано, но всё делается просто с помощью изменения значения переменной LESS @dropdown-link-hover-bg в файле variables.less.

Ну, или на крайний случай можно переопределить стили Bootstrap 3:
nav.dropdown-menu > li > a:hover {
  background-color: blue;
}
Andrey964
Andrey964
использовал шаблон helix3. в файле variables.less. нет этой переменной. Может еще где посмотреть?
Александр Мальцев
Александр Мальцев
Меню этого шаблона никакого отношения к стандартному меню Bootstrap не имеет. Такие вопросы лучше задавать в разделе «Вопросы».

Чтобы убрать отступы необходимо изменить значение padding на «20px 0»:
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #fff;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2); 
  /* это свойство устанавливает отступы */
  padding: 20px 0;
}
Andrey964
Andrey964
Разобрался. Это сделано я так понимаю чтобы не было разрыва фона между пунктом главного меню и выпадающего подменю. Когда оба имеют одинаковый фон проблемы нет
Andrey964
Andrey964
Andrey964
Andrey964
Добрый день! Активный пункт выпадающего меню по размерам вылезает за границы nav-bar. как исправить? Спасибо
Александр Мальцев
Александр Мальцев
Добрый день!
Приведите Ваш код на jsfiddle.net.
Andrey964
Andrey964
.sp-megamenu-parent >li.active>a {
color: #3d449a;
}
.sp-megamenu-parent >li:hover>a {
color: #3d449a;
background: gray;

}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item >a:hover {
background: gray;
Аноним
Аноним
Еще раз спасибо. У меня сайт на WordPress, собирал сам, верстал его с bootstrap сеткой. Сегодня решил обновить cтили менюшки. Я брал при сборке сниппет на гитхабе, там файл newwalker и т.д. Вобщем с вашей статьей проще намного менять стили :))) Да и вообще, пользуюсь вашим сайтом, как справочником по bootstrap.
Хотелось бы видеть еще интересные сниппеты :)))
Типа такого:
Код:
<div class="col-sm-6">
  <div class="media">
    <div class="media-body text-right">
      <h4 class="media-heading">lorem ipsum</h4>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
    <div class="media-right">
      <i class="fa fa-cog"></i>
    </div>
  </div>
</div>
<div class="space visible-xs"></div>
<div class="col-sm-6">
  <div class="media">
    <div class="media-left">
      <i class="fa fa-laptop"></i>
    </div>
    <div class="media-body">
      <h4 class="media-heading">lorem ipsum</h4>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
  </div>
</div>
<!-- Дальше по аналогии -->
Александр Мальцев
Александр Мальцев
Спасибо Егор за Ваш отзыв.
Обязательно сделаю подборки интересных сниппетов.
Аноним
Аноним
Все. Поставил сам. Спасибо. Хорошая статья.
Аноним
Аноним
Здравствуйте, а как сделать, что-бы меню не выходило за рамки .container и не растягивалось на всю ширину экрана?
Аноним
Аноним
Отличная статья, спсибо за труды
Аноним
Аноним
Подскажите как переместить зафиксированное навигационное меню скажем на 100px вниз?
Александр Мальцев
Александр Мальцев
Добрый день, Ди.
Можно воспользоваться следующим CSS кодом:
navbar-fixed-top {
top: 100px;
}