Bootstrap мобильное меню

Bootstrap мобильное меню

От автора: я приветствую вас. В прошлых статьях мы рассмотрели варианты создания горизонтального, вертикального и выпадающего меню. Сегодня мы в последний раз поговорим о навигации и посмотрим, как сделать на bootstrap мобильное меню.

Собственно, почему оно мобильное? Да потому что на самых маленьких экранах не просто сжимается, а полностью исчезает с экранов, прячась за одной кнопкой. Чтобы такое меню работало, вам необходимо, чтобы были подключены необходимые js-компоненты.

Пример кода, создающий такое меню, вы можете найти все в той же документации бутстрапа на сайте getbootstrap.com. Жмите на пункт Компоненты, а там – Navbar. В русскоязычной навигации это пункт – Панель навигации. Там приведен достаточно громоздкий код, формирующий горизонтальную навигацию с разными элементами: обычными и выпадающими пунктами и даже формой поиска.

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

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

Вот так меню выглядит на экранах с шириной менее 768 пикселей:

А вот так в развернутом состоянии:

Внешний вид навигации можно изменить в одну секунду, просто прописав класс navbar-inverse вместо navbar-default главному контейнеру nav.

Как создать свой стиль для навигации?

Согласитесь, что стандартные варианты оформления не очень интересны и вам, скорее всего, захочется создать свои собственные стили для оформления горизонтального меню. Как же это сделать?

Для этого предлагаю вам отправиться во внутренности фреймворка, открыв файл bootstrap.css. Нажмите Ctrl + F, чтобы произвести поиск по коду и введите “navbar-inverse”. Вас направит на участок файла, где описаны стили для темного варианта навигации.

Скопируйте весь код, в котором будет содержаться класс navbar-inverse. У меня это получилось 100 строчек кода. Вставьте его в свой style.css, а также не забудьте этот css-файл подключить к html-странице.

Теперь в вашем style.css проделайте такую вещь:

Замените все navbar-inverse, например, на navbar-my. Это будет ваш пользовательский класс для оформления меню. Теперь можете задать его вашей навигации вместо navbar-default или navbar-inverse. Но внешний вид меню не изменится, потому что стили прописаны идентичные классу navbar-inverse.

Соответственно, вам нужно будет полностью заменить все стили на свои. Тут вам может помочь умение понимать код. Например, очевидно, что класс navbar-brand отвечает за оформление текста, который является названием бренда. Navbar-nav > li > a задает стиль для ссылок внутри основного меню. Ну и т.д. Если у вас туго с пониманием того, какой селектор за какой элемент отвечает, можете открыть свое меню в браузере Google Chrome и нажать F12. Там вы сможете подробно посмотреть, из каких элементов и классов состоит меню.

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

Вот я изменил буквально несколько значений цвета и меню преобразилось так:

Никто не мешает добавить градиент:

.navbar-my {
  background: linear-gradient(to bottom, #9B98DD, #5E87C9);
  border-color: #267355;
}

В общем, тут вы уже сами решайте, какие стили и как менять.

Что делать, если не сворачивается мобильное меню Bootstrap?

Во-первых, проверьте, подключены ли у вас все необходимые компоненты. Так для горизонтального мобильного меню обязательно должен быть подключен плагин collapse.js, по умолчанию он идет вместе с фреймворком, но если вы качали не полную версию, а кастомизировали под себя, то могли случайно не включить этот плагин.

Во-вторых, проверьте сам код, формирующий вашу навигацию. Проверьте его с кодом, который предоставлен в документации. Не упущен ли какой-то важный атрибут?

В-третьих, но это едва ли, вы просто не уменьшили окно браузера до тех размеров, на которых происходит сворачивание. Уменьшите ширину окна до требуемой (менее 768 пикселей). Если меню действительно не сворачивается, вернитесь к предыдущим двум шагам и все хорошенько проверьте.

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree