Вопрос или проблема
Bootstrap 5: Как сделать горизонтальное меню-бургер
Я пытаюсь использовать Bootstrap для создания адаптивного горизонтального меню-гамбургера. Моя основная проблема заключается в том, что при текущем подходе переключатель гамбургера имеет ширину 100%, и анимация происходит вертикально, а не горизонтально. Есть ли решение для этого в Bootstrap или мне придется переписывать всё с использованием обычного CSS?
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
.dropdown.language:hover > .dropdown-menu, .dropdown.language.open > .dropdown-menu {
display: block;
}
.nav.main-menu .nav-link:hover {
background-color: #0d6efd;
color:#ffffff;
transition: all 800ms ease-out;
-webkit-transition: all 800ms ease-out;
-ms-transition: all 800ms ease-out;
-o-transition: all 800ms ease-out;
-ms-transition: all 800ms ease-out;
}
html {
font-size: calc(0.5em + 0.5vw);
}
* {
border: 1px solid black;
}
</style>
<header class="d-flex flex-wrap justify-content-center py-3 mb-0 px-5 border-bottom sticky-top bg-white">
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<img src="logo.jpg" width="32" height="32" />
<span class="fs-4 px-3 text-primary d-none d-lg-inline">Имя компании</span>
</a>
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="collapse navbar-collapse" id="n_bar">
<ul class="nav nav-pills fs-5 align-items-center main-menu">
<li class="nav-item"><a href="#" class="nav-link text-uppercase active">Главная</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">Продукты</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">Фабрики</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">О нас</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">Контакты</a></li>
</ul>
</div>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#n_bar" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="background-image: url(images/bars.svg)" alt="bars" text="bars"></span>
</button>
</nav>
<ul class="nav nav-pills align-items-center mx-2">
<li class="nav-item">
<img src="images/globe.svg" width="24" height="24" />
</li>
<li class="nav-item dropdown language">
<a class="nav-link px-2 dropdown-toggle" href="#" role="button">
<img src="images/en.jpg" alt="en" title="en" />
<span class="px-1">Английский</span>
</a>
<div class="dropdown-menu">
<a class="nav-link dropdown-item px-3" href="/hu">
<img src="images/hu.jpg" alt="hu" title="hu">
<span class="px-1">Венгерский</span>
</a>
<a class="nav-link dropdown-item px-3" href="/ro">
<img src="images/ro.jpg" alt="ro" title="ro">
<span class="px-1">Румынский</span>
</a>
</div>
</li>
</ul>
</header>
Ответ или решение
Чтобы создать горизонтальное меню-гамбургер с использованием Bootstrap 5, необходимо внести несколько изменений в ваш код. Основная проблема, которую вы испытываете, связана с тем, что при раскрытии меню элементы располагаются вертикально, а не горизонтально. Мы можем решить это, просто добавив некоторые классы Bootstrap и немного изменив стили.
Вот пример того, как вы можете реализовать горизонтальное меню-гамбургер.
Полный пример кода
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Горизонтальное меню-гамбургер</title>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
.nav.main-menu .nav-link:hover {
background-color: #0d6efd;
color: #ffffff;
}
.navbar-toggler {
border: none;
}
.navbar-collapse {
flex-grow: 0;
}
@media (max-width: 576px) {
.navbar-nav {
flex-direction: column;
}
}
</style>
</head>
<body>
<header class="d-flex flex-wrap justify-content-center py-3 mb-0 px-5 border-bottom sticky-top bg-white">
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<img src="logo.jpg" width="32" height="32" alt="Логотип">
<span class="fs-4 px-3 text-primary d-none d-lg-inline">Название компании</span>
</a>
<nav class="navbar navbar-expand-sm navbar-dark">
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#n_bar" aria-controls="n_bar" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="n_bar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item"><a href="#" class="nav-link text-uppercase active">Главная</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">Продукты</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">Фабрики</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">О нас</a></li>
<li class="nav-item"><a href="#" class="nav-link text-uppercase">Контакты</a></li>
</ul>
</div>
</nav>
<ul class="nav nav-pills align-items-center mx-2">
<li class="nav-item">
<img src="images/globe.svg" width="24" height="24" alt="Глобус">
</li>
<li class="nav-item dropdown language">
<a class="nav-link px-2 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
<img src="images/en.jpg" alt="en" title="en">
<span class="px-1">English</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/hu"><img src="images/hu.jpg" alt="hu" title="hu"> Венгерский</a></li>
<li><a class="dropdown-item" href="/ro"><img src="images/ro.jpg" alt="ro" title="ro"> Румынский</a></li>
</ul>
</li>
</ul>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Объяснение изменений:
-
Использование классов Bootstrap: Мы используем классы
navbar,navbar-expand-smиnavbar-nav, чтобы задать горизонтальное направление для элементов меню на больших экранах.navbar-expand-smпозволяет элементам навигации оставаться горизонтальными до первой точки прерывания (576px по умолчанию). -
Стили для кнопки-тогглера: Убедитесь, что кнопка
navbar-togglerправильно отображается и отсутствует рамка. - Стиль навигации: Мы убрали лишний стиль, который устанавливал флекс в колонку на всех экранах. Теперь это происходит только на экранах меньше 576px.
Применив указанные преобразования, вы получите горизонтальное меню с гамбургером, которое будет адаптироваться к разным размерам экранов.