Galaxy Menu - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Galaxy Menu</title> <style> body { font-family: 'Arial', sans-serif; background-color: #0d0d0d; background-image: url('https://www.publicdomainpictures.net/pictures/320000/velka/galaxy.jpg'); background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: white; } .galaxy-dropdown { position: relative; display: inline-block; } .galaxy-dropdown-toggle { background-color: #6200ea; color: white; padding: 12px 24px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; transition: background-color 0.3s ease; box-shadow: 0 0 10px #6200ea, 0 0 20px #6200ea, 0 0 30px #6200ea; } .galaxy-dropdown-toggle:hover { background-color: #3700b3; } .galaxy-dropdown-toggle .icon { margin-left: 10px; transition: transform 0.3s ease; } .galaxy-dropdown-toggle .icon.rotate { transform: rotate(180deg); } .galaxy-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: rgba(0, 0, 0, 0.8); border: 1px solid #6200ea; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 0; opacity: 0; z-index: 1000; } .galaxy-dropdown-menu.show { display: block; max-height: 400px; opacity: 1; } .galaxy-dropdown-menu-item { padding: 12px 24px; display: flex; align-items: center; transition: background-color 0.3s ease; cursor: pointer; } .galaxy-dropdown-menu-item:hover { background-color: rgba(98, 0, 234, 0.2); } .galaxy-dropdown-menu-item .icon { margin-right: 10px; font-size: 18px; } .galaxy-dropdown-menu-item .text { font-size: 16px; } .galaxy-dropdown-menu-item .emoji { margin-left: auto; font-size: 20px; } </style> </head> <body> <div class="galaxy-dropdown"> <button class="galaxy-dropdown-toggle"> Galaxy Menu <span class="icon">▼</span> </button> <div class="galaxy-dropdown-menu"> <div class="galaxy-dropdown-menu-item"> <span class="icon">🏠</span> <span class="text">Home</span> <span class="emoji">🚀</span> </div> <div class="galaxy-dropdown-menu-item"> <span class="icon">🔍</span> <span class="text">Search</span> <span class="emoji">🌌</span> </div> <div class="galaxy-dropdown-menu-item"> <span class="icon">📧</span> <span class="text">Contact</span> <span class="emoji">🛸</span> </div> <div class="galaxy-dropdown-menu-item"> <span class="icon">⚙️</span> <span class="text">Settings</span> <span class="emoji">🔭</span> </div> </div> </div> <script> document.querySelector('.galaxy-dropdown-toggle').addEventListener('click', function() { const dropdownMenu = document.querySelector('.galaxy-dropdown-menu'); const dropdownIcon = document.querySelector('.galaxy-dropdown-toggle .icon'); dropdownMenu.classList.toggle('show'); dropdownIcon.classList.toggle('rotate'); }); document.addEventListener('click', function(event) { const dropdown = document.querySelector('.galaxy-dropdown'); const dropdownMenu = document.querySelector('.galaxy-dropdown-menu'); const dropdownIcon = document.querySelector('.galaxy-dropdown-toggle .icon'); if (!dropdown.contains(event.target)) { dropdownMenu.classList.remove('show'); dropdownIcon.classList.remove('rotate'); } }); </script> </body> </html>