Spaces:
Running
Running
Design a sleek, modern, and professional website navigation menu featuring the following links: Home, Services, Process, About. The menu should be visually appealing, easy to navigate, with a clean layout, subtle hover effects, and a polished appearance. Remove any other menu items and ensure the overall design exudes high quality and user-friendliness.
c8d027c verified | class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .navbar { | |
| transition: all 0.3s ease; | |
| } | |
| .navbar-scrolled { | |
| background-color: rgba(15, 23, 42, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .navbar { | |
| background-color: transparent; | |
| backdrop-filter: none; | |
| } | |
| .nav-link { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .nav-link span:last-child { | |
| transform-origin: left; | |
| transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); | |
| } | |
| .nav-link:hover span:last-child { | |
| transform: scaleX(1); | |
| } | |
| .nav-link.active { | |
| color: white; | |
| } | |
| .nav-link.active span:last-child { | |
| transform: scaleX(1); | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| background: rgba(15, 23, 42, 0.98); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 0.75rem; | |
| margin-top: 0.75rem; | |
| } | |
| .mobile-menu.open { | |
| max-height: 400px; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); | |
| } | |
| .dropdown-menu { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| <nav class="navbar fixed w-full z-50 px-6 py-4 transition-colors duration-300"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <a href="/" class="text-xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-primary-100 to-secondary-500">Complex Devs</a> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="/" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300"> | |
| <span class="relative z-10">Home</span> | |
| <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span> | |
| </a> | |
| <a href="#services" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300"> | |
| <span class="relative z-10">Services</span> | |
| <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span> | |
| </a> | |
| <a href="#process" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300"> | |
| <span class="relative z-10">Process</span> | |
| <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span> | |
| </a> | |
| <a href="#about" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300"> | |
| <span class="relative z-10">About</span> | |
| <span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span> | |
| </a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-gray-900 rounded-lg mt-2 shadow-xl"> | |
| <div class="px-4 py-2 space-y-2"> | |
| <a href="/" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span>Home</span> | |
| </div> | |
| </a> | |
| <a href="#services" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="layers" class="w-5 h-5"></i> | |
| <span>Services</span> | |
| </div> | |
| </a> | |
| <a href="#process" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| <span>Process</span> | |
| </div> | |
| </a> | |
| <a href="#about" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| <span>About</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <script> | |
| // Mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const menuButton = this.shadowRoot.getElementById('mobile-menu-button'); | |
| const mobileMenu = this.shadowRoot.getElementById('mobile-menu'); | |
| menuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| const icon = menuButton.querySelector('i'); | |
| if (mobileMenu.classList.contains('open')) { | |
| feather.replace(); | |
| icon.setAttribute('data-feather', 'x'); | |
| } else { | |
| feather.replace(); | |
| icon.setAttribute('data-feather', 'menu'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Navbar scroll effect | |
| const navbar = this.shadowRoot.querySelector('.navbar'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('navbar-scrolled'); | |
| } else { | |
| navbar.classList.remove('navbar-scrolled'); | |
| } | |
| }); | |
| // Close mobile menu when clicking a link | |
| const navLinks = this.shadowRoot.querySelectorAll('#mobile-menu a'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.remove('open'); | |
| const icon = menuButton.querySelector('i'); | |
| icon.setAttribute('data-feather', 'menu'); | |
| feather.replace(); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |