Содержание:
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"> ...
Пример меню в папке docs/examples/navbar/
==========
Немного неверно описал принцип работы меню в первом сообщении, правильно так: при сужении экрана ссылки перемещаются в dropdown, при расширении — возвращаются на место.
=====
Пример меню из папки docs/examples/navbar/ в версии 4.0 альфа 4 — это пример меню, которое сейчас у меня и из него мне нужно сделать вот такое меню: www.codeply.com/go/wKWHgsMXah
В стандартном bootstrap такого функционала нет.
1. Я задал вопрос автору сайта, а не тебе.
2. Если хочеш кому-то помочь-научись читать текст, а не между строк…
Например класса там в помине нет… и т. д…
Можно перенести подключение скриптов в head, тогда такого можно избежать. Но в этом случае увеличится время метрики FCP (первой отрисовки контента).
в js я удалил $(window).load(function() и теперь работает все ровно, может и тут в js можно что-то поправить\изменить?
Файл js disk.yandex.ru/d/5-VgNxgVKS4Z-g
Пробывал но неработает на jquery 3.2
Чтобы эту задачу решить, нужно просто удалить класс show у других открытых пунктов кроме открываемого:
Готовый пример в песочнице: b4-navbar-2
Для этого можно добавить класс fixed-top к элементу:
А также добавить padding сверху к основному контейнеру для мобильной версии, чтобы сдвинуть контент немного ниже.
Например:
Есть стандартный html.
При наведении на раздел Услуги появляется выпадающий список услуг и в сам раздел Услуги можно перейти!
Выпадающие услуги таким образом реализованы
.dropdown:hover > .dropdown-menu {
display: block;
}
Как на компьютере все отлично. Но вот в мобильной версии при клике на раздел, переходит в сам раздел, а выпадающее меню появляется лишь на мгновение.
Посмотрел документацию bootstap 3 и добавил к тегу А такое
И вроде бы хорошо, в мобильной раскрывается список услуг, на компьютере тоже самое. А вот сам раздел Услуги становиться не кликабельным.
Подскажите пожалуйста, что можно с этим сделать?