5 способов создания динамической навигации для современных сайтов

<!-- HTML структура -->
<nav class="dynamic-nav">
<ul>
<li class="dropdown">
<a href="#">Категория 1</a>
<ul class="dropdown-content">
<li><a href="#">Подкатегория 1.1</a></li>
<li><a href="#">Подкатегория 1.2</a></li>
</ul>
</li>
<li><a href="#">Категория 2</a></li>
</ul>
</nav>

/* CSS стили */
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

// JavaScript для дополнительной функциональности
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', event => {
if(event.target.matches('a')) {
item.querySelector('.dropdown-content').classList.toggle('active');
event.preventDefault();
}
});
});

/* Улучшенный CSS с анимацией */
.dropdown-content {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

// JavaScript с таймером
let timeout;
const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
dropdown.addEventListener('mouseenter', () => {
clearTimeout(timeout);
dropdowns.forEach(d => {
if (d !== dropdown) d.classList.remove('active');
});
dropdown.classList.add('active');
});

dropdown.addEventListener('mouseleave', () => {
timeout = setTimeout(() => {
dropdown.classList.remove('active');
}, 300);
});
});

<!-- HTML структура -->
<header>
<div class="logo">Логотип</div>
<button class="menu-toggle">☰</button>
<nav class="main-nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>

/* CSS с медиа-запросами */
@media screen and (max-width: 768px) {
.menu-toggle {
display: block;
}
.main-nav {
display: none;
width: 100%;
position: absolute;
top: 60px;
left: 0;
background: #fff;
}
.main-nav.active {
display: block;
}
.main-nav ul {
flex-direction: column;
}
}

// JavaScript для переключения
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.main-nav').classList.toggle('active');
});

/* Улучшенный CSS для бокового меню */
.main-nav {
position: fixed;
top: 0;
right: -300px; /* Начальное положение за пределами экрана */
width: 300px;
height: 100%;
background: #333;
transition: transform 0.3s ease;
z-index: 1000;
}
.main-nav.active {
transform: translateX(-300px);
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
}
.overlay.active {
display: block;
}

// Улучшенный JavaScript
const menuToggle = document.querySelector('.menu-toggle');
const mainNav = document.querySelector('.main-nav');
const body = document.body;

menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
mainNav.classList.toggle('active');

// Создаем оверлей при открытии меню
if (!document.querySelector('.overlay')) {
const overlay = document.createElement('div');
overlay.className = 'overlay';
body.appendChild(overlay);

overlay.addEventListener('click', function() {
menuToggle.classList.remove('active');
mainNav.classList.remove('active');
this.classList.remove('active');
});
}

document.querySelector('.overlay').classList.toggle('active');

// Блокируем прокрутку страницы при открытом меню
if (mainNav.classList.contains('active')) {
body.style.overflow = 'hidden';
} else {
body.style.overflow = '';
}
});

