В этом уроке я постараюсь разобрать компонент navbar в Boostrap 3. Этот компонент полезен и может очень пригодится при верстке шаблона. Компонент navbar так же как и все блоки Bootstrap имеет полезное свойство сворачивания.
Navbar на компьютерах
Так выглядит navbar на компьютерах все элементы присутствуют
Navbar на мобильных устройствах
Так выглядит navbar на мобильных устройствах все элементы прячутся и появляются по нажатию на кнопку
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 -->
В мобильных устройствах все эти элементы мы будем видеть по нажатию на кнопку
Для того чтобы в мобильных версиях по нажатию кнопоки отображались элементы нужно чтобы совпадали следующие id
В примере для разбора 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">
Готовый пример — Скачать
Точно не нужен, проверьте подключен ли js, а лучше скачайте архив в приложении к статье….
А как сделать что бы пункты меню были не слева, а по центру?
Можно ли сделать, чтоб на на больших экранах меню было фиксированным, а на мобильных нет?
Спрашиваю так как есть проблема с отображением меню на мобильном. Сайт http://ufx.com.ua, везде все отлично, а на мобильном меню занимает треть экрана, не знаю как поправить.
Буду очень благодарен за помощь.
Можно попробовать использовать HTTP_USER_AGENT для определения устройства, а после уже применять определенные стили.
Как сделать чтобы менюха в мобильном варианте — сворачивалась ?? Перерыл все уже..немогу найти ! Заранее спасибо ! Код меню :
Возможно нужно добавить код в Head
не то !
Может неправильно я сформулировал вопрос (((
Суть такова : меню мобильное работает — только принажатии пункта меню,не сворачивается тем самым загораживает всю активную область с контентом..хух
вышлите ссылку на проект
harchevnya.com.ua
Можно повесить событие onclick и при щелчке на пункт меню добавлять класс navbar-collapse collapse https://yadi.sk/i/ElExuHOogQeoS
Молодец, только потом у тебя меню не откроется мобильное)
Подскажите как вы реализовали чтобы свертывалось меню?
такая же беда, не могу найти как это исправить, если есть решение, подскажи, плз
А как сделать, что бы кнопка появлялась не только на мобильном, но уже на планшете, например.
Статья очень во многом помогла разобраться!
Подскажите, как избавиться от полос прокрутки, когда открываешь меню на маленьком экране? спасет ли min-width?
можно использовать overflow:hidden
А как сделать чтоб меню сворачивалось при скроле?
Нужно прописывать javascript+css
Спасибо за статью, очень пригодилась!
Не разворачивается свернутое меню. Хотя вроде все верно сделано.
Это может быть из за браузера?
подключи ява скрипты,(в моем случае):
Спасибо
у меня вроде код правильный, а мобильное меню не высвечивает, появляется при загрузке и тут же пропадает, подскажите, пожалуйста, в чём может быть проблема. Голову уже сломала.http://busines-s.ru/
Проверьте есть ли
НИКОГДА!!! НИКОГДА НЕ ИНКЛЮДЬ СКРИПТЫ В БОДИ! ДЛЯЧ ЭТОГО ЕСТЬ ХЕД!!!!!
Сколько сейчас в универе идет курс по разработке сайтов, столько нам твердят, что подключать скрипты нужно снизу внутри тега body. А в head подключают стили. Так что Вы не правы.
Скрипты нужно подключать снизу, но никак не в head, объясню причину, если у тебя контент который загружается от сервера, то сначала будут загружены все скрипты и стили, а потом контент и что бы сначала загрузить стили затем контент, а потом только скрипты, то ставят их в конец, так как это помогает загрузить контент прежде чем загрузятся скрипты и пользователь увидит контент раньше, а это уже плюс.