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

21

Від автора: я вітаю вас. У минулих статтях ми розглянули варіанти створення горизонтального, вертикального і випадаючого меню. Сьогодні ми в останній раз поговоримо про навігації і подивимося, як зробити на 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 пікселів). Якщо меню дійсно не згортається, поверніться до попередніх двох кроків і все гарненько перевірте.

Відмінно, в цій статті ми розглянули створення мобільної навігації, яка відмінно відображається на всіх пристроях. На цьому буду закінчувати цю статтю. Якщо ви хочете отримати свою першу практику верстки реального макета, пропоную прямо зараз пройти безкоштовний курс, в якому як раз сверстаете простий шаблон. Удачі вам у вивченні фреймворку!