// Генерация меню на основе заголовков страницы
document.addEventListener('DOMContentLoaded', function() {
const mainContent = document.querySelector('.content');
const navigation = document.querySelector('.page-nav ul');

// Получаем все заголовки h2 и h3
const headings = mainContent.querySelectorAll('h2, h3');

headings.forEach(heading => {
// Создаём уникальный ID для заголовка, если его нет
if (!heading.id) {
heading.id = heading.textContent.toLowerCase().replace(/\s+/g, '-');
}

// Создаём элемент меню
const listItem = document.createElement('li');
const link = document.createElement('a');

link.href = `#${heading.id}`;
link.textContent = heading.textContent;

// Добавляем класс в зависимости от уровня заголовка
listItem.className = heading.tagName.toLowerCase();

listItem.appendChild(link);
navigation.appendChild(listItem);
});

// Добавляем обработчик для плавной прокрутки
navigation.querySelectorAll('a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});

// PHP-код для генерации меню из базы данных
<?php
function generateMenu($parent = 0, $level = 0) {
global $db;

$query = $db->prepare("SELECT * FROM menu_items WHERE parent_id = ? ORDER BY position");
$query->execute([$parent]);

if ($query->rowCount() > 0) {
echo $level === 0 ? '<ul class="main-menu">' : '<ul class="submenu">';

while ($item = $query->fetch(PDO::FETCH_ASSOC)) {
echo '<li class="menu-item level-' . $level . '">';
echo '<a href="' . htmlspecialchars($item['url']) . '">' . htmlspecialchars($item['title']) . '</a>';

// Рекурсивно ищем дочерние элементы
generateMenu($item['id'], $level + 1);

echo '</li>';
}

echo '</ul>';
}
}

// Вызов функции для отображения меню
generateMenu();
?>

<!-- HTML структура -->
<nav class="parallax-nav">
<ul>
<li>
<a href="#section1">
<span class="icon" data-depth="0.3">🏠</span>
<span class="text" data-depth="0.1">Главная</span>
</a>
</li>
<li>
<a href="#section2">
<span class="icon" data-depth="0.4">💼</span>
<span class="text" data-depth="0.2">Портфолио</span>
</a>
</li>
</ul>
</nav>

// JavaScript с использованием библиотеки parallax.js
document.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.parallax-nav li');

navItems.forEach(item => {
item.addEventListener('mousemove', function(e) {
const rect = item.getBoundingClientRect();
const x = e.clientX – rect.left;
const y = e.clientY – rect.top;

item.querySelectorAll('[data-depth]').forEach(element => {
const depth = parseFloat(element.getAttribute('data-depth'));
const moveX = (x – rect.width / 2) * depth;
const moveY = (y – rect.height / 2) * depth;

element.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});

item.addEventListener('mouseleave', function() {
item.querySelectorAll('[data-depth]').forEach(element => {
element.style.transform = 'translate(0, 0)';
});
});
});
});

// JavaScript для контекстно-зависимой навигации
const contextNav = {
// Определяем различные контексты
contexts: {
'home': ['Возможности', 'Преимущества', 'Отзывы', 'Контакты'],
'product': ['Описание', 'Характеристики', 'Цены', 'Доставка', 'Гарантия'],
'blog': ['Популярные статьи', 'Категории', 'Архив', 'Подписка']
},

// Определяем текущий контекст
detectContext: function() {
const path = window.location.pathname;

if (path === '/' || path === '/index.html') return 'home';
if (path.includes('/product')) return 'product';
if (path.includes('/blog')) return 'blog';

return 'home'; // По умолчанию
},

// Обновляем навигацию
updateNavigation: function() {
const currentContext = this.detectContext();
const navItems = this.contexts[currentContext];
const navContainer = document.querySelector('.context-nav');

navContainer.innerHTML = '';

navItems.forEach(item => {
const li = document.createElement('li');
const a = document.createElement('a');

a.href = '#' + item.toLowerCase().replace(/\s+/g, '-');
a.textContent = item;

li.appendChild(a);
navContainer.appendChild(li);
});
},

// Инициализация
init: function() {
this.updateNavigation();

// Обновляем при изменении URL
window.addEventListener('popstate', () => this.updateNavigation());
}
};

// Запускаем
document.addEventListener('DOMContentLoaded', () => contextNav.init());

// Псевдокод для навигации на основе ИИ
class AINavigation {
constructor() {
this.userPreferences = this.loadUserPreferences();
this.navigationItems = document.querySelectorAll('.nav-item');
this.userInteractions = [];
}

loadUserPreferences() {
// Получаем данные из localStorage или от сервера
return JSON.parse(localStorage.getItem('userPreferences')) || {};
}

trackInteraction(item) {
this.userInteractions.push({
item: item.getAttribute('data-nav-id'),
timestamp: Date.now()
});

// Отправляем данные на сервер для анализа
this.sendInteractionData();
}

predictRelevantItems() {
// Здесь был бы запрос к API машинного обучения
// Для примера используем упрощенную логику
const recentInteractions = this.userInteractions
.slice(-10)
.map(i => i.item);

// Подсчитываем частоту взаимодействий
const frequency = {};
recentInteractions.forEach(item => {
frequency[item] = (frequency[item] || 0) + 1;
});

// Сортируем по частоте
return Object.entries(frequency)
.sort((a, b) => b[1] – a[1])
.map(entry => entry[0]);
}

updateNavigation() {
const relevantItems = this.predictRelevantItems();

// Подсвечиваем релевантные пункты меню
this.navigationItems.forEach(item => {
const itemId = item.getAttribute('data-nav-id');
const relevanceIndex = relevantItems.indexOf(itemId);

if (relevanceIndex !== -1) {
item.style.order = relevanceIndex;
item.classList.add('ai-suggested');
} else {
item.style.order = 999;
item.classList.remove('ai-suggested');
}
});
}

init() {
// Добавляем отслеживание кликов
this.navigationItems.forEach(item => {
item.addEventListener('click', () => this.trackInteraction(item));
});

// Обновляем навигацию каждые 5 минут
setInterval(() => this.updateNavigation(), 5 * 60 * 1000);

// Первоначальное обновление
this.updateNavigation();
}
}

// Инициализация
const aiNav = new AINavigation();
aiNav.init();