Содержание:
Bootstrap 4 - Navbar (основное меню)

Статья, в которой рассмотрим, как с помощью компонента Navbar создать вертикальное схлопывающееся меню для сайта.
Как с помощью Navbar создать основное вертикальное меню для сайта
Для создания основного вертикального меню необходимо:
- подключить на страницу CSS код, который будет определять вид меню на больших экранах;
- определённым образом организовать HTML код, который будет задавать нужное положение элементов.
HTML и CSS код вертикального меню для сайта на базе Navbar:
HTML
...
<!-- 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>
...

Как изменить расположение кнопки «гамбургер»
Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:
HTML
<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
:
HTML
...
<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
:
HTML
...
<!-- Выравнивание пунктов по правому краю -->
<ul class="navbar-nav text-right">
...
HTML
...
<!-- Выравнивание пунктов по центру -->
<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 и добавил к тегу А такое
И вроде бы хорошо, в мобильной раскрывается список услуг, на компьютере тоже самое. А вот сам раздел Услуги становиться не кликабельным.
Подскажите пожалуйста, что можно с этим сделать?