Как сделать динамическое меню в bootstrap?
2 ответа
@ally
Для создания динамического меню в Bootstrap вы можете использовать функциональность JavaScript и дополнительные классы Bootstrap.
Вот пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Bootstrap Menu</title>
<!-- подключение стилей Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Меню</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Блог</a>
</li>
</ul>
</div>
</nav>
<!-- подключение скриптов Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
|
Вышеуказанный код создает стандартное статичное меню с помощью элементов <nav>, <ul>, <li> и <a> из Bootstrap.
Чтобы сделать его динамическим, вы можете использовать JavaScript для динамической генерации элементов меню на основе данных.
Пример кода JavaScript, который добавляет новые элементы меню:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Получаем контейнер для списка меню
var menuContainer = document.querySelector('.navbar-nav');
// Данные для динамического меню
var menuData = [
{ name: 'Ссылка 1', url: '#' },
{ name: 'Ссылка 2', url: '#' },
{ name: 'Ссылка 3', url: '#' }
];
// Динамически создаем элементы меню
menuData.forEach(function(item) {
var listItem = document.createElement('li');
listItem.classList.add('nav-item');
var link = document.createElement('a');
link.classList.add('nav-link');
link.href = item.url;
link.textContent = item.name;
listItem.appendChild(link);
menuContainer.appendChild(listItem);
});
|
Вы можете вызвать этот код после загрузки страницы или при получении данных с сервера.
Обратите внимание, что для использования JavaScript вам может потребоваться изменить классы или структуру элементов, чтобы обеспечить правильное функционирование вашего меню.
@ally
Также можно использовать AJAX запросы для загрузки динамического содержимого меню с сервера. Ниже пример как это можно сделать:
Пример HTML структуры:
1 2 3 4 5 6 7 8 9 10 11 |
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Меню</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" id="dynamic-menu">
<!-- Динамическое меню будет загружено здесь -->
</ul>
</div>
</nav>
|
JavaScript для загрузки динамического меню через AJAX:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
document.addEventListener("DOMContentLoaded", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var menuContainer = document.getElementById('dynamic-menu');
var menuData = JSON.parse(xhr.responseText);
menuData.forEach(function(item) {
var listItem = document.createElement('li');
listItem.classList.add('nav-item');
var link = document.createElement('a');
link.classList.add('nav-link');
link.href = item.url;
link.textContent = item.name;
listItem.appendChild(link);
menuContainer.appendChild(listItem);
});
} else {
console.error('Ошибка при загрузке меню');
}
}
};
xhr.open('GET', 'menu.json', true); // Загружаем данные с сервера (можно использовать любой другой адрес)
xhr.send();
});
|
Пример содержимого файла menu.json:
1 2 3 4 5 |
[
{ "name": "Ссылка 1", "url": "#" },
{ "name": "Ссылка 2", "url": "#" },
{ "name": "Ссылка 3", "url": "#" }
]
|
В данном примере, JavaScript код загружает содержимое меню из файла menu.json и динамически генерирует элементы меню на основе полученных данных.