bootstrap 4 навигационное меню

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

Создание одно уровневого меню с социальными иконками

За основу берем стандартный bootstrap 4 navbar: getbootstrap.com/docs/4.3/components/navbar/.

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

Итак здесь я изменил:

1. Цветовую схему меню, для этого заменил navbar-light bg-light на navbar-dark bg-dark см. getbootstrap.com/docs/4.3/components/navbar/#color-schemes
2. Убрал логотип (блок navbar-brand): getbootstrap.com/docs/4.3/components/navbar/#brand
3. Блок с формой form: getbootstrap.com/docs/4.3/components/navbar/#forms заменил на текстовый блок getbootstrap.com/docs/4.3/components/navbar/#text и добавил в него меню с шрифтовыми иконками.
4. подключил сами иконки .

Если сейчас посмотреть в браузере, то все это добро выглядит так.

Что здесь сразу не нравится мне: выделение активного элементы, тускловатый цвет неактивных элементов, кнопки друг на друга и т.д. давайте это исправим, для этого добавим следующие css строки

Теперь давайте создадим более сложное меню и кастомизируем его, за основу берем все тоже стандартное меню и видоизменяем код под себя.

1. убрал логотип (блок navbar-brand)
2. у блок с формой form: getbootstrap.com/docs/4.3/components/navbar/#forms, заменил его на собственный блок
3. сделал меню липким (после прокрутки чтобы прилипало к верху, для этого добавил класс sticky-top: getbootstrap.com/docs/4.3/utilities/position/#sticky-top

Если сейчас посмотреть в браузере, то меню выглядит так,

в принципе неплохо, активные элементы подхватили выше добавленный css код, но цвет ссылок активных элементов не белый а черный, по сути не работает форма поиска (она должна выпадать), в мобильном виде при клике на тоглер (кнопку открытия меню), открывается сразу 2 меню:

ну и внешний вид кнопок не особо устраивает, так же пока не работает кнопка поиска и она не должна уходить в складывающее меню, давайте поправим это.

Несколько bootstrap navbar на 1 странице

Чтобы избавится от открытия сразу 2х меню нужно изменить атрибуты data-target, aria-controls и id меню

т.е. просто переименовываем их на уникальные к примеру для верхнего меню ставим navbarTop а для второго меню navbarTop2 (либо оставляем стандартное название).

Выпадающая по клику поисковая строка

Дорабатываем поисковую строку, для этого добавляем следующий css:

и добавляем небольшой скрипт, который отвечает за открытие формы при клике

добавляем в конец документа, перед закрытием

Панели навигации

Панель навигации — это заголовок навигации, расположенный в верхней части страницы:

Базовая навигационная

С помощью Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.

Стандартная панель навигации создается с помощью .navbar класса, за которым следует адаптивный класс свертывания: (стеки навигационной панели .navbar-expand-xl|lg|md|sm по вертикали на очень больших, больших, средних или маленьких экранах).

Чтобы добавить ссылки внутри навигационной области, используйте

элемент с . Затем добавьте
элементы с .nav-item классом за которым следует элемент с .nav-link классом:

Пример

Вертикальная навигационная

Удалите .navbar-expand-xl|lg|md|sm класс для создания вертикальной панели навигации:

Пример

Центрированная навигационная

Добавьте .justify-content-center класс для центрирования панели навигации.

Следующий пример будет центрировать панель навигации на средних, больших и очень больших экранах. На маленьких экранах она будет отображаться по вертикали и по левому краю (из-за. навигации-развернуть-SM класса):

Пример

Цветной навигационной

Используйте любой из .bg-color классов для изменения цвета фона навигационной области (. .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light )

Совет: Добавьте белый цвет текста ко всем ссылкам в навигационной навигации с помощью .navbar-dark класса или используйте .navbar-light класс для добавления черного цвета текста.

Создание горизонтального адаптивного меню для сайта осуществляется с помощью компонента «Navbar». Компонент имеет два режима отображения:

• десктопный (обычный) — выводятся все элементы меню;
• мобильный (свёрнутый) — отображается бренд и кнопка «Гамбургер».

Режим отображения меню зависит от ширины viewport браузера. Точка перелома задается с помощью css-класса navbar-expand- .

Для установки цветового оформления меню используются еще два дополнительных класса: navbar- <…>и bg- <…>. Для установки цвета фона к bg- <…>необходимо добавить любую из восьми цветовых схем — primary , secondary , dark , light , warning , danger , info , success . Класс navbar- <…>отвечает за цвет текста и поддерживает два варианта — navbar-dark и navbar-light .

Для «NavBar» не обязателен контейнер, но если необходимо ограничить ширину всего меню, то можно его обернуть в .container .

Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar .

Для позиционирования меню фреймворк предлагает три дополнительных класса:

• fixed-top — фиксирует меню в самом верху страницы;
• fixed-bottom — фиксирует меню в самом низу страницы;
• sticky-top — приклеивает меню в верху при прокрутке страницы.

Элементы меню

Компонент «NavBar» состоит из нескольких подкомпонентов, которые можно добавлять или исключать по мере необходимости.

Название или логотип компании

Кнопка для открытия меню

Имеет css-класс .navbar-toggler и предназначена для показа и скрытия содержимого меню .collapse.navbar-collapse на малениких экранах:

Блок содержимого меню

Имеет css-классы .collapse.navbar-collapse и скрывается в контрольной точке, которая задается классом navbar-expand- . Может быть показано и скрыто по клику на кнопке .navbar-toggler :

Блок ссылок меню

Имеет css-класс .navbar-nav и состоит из ссылок и вложенных выпадающих списков со ссылками:

Форма внутри меню

Текст внутри меню

Класс .navbar-text — позволяет добавлять текст в меню.