Bootstrap 4 - Navbar (основное меню)

Статья, в которой рассмотрим, как с помощью компонента Navbar создать вертикальное схлопывающееся меню для сайта.
Как с помощью Navbar создать основное вертикальное меню для сайта
Для создания основного вертикального меню необходимо:
- подключить на страницу CSS код, который будет определять вид меню на больших экранах;
- определённым образом организовать HTML код, который будет задавать нужное положение элементов.
HTML и CSS код вертикального меню для сайте на базе Navbar:
... <!-- CSS --> <style> @media (min-width: 768px) { .navbar-container { position: sticky; top: 0; overflow-y: auto; height: 100vh; } .navbar-container .navbar { align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; flex-direction: column; height: 100%; } .navbar-container .navbar-collapse { align-items: flex-start; } .navbar-container .nav { flex-direction: column; flex-wrap: nowrap; } .navbar-container .navbar-nav { flex-direction: column !important; } } </style> ... <!-- HTML --> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-lg-3 navbar-container bg-light"> <!-- Вертикальное меню --> <nav class="navbar navbar-expand-md navbar-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <!-- Пункты вертикального меню --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#link-1">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#link-2">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#link-3">Ссылка 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#link-4">Ссылка 4</a> </li> <li class="nav-item"> <a class="nav-link" href="#link-5">Ссылка 5</a> </li> </ul> </div> </nav> </div> <div class="col-md-8 col-lg-9 content-container" style="background-color: #ffe0b2"> <!-- Основной контент страницы --> ... </div> </div> </div> </body> ...

Как изменить расположение кнопки «гамбургер»
Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:
<nav class="navbar navbar-expand-md navbar-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> ...
Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы ml-auto
и mr-auto
:
... <button class="navbar-toggler ml-auto mr-auto" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> ...
Как выровнять пункты в мобильном виде меню
Выравнивание пунктов в мобильном представлении меню выполняется посредством добавления класса text-right
или text-center
к элементу с классом navbar-nav
:
... <!-- Выравнивание пунктов по правому краю --> <ul class="navbar-nav text-right"> ...
... <!-- Выравнивание пунктов по центру --> <ul class="navbar-nav text-center"> ...
Комментарии ()
Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.
Пробывал но неработает на jquery 3.2
Чтобы эту задачу решить, нужно просто удалить класс show у других открытых пунктов кроме открываемого:
Готовый пример в песочнице: b4-navbar-2
Для этого можно добавить класс fixed-top к элементу:
А также добавить padding сверху к основному контейнеру для мобильной версии, чтобы сдвинуть контент немного ниже.
Например:
Есть стандартный html.
При наведении на раздел Услуги появляется выпадающий список услуг и в сам раздел Услуги можно перейти!
Выпадающие услуги таким образом реализованы
.dropdown:hover > .dropdown-menu {
display: block;
}
Как на компьютере все отлично. Но вот в мобильной версии при клике на раздел, переходит в сам раздел, а выпадающее меню появляется лишь на мгновение.
Посмотрел документацию bootstap 3 и добавил к тегу А такое
И вроде бы хорошо, в мобильной раскрывается список услуг, на компьютере тоже самое. А вот сам раздел Услуги становиться не кликабельным.
Подскажите пожалуйста, что можно с этим сделать?