Блог:

Создаем адаптивное меню с Bootstrap 3

Здравствуйте дорогие читатели! Сегодня хочу привести пример работы в 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>

Так будет выглядеть наше адаптивное меню: