Як робиться з допомогою Bootstrap меню?

2

Від автора: всім привіт. Меню та навігація – це практично найголовніший елемент сайту. У bootstrap йому також приділено значну увагу і сьогодні ми з вами розглянемо, як зробити з допомогою bootstrap меню: горизонтальне, вертикальне, випадаюче, адаптивне і т. д.

Горизонтальне адаптивне меню на bootstrap

Почати, мабуть, мені слід з того, що в bootstrap вже за замовчуванням закладена адаптивність для горизонтальної навігації, для цього вам потрібно просто підключити файл bootstrap.js. Фреймворк дозволяє легко створювати горизонтальні навігації будь-якого рівня складності, при цьому пункти будуть стискуватися при зменшенні екрану, а на певній ширині просто пропадуть з екрану, залишивши на ньому іконку для його відкриття. Це зроблено спеціально для зручності перегляду на мобільних пристроях.

Що ж, давайте прямо зараз розглянемо приклад створення простої горизонтальній навігації за допомогою фреймворка. Нехай в меню у нас буде 5 пунктів. Ось код, який все формує:

Toggle navigation



Назва сайту
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

Так, код досить громіздкий, але зрозуміти тут все досить просто. Все меню обертається в тег nav, який повинен містити в собі класи navbar і navbar-default, а також обов’язковий атрибут role=»navigation». Клас navbar-default відповідає за зовнішній вигляд самого меню.

У нього поміщається ще один контейнер, який визначає ширину меню – воно буде на всю ширину (клас container-fluid) або не буде розширюватися на широких моніторах, зупинившись на кінцевій максимальній ширині (просо клас container).

Наступний блок – це шапка нашої навігації. Вона буде видно на екранах шириною менше 768 пікселів. Зокрема, буде відображатися назва сайту, можливо, логотип, якщо він вам потрібен, і кнопка розкриття меню. Її ще називають кнопкою-гамбургером з-за її зовнішнього вигляду.

При ширині понад 768 пікселів ця кнопка буде прихована, а в навігації буде тільки логотип і назва сайту. Власне, на цьому блок nav-header закривається, а наступний формує безпосередньо саме меню.

Знову ж таки, воно поміщається в блок, класи collapse і navbar-collapse додають деякі стилі за замовчуванням нашої навігації. Саме меню формується маркованим списком з класами nav і navbar-nav, в який записуються всі пункти. Підсумок ви можете бачити на скріншоті:

На широких екранах праворуч буде залишатися ще багато вільного місця, наші пункти займуть всього лише трохи більше або менше половини простору. На вузьких екранах ж буде така ситуація:

Тобто, як бачите, меню згорнулося. Його розгортання відбувається при натисканні на кнопку-гамбургер. Пункти на вузьких екранах розташовуються вертикально один за одним.

Хочу зауважити, що таке меню формується, якщо у вас прописаний клас navbar-nav для списку, якщо ж замінити його на nav-justified, то до пунктів будуть застосовуватися горизонтальні відступи, щоб вони розтягнулися на всю ширину екрану. Ось так:

У такому випадку навіть якщо в меню у вас буде всього 2 пункти, між ними просто утворюються величезні відступи, щоб разом вони розтягнулися на всю ширину.

Але давайте повернемося до стандартної навігації і подивимося, що ми з нею ще можемо зробити.

Робимо в bootstrap випадаюче меню

