Адаптивное меню Bootstrap 3

Разработка сайтов

Здравствуйте дорогие читатели! Сегодня хочу привести пример работы в bootstrap 3, именно пример адаптивного меню для сайта. На данный момент иметь адаптивный дизайн сайт просто необходимо, так как такие поисковики как Яндекс и Гугл стали ранжировать выше те сайты у которых адаптивный дизайн ( корректное отображение вашего сайта в любых разрешениях монитора).


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

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

<nav role="navigation">
  <!-- Логотип и мобильное меню -->
	<div>
	<button type="button" data-target="#navbarCollapse" data-toggle="collapse">
	    <span>Toggle navigation</span>
		<span></span>
		<span></span>
		<span></span>
	</button>
		<a href="#">SeoBel.
 
 ru</a>
	</div>
  <!-- Навигационное меню -->
    <div>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Новости</a></li>
      </ul>
    <ul>
      <li><a href="#">Войти</a></li>
    </ul>
    </div>
</nav>

Приведенный пример меню выглядит следующим образом:

Для корректного отображения элементов форм в меню их помещают внутри тега form и добавляют класс .navbar-form для правильной ориентации по вертикали и сжатия на маленьких разрешениях экрана.

Для выравнивания различных компонентов в меню по левому или правому краю, нужно использовать классы bootstrap 3 .navbar-left или .navbar-right соответственно. Например чтобы выровнять форму поиска просто добавьте соответствующий класс.

Адаптивное меню с формой поиска и выпадающим под меню:

<nav role="navigation">
  <!-- Логотип и мобильное меню -->
	<div>
	<button type="button" data-target="#navbarCollapse" data-toggle="collapse">
	    <span>Toggle navigation</span>
		<span></span>
		<span></span>
		<span></span>
	</button>
		<a href="#">SeoBel.
 
 ru</a>
	</div>
  <!-- Навигационное меню -->
    <div>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
  <!-- Выподающие меню с подпунктами -->
        <li>
        <a data-toggle="dropdown" href="#">Новости <b></b></a>
        <ul role="menu">
          <li><a href="#">Меню 1</a></li>
          <li><a href="#">Меню 2</a></li>
          <li><a href="#">Меню 3</a></li>
          <li></li>
          <li><a href="#">Меню 4</a></li>
        </ul>
      </li>
    </ul>
  <!-- Поиск по сайту -->
    <form role="search">
      <div>
        <input type="text" placeholder="Найти">
      </div>
    </form>
      </ul>
    <ul>
      <li><a href="#">Войти</a></li>
    </ul>
    </div>
</nav>

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

Навигационное меню в разных разрешениях монитора:

Ну вот мы и сделали с вами адаптивное меню с помощью bootstrap 3, свои вопросы можете задавать в комментариях, я с радостью на них отвечу.

css — Как сделать меню в bootstrap -3

Задать вопрос

Вопрос задан

Изменён 6 лет 6 месяцев назад

Просмотрен 756 раз

Есть ли возможность сделать меню bootstrap-3 на ширину экрана, а не родительского компонента? есть необходимость организовать меню таким образом пытался реализовать таким образом

<nav role="navigation">
                <div>
                    <div>
                        <ul>
                            <li><a href="#">Главная/a></li>
                            <li>
                                <a href="#" data-toggle="dropdown">Для него </a>
                                <ul>
                                    <ul>
                                        <li><a href="#home_him" data-toggle="tab">Главная</a></li>
                                        <li><a href="#profile_him" data-toggle="tab">Профиль</a></li>
                                        <li><a href="#messages_him" data-toggle="tab">Сообщения</a></li>
                                        <li><a href="#settings_him" data-toggle="tab">Настройки</a></li>
                                    </ul>
                                    <div>
                                        <div>
                                            <li><a href="#">Действие</a></li>
                                            <li><a href="#">Другое действие</a></li>
                                            <li><a href="#">Что-то еще</a></li>
                                        </div>
                                        <div>
                                            <li><a href="#">Действие</a></li>
                                            <li><a href="#">Другое действие</a></li>
                                            <li><a href="#">Что-то еще</a></li>
                                        </div>
                                        <div>
                                            <li><a href="#">Действие</a></li>
                                            <li><a href="#">Другое действие</a></li>
                                            <li><a href="#">Что-то еще</a></li>
                                        </div>
                                        <div>
                                            <li><a href="#">Действие</a></li>
                                            <li><a href="#">Другое действие</a></li>
                                            <li><a href="#">Что-то еще</a></li>
                                        </div>
                                    </div>
                                </ul>
                            </li> 
                                                       .
 
 

     (adsbygoogle = window.adsbygoogle || []).push({});

 
 ..
                                               </ul>
                                       </div>
                                 </div>

