От автора: я приветствую вас. В прошлых статьях мы рассмотрели варианты создания горизонтального, вертикального и выпадающего меню. Сегодня мы в последний раз поговорим о навигации и посмотрим, как сделать на 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. Там вы сможете подробно посмотреть, из каких элементов и классов состоит меню.
Еще прийти к пониманию можно методом тыка, изменяя стили у любого класса и наблюдая, какой элемент/элементы изменили свое оформление. В следующий раз вы уже будете знать, за оформление чего отвечает селектор.
Вот я изменил буквально несколько значений цвета и меню преобразилось так:
Никто не мешает добавить градиент:
|
1 2 3 4 |
.navbar-my { background: linear-gradient(to bottom, #9B98DD, #5E87C9); border-color: #267355; } |
В общем, тут вы уже сами решайте, какие стили и как менять.
Что делать, если не сворачивается мобильное меню Bootstrap?
Во-первых, проверьте, подключены ли у вас все необходимые компоненты. Так для горизонтального мобильного меню обязательно должен быть подключен плагин collapse.js, по умолчанию он идет вместе с фреймворком, но если вы качали не полную версию, а кастомизировали под себя, то могли случайно не включить этот плагин.
Во-вторых, проверьте сам код, формирующий вашу навигацию. Проверьте его с кодом, который предоставлен в документации. Не упущен ли какой-то важный атрибут?
В-третьих, но это едва ли, вы просто не уменьшили окно браузера до тех размеров, на которых происходит сворачивание. Уменьшите ширину окна до требуемой (менее 768 пикселей). Если меню действительно не сворачивается, вернитесь к предыдущим двум шагам и все хорошенько проверьте.
Отлично, в этой статье мы рассмотрели создание мобильной навигации, которая отлично отображается на всех устройствах. На этом я буду заканчивать эту статью. Если вы хотите получить свою первую практику верстки реального макета, предлагаю прямо сейчас пройти наш бесплатный курс, в котором как раз сверстаете простой шаблон. Удачи вам в изучении фреймворка!
