Уроки по программированию

Navbar (Уроки Bootstrap 3)

В этом уроке я постараюсь разобрать компонент navbar в Boostrap 3. Этот компонент полезен и может очень пригодится при верстке шаблона. Компонент navbar так же как и все блоки Bootstrap имеет полезное свойство сворачивания.

Navbar на компьютерах

Так выглядит navbar на компьютерах все элементы присутствуют

navbar1

Navbar на мобильных устройствах

Так выглядит navbar на мобильных устройствах все элементы прячутся и появляются по нажатию на кнопку

navbar2

Navbar может быть:

  • Зафиксирован сверху — при прокрутке navbar всегда будет сверху
  • Зафиксирован снизу — при прокрутке navbar всегда будет снизу

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

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
	<!-- Название компании и кнопка, которая отображается для мобильных устройств группируются для лучшего отображения при свертывании -->
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>

	<!-- Группируем ссылки, формы, выпадающее меню и прочие элементы -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	  <ul class="nav navbar-nav">
		<li class="active"><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li class="dropdown">
		  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		  <ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li class="divider"></li>
			<li><a href="#">Separated link</a></li>
			<li class="divider"></li>
			<li><a href="#">One more separated link</a></li>
		  </ul>
		</li>
	  </ul>
	  <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>
	  <ul class="nav navbar-nav navbar-right">
		<li><a href="#">Link</a></li>
		<li class="dropdown">
		  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		  <ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li class="divider"></li>
			<li><a href="#">Separated link</a></li>
		  </ul>
		</li>
	  </ul>
	</div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Резиновостью navbar можно управлять меняя значение класса.

<div class="container-fluid">

Можно вместо container-fluid поставить просто container, тогда navbar не будет растягиваться на всю ширину экрана,а примет ширину container по-умолчанию. Максимальная ширина container составляет 1170px

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

<div class="navbar-header">
  <button type="button" class="navbar-toggle" 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>

Следующий код хранит в себе элементы navbar.

<!-- Группируем ссылки, формы, выпадающее меню и прочие элементы -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown">
	  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	  <ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
		<li class="divider"></li>
		<li><a href="#">One more separated link</a></li>
	  </ul>
	</li>
  </ul>
  <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>
  <ul class="nav navbar-nav navbar-right">
	<li><a href="#">Link</a></li>
	<li class="dropdown">
	  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	  <ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	  </ul>
	</li>
  </ul>
</div><!-- /.navbar-collapse -->

В мобильных устройствах все эти элементы мы будем видеть по нажатию на кнопку

navbar5

Для того чтобы в мобильных версиях по нажатию кнопоки отображались элементы нужно чтобы совпадали следующие id

navbar4

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

<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown">
	  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	  <ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
		<li class="divider"></li>
		<li><a href="#">One more separated link</a></li>
	  </ul>
	</li>
</ul>

Классы nav navbar-nav нужны для того чтобы элементы списка ul располагались горизонтально. Для создания простой ссылки в меню можно использовать следующий код

	<li><a href="#">Link</a></li>

Для выделения активного пункта меню нужно использовать класс active

Для того чтобы вывести выпадающее меню нужно родительскому li добавить класс dropdown и внутри элемента разместить каретку по нажатию на которую будет выпадать меню. Во вложенный список ul нужно добавить класс dropdown-menu

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><!--Каретка-->
  <ul class="dropdown-menu"><!--Вложенный список который будет выпадать-->
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li class="divider"></li><!--Разделительная линия-->
	<li><a href="#">Separated link</a></li>
	<li class="divider"></li>
	<li><a href="#">One more separated link</a></li>
  </ul>
</li>

Фиксация navbar сверху
Для того чтобы зафиксировать navbar сверху нужно добавить класс navbar-fixed-top

<nav class="navbar navbar-default  navbar-fixed-top" role="navigation">

Фиксация navbar снизу
Для того чтобы зафиксировать navbar снизу нужно добавить класс navbar-fixed-bottom

<nav class="navbar navbar-default  navbar-fixed-bottom" role="navigation">

