<div class="nav-dropdown"> <span class="nav-link nav-dropdown-toggle "> Галерея <span class="dropdown-arrow">▾</span> </span> <div class="nav-dropdown-menu"> <a href="/gallery" class="nav-dropdown-item ">🎨 Арты</a> <a href="/memes" class="nav-dropdown-item ">😂 Мемы</a> </div> </div> <style> .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .dropdown-arrow { font-size: 0.7em; transition: transform 0.2s; display: inline-block; } .nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; background: rgba(10,10,25,0.97); border: 1px solid rgba(145,71,255,0.35); border-radius: 12px; padding: 8px; z-index: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(145,71,255,0.15); backdrop-filter: blur(8px); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; animation: navDropdownFade 0.15s ease; } @keyframes navDropdownFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nav-dropdown-item { display: block; padding: 10px 14px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.5px; transition: 0.15s; white-space: nowrap; } .nav-dropdown-item:hover { background: rgba(145,71,255,0.18); color: var(--neon, #ff4dff); } .nav-dropdown-item.active { color: var(--neon, #ff4dff); background: rgba(145,71,255,0.12); } /* Мобильные: меню по тапу — клик через JS ниже */ @media (max-width: 768px) { .nav-dropdown-menu { position: static; display: none; margin-top: 6px; box-shadow: none; border: 1px solid rgba(145,71,255,0.2); } .nav-dropdown-menu.open { display: block; } } </style> <script> // Тап по "Галерея" на мобильных открывает/закрывает меню document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.nav-dropdown-toggle').forEach(toggle => { toggle.addEventListener('click', (e) => { if (window.innerWidth <= 768) { e.preventDefault(); const menu = toggle.nextElementSibling; menu.classList.toggle('open'); } }); }); }); </script>