Скляне попап-меню в стилі Windows Vista

💡 Скляне попап-меню в стилі Windows Vista - просто, красиво, сучасно

У цій статті ми створимо спливаюче меню з ефектом "матового скла", як в інтерфейсі Windows Vista.

Особливості:

• Простий HTML + CSS + JS
• Гарний скляний ефект з backdrop-filter
• Закриття кліку поза вікном

📄 HTML-розмітка

<button id="openMenu" class="glass-button">Відкрити меню</button>

<div id="popupMenu" class="glass-popup">
 <div class="glass-header">
 <span>Меню</span>
 <button id="closeMenu">×</button>
 </div>
 <ul class="glass-content">
 <li><a href="#">Головна</a></li>
 <li><a href="#">Про нас</a></li>
 <li><a href="#">Контакти</a></li>
 <li><a href="#">Блог</a></li>
 </ul>
</div>

<div id="overlay" class="glass-overlay"></div>

🎨 CSS для матового скла

body {
 font-family: 'Segoe UI', sans-serif;
 background: linear-gradient(135deg, #2c3e50, #4ca1af);
 height: 100vh;
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
}

.glass-button {
 padding: 12px 24px;
 background: rgba(255,255,255,0.1);
 border: 1px solid rgba(255,255,255,0.3);
 color: white;
 backdrop-filter: blur(6px);
 border-radius: 12px;
 cursor: pointer;
}

.glass-popup {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) scale(0.9);
 background: rgba(255,255,255,0.1);
 border: 1px solid rgba(255,255,255,0.3);
 border-radius: 20px;
 padding: 20px;
 min-width: 300px;
 max-width: 90vw;
 color: #fff;
 backdrop-filter: blur(10px);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 z-index: 1001;
 display: none;
 transition: all 0.3s ease;
}

.glass-popup.active {
 display: block;
 transform: translate(-50%, -50%) scale(1);
}

.glass-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 15px;
}

.glass-content li a {
 color: #fff;
 text-decoration: none;
}

🧠 JavaScript

const openBtn = document.getElementById('openMenu');
const closeBtn = document.getElementById('closeMenu');
const popup = document.getElementById('popupMenu');
const overlay = document.getElementById('overlay');

function openPopup() {
 popup.classList.add('active');
 overlay.classList.add('active');
}

function closePopup() {
 popup.classList.remove('active');
 overlay.classList.remove('active');
}

openBtn.addEventListener('click', openPopup);
closeBtn.addEventListener('click', closePopup);
overlay.addEventListener('click', closePopup);

🔚 Висновок

Таке скляне меню додасть сучасності твоєму сайту. Можна адаптувати під модальні вікна, повідомлення або форму зворотного зв'язку.

Вдалої інтеграції! 🚀