Здравствуйте дорогие читатели! Сегодня хочу привести пример работы в bootstrap 3, именно пример адаптивного меню для сайта. На данный момент иметь адаптивный дизайн сайт просто необходимо, так как такие поисковики как Яндекс и Гугл стали ранжировать выше те сайты у которых адаптивный дизайн ( корректное отображение вашего сайта в любых разрешениях монитора).
Перед тем как мы приступим к созданию нашего навигационного меню, у вас уже должен быть подключен bootstrap 3, можете ознакомится со статьей как подключить bootstrap.
И так bootstrap у нас подключен, переходим к созданию адаптивного меню. Для начало нам нужно создать навигационное меню с обычными пунктами, а уже после этого будем добавлять пункты с подпунктами и создадим форму поиска на сайте.
<nav role="navigation" class="navbar navbar-default">
<!-- Логотип и мобильное меню -->
<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>
<a href="#" class="navbar-brand">SeoBel.ru</a>
</div>
<!-- Навигационное меню -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Новости</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Войти</a></li>
</ul>
</div>
</nav>
Приведенный пример меню выглядит следующим образом:
Создание форм в навигационном меню Bootstrap
Для корректного отображения элементов форм в меню их помещают внутри тега form и добавляют класс .navbar-form для правильной ориентации по вертикали и сжатия на маленьких разрешениях экрана.
Для выравнивания различных компонентов в меню по левому или правому краю, нужно использовать классы bootstrap 3 .navbar-left или .navbar-right соответственно. Например чтобы выровнять форму поиска просто добавьте соответствующий класс.
Адаптивное меню с формой поиска и выпадающим под меню:
<nav role="navigation" class="navbar navbar-default">
<!-- Логотип и мобильное меню -->
<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>
<a href="#" class="navbar-brand">SeoBel.ru</a>
</div>
<!-- Навигационное меню -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<!-- Выподающие меню с подпунктами -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Новости <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню 3</a></li>
<li class="divider"></li>
<li><a href="#">Меню 4</a></li>
</ul>
</li>
</ul>
<!-- Поиск по сайту -->
<form role="search" class="navbar-form navbar-left">
<div class="form-group col-md-12">
<input type="text" placeholder="Найти" class="form-control">
</div>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Войти</a></li>
</ul>
</div>
</nav>
Так будет выглядеть наше адаптивное меню:
Навигационное меню в разных разрешениях монитора:
Ну вот мы и сделали с вами адаптивное меню с помощью bootstrap 3, свои вопросы можете задавать в комментариях, я с радостью на них отвечу.