Готовый пример — Скачать

Комментарии к статье

  • Аватарка 13.10.2014
    Ответить Илья Цыпин

    Точно не нужен, проверьте подключен ли js, а лучше скачайте архив в приложении к статье….

  • Аватарка 03.11.2014

    А как сделать что бы пункты меню были не слева, а по центру?

  • Аватарка 19.03.2015
    Ответить Сергей Бендер

    Можно ли сделать, чтоб на на больших экранах меню было фиксированным, а на мобильных нет?

    Спрашиваю так как есть проблема с отображением меню на мобильном. Сайт http://ufx.com.ua, везде все отлично, а на мобильном меню занимает треть экрана, не знаю как поправить.
    Буду очень благодарен за помощь.

    • Аватарка 20.03.2015

      Можно попробовать использовать HTTP_USER_AGENT для определения устройства, а после уже применять определенные стили.

  • Аватарка 02.05.2015
    Ответить Голос на заре

    Как сделать чтобы менюха в мобильном варианте — сворачивалась ?? Перерыл все уже..немогу найти ! Заранее спасибо ! Код меню :

    • Аватарка 03.05.2015

      Возможно нужно добавить код в Head

      • Аватарка 03.05.2015
        Ответить Голос на заре

        не то !
        Может неправильно я сформулировал вопрос (((
        Суть такова : меню мобильное работает — только принажатии пункта меню,не сворачивается тем самым загораживает всю активную область с контентом..хух

        • Аватарка 03.05.2015

          вышлите ссылку на проект

          • Аватарка 03.05.2015
            Голос на заре

            harchevnya.com.ua

          • Аватарка 04.05.2015
            TSergey

            Можно повесить событие onclick и при щелчке на пункт меню добавлять класс navbar-collapse collapse https://yadi.sk/i/ElExuHOogQeoS

          • Аватарка 27.06.2015
            Антон Порошенко

            Молодец, только потом у тебя меню не откроется мобильное)

          • Аватарка 28.07.2015
            Тимур Пимкин

            Подскажите как вы реализовали чтобы свертывалось меню?

        • Аватарка 11.09.2015
          Ответить Митя Габриелов

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

  • Аватарка 17.05.2015

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

  • Аватарка 22.07.2015
    Ответить LPerke Perke

    Статья очень во многом помогла разобраться!
    Подскажите, как избавиться от полос прокрутки, когда открываешь меню на маленьком экране? спасет ли min-width?

    • Аватарка 23.07.2015

      можно использовать overflow:hidden

  • Аватарка 15.10.2015
    Ответить Roman Mincovskiy

    А как сделать чтоб меню сворачивалось при скроле?

    • Аватарка 16.10.2015

      Нужно прописывать javascript+css

  • Аватарка 28.10.2015
    Ответить Атаманив Владимир

    Спасибо за статью, очень пригодилась!

  • Аватарка 04.11.2015
    Ответить Андрей Копылов

    Не разворачивается свернутое меню. Хотя вроде все верно сделано.
    Это может быть из за браузера?

    • Аватарка 06.01.2016
      Ответить Lun Lunn

      подключи ява скрипты,(в моем случае):



  • Аватарка 25.02.2016

    Спасибо

  • Аватарка 23.10.2016

    у меня вроде код правильный, а мобильное меню не высвечивает, появляется при загрузке и тут же пропадает, подскажите, пожалуйста, в чём может быть проблема. Голову уже сломала.http://busines-s.ru/

  • Аватарка 26.02.2017
    Ответить Roman Pastushkov

    НИКОГДА!!! НИКОГДА НЕ ИНКЛЮДЬ СКРИПТЫ В БОДИ! ДЛЯЧ ЭТОГО ЕСТЬ ХЕД!!!!!

    • Аватарка 12.04.2017
      Ответить Алина

      Сколько сейчас в универе идет курс по разработке сайтов, столько нам твердят, что подключать скрипты нужно снизу внутри тега body. А в head подключают стили. Так что Вы не правы.

    • Аватарка 08.05.2017

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

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

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