Отже, поки що ми з вами зробили просте горизонтальне меню, яке за замовчуванням адаптивно і стискається на маленьких екранах. Але давайте тепер його трохи ускладнимо, зробивши один пункт випадаючим. Наприклад, третій. Для цього в розмітці нам треба ось цей код:

  • Пункт 3
  • Помітити на цей:

  • Випадаючий пункт

    • Підпункт
    • Ще підпункт
    • Ще щось
    • І ще
  • Приклад коду я взяв з документації, лише переписавши пункти на російську мову. Ось результат:

    Щоб відбулося розкриття випадаючого пункту, за нього потрібно клікнути. Також якщо у вас не підключені javascript-компоненти, тобто файл bootstrap.js, то це не спрацює.

    Отже, давайте детально розберемо, що до чого і як формується випадаючий пункт меню в bootstrap.

    По-перше, у цього пункту повинен бути клас dropdown, а для роботи джаваскрипта необхідно наявність атрибута data-toggle=»dropdown» у посилання всередині цього пункту. Спан з класом caret створює стрілочку, яка якраз і вказує на те, що пункт є випадаючим.

    Якщо ви коли-небудь робили в html багаторівневі списки, то подальша розмітка вас ніяк не збентежив – ми вставляємо всередину нашого випадаючого меню повноцінний вкладений список зі своїми пунктами, які і будуть відображатися при розкритті. Також цього вкладеного списку вкажіть атрибут role = «menu».

    Далі розмітка абсолютно зрозуміла, li з класом divider, як ви самі могли здогадатися, що відповідає за висновок лінії роздільника між пунктами. Таких роздільників можна робити скільки завгодно, а саме вкладене меню може містити хоч 15-20 пунктів.

    Додаємо додаткові елементи в нашу горизонтальну навігацію

    Bootstrap дозволяє легко вмонтувати в меню дод. Елементи. Наприклад, поле пошуку. Про це також розказано в документації. Давайте і ми вмонтуємо таке поле прямо в нашу горизонтальну смугу. Для цього вставте такий приклад коду перед закриваючим тегом div з класом navbar-collapse:

    Шукати

    Отже, тут у нас форма і 2 її елемента – поле для пошуку і кнопка пошуку, в яку також можна вставити відповідну іконку. Зауважте, що форма отримала додатковий необов’язковий клас – navbar-left. Він відповідає за положення елемента в навігації. Якщо б ми прописали navbar-right, то форма пошуку горнулась би до правого краю. І ось вже наша форма пошуку вбудувалася без проблем.

    Але справа в тому, що наше отже вже стало занадто довгим, тому повністю вміщується в один рядок, воно тільки до ширини близько 1000 пікселів. Коли я зменшую вікно сильніше, форма пошуку сповзає на другий рядок.

    Таким чином утворюється ситуація, що на екранах деяких пристроїв, наприклад, на нетбуках, меню може розташовуватися в два рядки. Можливо, ви навіть не бачите в цьому проблеми. У будь-якому випадку, Bootstrap пропонує кілька рішень цієї проблеми:

    Спочатку розраховувати ширину вмісту меню так, щоб воно повністю помістилося аж до ширини 768 пікселів. А починаючи з цієї ширини воно сховається за кнопкою-гамбургером, так що турбуватися про його подальше розташування не потрібно.

    Приховати певні елементи або пункти меню на розмірах екрану, де воно починає «з’їжджати». В даному випадку можна було б для екранів менше 1000 пікселів приховати поле пошуку.

    Змінити ширину вікна, на якій відбувається перемикання навігації, тобто коли з’являється ця сама кнопка:

    А з’являється вона за замовчуванням при ширині менш 768 пікселів, як я вже і казав раніше. Просто це стандартна настройка фреймворка. Так ось, її можна легко змінити з основи less або sass, або на сторінці кастомізації. Наприклад, ви можете зробити так, щоб згортання відбувалося на ширині 1000 пікселів, а не 768. В такому випадку ви зможете дозволити собі побудувати трохи більш широке меню, в якому буде багато елементів.

    Або навпаки, ви цілком можете поставити точку стиснення меню куди-небудь на 520 пікселів. Загалом, тут все залежить від ваших потреб в кожному конкретному випадку.

    Кілька списків меню в одній загальній навігації

    В одне горизонтальне меню насправді можна додати не один список пунктів. Давайте відразу після форми пошуку додамо ще невелике меню:

    • Посилання
    • Ще випадаюче

      • Посилання
      • Ще посилання

    У цьому меню буде всього 2 пункти, один звичайний, а другий – випадаючий з двома підпунктами і роздільником. Думаю, цей код повинен бути вже для вас цілком зрозумілий після того, що ми розібрали раніше. Також тут ми додали клас navbar-right, щоб другий список з пунктами розташовувався по правому краю.

    Тепер меню стало зовсім громіздким і навіть на широкому моніторі (1280 пікселів і більше) займає майже все місце в одному рядку:

    Ну а середніх екранах таке меню буде виглядати теж відносно непогано в два рядки, адже в обох рядках воно займає майже все місце:

    Насправді якщо ви володієте медіа-запитами, то зможете домогтися кращого вигляду, просто змінивши у другого списку (який праворуч знизу) на певній ширині екрану (у нашому випадку на 1000 пікселів і менше) клас navbar-right, щоб це меню розташовувалося зліва, а не справа.

    Зміна зовнішнього вигляду меню

    Тепер я видалю другий створений список і форму з нашого меню, залишивши там лише 5 пунктів, як було спочатку. Зроблю я це для того, щоб ми з вами могли кастомизировать зовнішній вигляд навігації. Взагалі це можна зробити засобами bootstrap. Пам’ятаєте, я говорив на початку статті, що клас navbar-default, який задається контейнера nav, яка відповідає за зовнішній вигляд всього нашого меню. Так от, якщо замінити цей клас на navbar-inverse, то відбудеться повна інверсія кольорів:

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

    Створити файл bootstrap-theme.css, в якому стилі перевизначити

    Створити свій файл style.css і зробити там перевизначення

    Скачати кастомизированный bootstrap, де ви вже спочатку налаштовуєте все під потрібні вам кольору

    Зараз я створю свій власний файл style.css, в якому пропишу стилі. В результаті у нас вийде власне красиве меню на bootstrap буквально за пару хвилин. Ось такі стилі я вставив у свій css-файл:

    .navbar-my{
    background: #958332;
    }
    .navbar-my ul li a{
    color: #fff;
    }
    .navbar-my ul li a:hover{
    background: #333;
    }
    .navbar-my .navbar-brand{
    color: #fff;
    }

    Не забудьте підключити цей файл до html-документа. Причому підключатися він повинен пізніше, ніж bootstrap.css. Тепер залишається поміняти в html-коді тегу nav клас navbar-default на navbar-my. Ось так перетворилося меню:

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

    Як ще прикрасити меню? Додайте іконки

    Ви легко можете додати будь-які іконки в меню, так як в Bootstrap є свій иконочный шрифт. Навіть якщо він вас щось не влаштує, ви цілком можете підключити інший шрифт. Наприклад, Font Awesome. Ось приклад пунктів з іконками:

  • Пункт 4
  • Пункт 5
  • Природно, додавайте іконки так, щоб вони відповідали пунктом, тому що в даному прикладі я додав їх, що називається, «від ліхтаря». Але додавання релевантних іконок здатне прикрасити вашу навігацію в рази. Тим більше що на реальному сайті замість нудної написи «Назва сайту» був би логотип, що ще краще прикрасило б навігацію.

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

    Що ж, ну а якщо ви хочете створити не просто окремий компонент сайту, а повноцінний шаблон (і навіть не один), вкрай рекомендую вам пройти наш курс адаптивної верстці сайтів на Bootstrap. Там ви отримаєте по-справжньому корисну практику, яка найближчим часом дозволить вам розробляти проекти будь-якої складності на Bootstrap. До зустрічі, шановні чиатели webformyself! У наступних статтях ми розглянемо ще кілька прикладів, пов’язаних із створенням навігацій.