Visionary Navigation Bar - 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>Visionary Navigation Bar</title> <style> body { margin: 0; font-family: 'Arial', sans-serif; background: linear-gradient(to right, #d4fc79, #96e6a1); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .navbar { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1200px; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: rgba(255, 255, 255, 0.2); border-radius: 15px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); animation: fadeIn 1.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(50px) translateX(-50%); } to { opacity: 1; transform: translateY(0) translateX(-50%); } } .navbar .brand { font-size: 24px; font-weight: bold; color: #fff; text-transform: uppercase; letter-spacing: 2px; } .navbar ul { list-style: none; display: flex; gap: 20px; } .navbar ul li { position: relative; } .navbar ul li a { text-decoration: none; color: #202020; font-size: 16px; font-weight: 500; padding: 8px 15px; border-radius: 10px; transition: all 0.3s ease; } .navbar ul li a:hover { background: rgba(255, 255, 255, 0.3); } .navbar ul li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; z-index: -1; opacity: 0; transition: all 0.3s ease; } .navbar ul li a:hover::before { opacity: 1; } .navbar .menu-icon { display: none; font-size: 24px; color: #fff; cursor: pointer; } @media (max-width: 768px) { .navbar ul { display: none; flex-direction: column; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); padding: 20px; border-radius: 15px; width: 90%; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } .navbar ul.show { display: flex; } .navbar .menu-icon { display: block; } } /* Icon Animations */ .navbar ul li a .icon { display: inline-block; margin-right: 8px; transition: transform 0.3s ease; } .navbar ul li a:hover .icon { transform: rotate(360deg); } </style> </head> <body> <div class="navbar"> <div class="brand">Visionary</div> <ul> <li><a href="#"><span class="icon">🏠</span>Home</a></li> <li><a href="#"><span class="icon">🖥️</span>Portfolio</a></li> <li><a href="#"><span class="icon">📈</span>Insights</a></li> <li><a href="#"><span class="icon">📞</span>Contact</a></li> </ul> <div class="menu-icon" onclick="toggleMenu()">☰</div> </div> <script> function toggleMenu() { const navbarMenu = document.querySelector('.navbar ul'); navbarMenu.classList.toggle('show'); } </script> </body> </html>