Як зробити Bootstrap вертикальне меню?

28

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

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

  • Головна
  • Налаштування
  • Написати автору

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

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

  • Головна
  • Налаштування
  • Написати автору

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

Ось, тепер меню буде займати 33% ширини екрана на всіх моніторах, виключаючи самі маленькі, на яких вона стає на всю ширину. Якщо ви нічого не зрозуміли з коду і пояснень, то вам потрібно в першу чергу вивчити, як працює сітка Bootstrap. По суті, це головна тема, яку ви повинні обов’язково розуміти при роботі з фреймворком. Саме завдяки сітці на bootstrap дуже легко верстати адаптивні сайти.

Звичайно, наше меню виглядає дуже-дуже нецікаво, але це тільки тому, що ми поки що ніяк його не стилізували. Давайте приберемо вбудований стиль. Фреймворк пропонує нам 2 варіанти оформлення меню за замовчуванням: вкладки і кнопки. Для застосування стилів першого варіанту додайте клас nav-tabs до тегу ul, тобто до списку.

    Так ось, я ж вам казав, що при додаванні будь-якого оформлення за замовчуванням пункти стають у ряд. На щастя, розробники передбачили це самі, так що для повернення вертикального положення всього лише додайте ще 1 клас до ul – nav-stacked:

      Так за замовчуванням виглядає оформлення з вкладками:

      А так з кнопками:

      Як змінити оформлення?

      Дуже просто. Припустимо, ви хочете, щоб активний пункт підсвічували не синім, а жовтим? Без проблем, заходимо в папку з проектом, знаходимо папку css, а в ній файл bootstrap.css. За допомогою пошуку (ctrl + f) знайдіть pills. Ось вони і наші стилі, відповідальні за це оформлення:

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

      .nav-pills > li > a {
      border-radius: 8px;
      }
      .nav-pills > li.active > a,
      .nav-pills > li.active > a:hover,
      .nav-pills > li.active > a:focus {
      color: #fff;
      background-color: #B8AF3D;
      }

      Я збільшив скруглення і поміняв фоновий колір активного пункту. Результат:

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

      Навігаційні списки

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

      Наприклад, подивіться на цю розмітку:

      • Головні посилання
      • Головна
      • Зворотний зв’язок
      • Каталог
      • Додаткові
      • Наші філії
      • Календар заходів
      • Вакансії

      Самому списку ніяких додаткових класів ставити не потрібно. Щоб зробити заголовок для групи пунктів використовуйте li з класом nav-header, а щоб поставити роздільник – li з класом divider без посилання і без контенту. Все дуже просто, ось результат:

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

      Кастомизируем меню

      По-перше, додамо списком ідентифікатор my_nav. Через цей ідентифікатор ми звернемося до меню через наш css-файл. По-друге, непогано було б додати іконки до кожного пункту. Зараз я додам максимально підходящі для кожного пункту. Знайти всі іконки ви можете у документації до фреймворку. Виводяться на сторінку вони так:

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

      Відповідно, всередину кожної посилання потрібно вставити спан з іконкою. Ось що вийшло у мене:

      Ну в будь-якому випадку вже виглядає більш цікаво. Залишилося прописати деякі стилі для самого меню:

      #my_nav{
      background: #DBE8BA;
      border-radius: 6px;
      padding: 5px 15px;
      }
      #my_nav .nav-divider{
      background-color: #000;
      }
      #my_nav a{
      color: #204460;
      }

      Ось ми і домоглися відносної уникализации своєї вертикальної навігації. Звичайно, досвідчений верстальник відразу розпізнає, що меню зроблено на Bootstrap, але якщо змінити іконки на інші, то все буде не так очевидно.

      Загалом, сьогодні ми з вами зробили вертикальне меню на Bootstrap 3. До речі, якщо ви хочете отримати гарну практику верстки з допомогою цього фреймворку, рекомендую пройти безкоштовний курс по Bootstrap. В ньому ви не просто зробите окремі елементи, але і сверстаете повноцінний макет, нехай навіть він буде дуже простим.

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