из этого ни чего не вышло даже выпадающее меню не работает можно в bootstrap 3 стандартными методами сделать такое меню ?

  • css
  • bootstrap

6

Пример

Fiddle

.nav > li.dropdown.open {
  position: static;
}
.nav > li.dropdown.open .dropdown-menu {
  display: table;
  border-radius: 0px;
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
}
.dropdown-menu > li {
  display: table-cell;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .dropdown-menu > li {
    display: block;
  }
}
<link rel="stylesheet" href="https://maxcdn.
 
 bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <div>

    <div>
      <div>LOGO</div>
      <button data-toggle="collapse" data-target=".btnCollapse">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>

    <div>
      <ul>
        <li><a href="#">Link 1</a>
        </li>
        <li>
          <a href="#" data-toggle="dropdown">Link 2<span></span></a>
          <ul role="menu">
            <li><a href="#">Submenu 2</a>
            </li>
            <li><a href="#">Submenu 2</a>
            </li>
            <li><a href="#">Submenu 2</a>
            </li>
            <li><a href="#">Submenu 2</a>
            </li>
            <li><a href="#">Submenu 2</a>
            </li>
            <li><a href="#">Submenu 2</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Link 3</a>
        </li>
        <li>
          <a href="#" data-toggle="dropdown">Link 4<span></span></a>
          <ul role="menu">
            <li><a href="#">Submenu 4</a>
            </li>
            <li><a href="#">Submenu 4</a>
            </li>
            <li><a href="#">Submenu 4</a>
            </li>
            <li><a href="#">Submenu 4</a>
            </li>
            <li><a href="#">Submenu 4</a>
            </li>
            <li><a href="#">Submenu 4</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<div>
  <div>Content</div>
</div>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Навбар · Начальная загрузка

Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, панели навигации. Включает поддержку фирменного стиля, навигации и многого другого, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам нужно знать перед началом работы с панелью навигации:

  • Для панелей навигации требуется упаковка .navbar с .navbar-expand{-sm|-md|-lg|-xl} для адаптивного свертывания и классов цветовых схем.
  • Панели навигации и их содержимое по умолчанию изменчивы. Используйте дополнительные контейнеры, чтобы ограничить их ширину по горизонтали.
  • Используйте наши служебные классы spacing и flex для управления интервалами и выравниванием в панелях навигации.
  • Панели навигации по умолчанию реагируют, но вы можете легко изменить их, чтобы изменить это. Отзывчивое поведение зависит от нашего подключаемого модуля Collapse JavaScript.
  • Панели навигации по умолчанию скрыты при печати. Заставьте их распечатать, добавив .d-print до . navbar . См. служебный класс дисплея.
  • Обеспечьте доступность с помощью элемента

Прочтите пример и список поддерживаемых подкомпонентов.

Поддерживаемый контент

Navbars поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите из следующего:

  • .navbar-brand для названия вашей компании, продукта или проекта.
  • .navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
  • .navbar-toggler для использования с нашим подключаемым модулем сворачивания и другими функциями переключения навигации.
  • .form-inline для любых элементов управления и действий формы.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группировки и скрытия содержимого панели навигации родительской точкой останова.

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

 <навигация>
  Панель навигации

В этом примере используются служебные классы цвета ( bg-light ) и интервала ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

Марка

.navbar-brand можно применить к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.

 
<навигация>
  Панель навигации


<навигация>
  Панель навигации

Добавление изображений в .navbar-brand , скорее всего, всегда потребует пользовательских стилей или утилит для правильного размера. Вот несколько примеров для демонстрации.

 
<навигация>
  <а href="#">
    
  
 
 
<навигация>
  <а href="#">
    
    Начальная загрузка

Навигация

Навигационные ссылки

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

Активные состояния — с .active — для указания, что текущая страница может быть применена непосредственно к .nav-link или их непосредственному родителю .nav-элемент с.

 <навигация>
  Панель навигации