<script src="https://cdn.tailwindcss.com"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <body class="bg-gradient-to-br from-[#FFE4E1] via-[#FFF0EE] to-[#FFE4E1] min-h-screen"> <div x-data="{ open: false }" class="relative"> <!-- Navigation Bar --> <nav class="bg-white/80 backdrop-blur-sm shadow-sm"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <!-- Logo --> <div class="flex-shrink-0"> <h1 class="text-2xl font-bold bg-gradient-to-r from-rose-400 to-pink-400 bg-clip-text text-transparent"> Brand </h1> </div> <!-- Desktop Menu --> <div class="hidden md:flex items-center space-x-8"> <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Home</a> <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">About</a> <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Services</a> <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Portfolio</a> <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Contact</a> </div> <!-- Hamburger Button --> <button @click="open = !open" class="md:hidden relative w-10 h-10 flex items-center justify-center rounded-lg hover:bg-rose-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-300" aria-label="Toggle menu" > <div class="w-6 h-5 flex flex-col justify-between"> <span :class="open ? 'rotate-45 translate-y-2' : ''" class="block h-0.5 w-full bg-gray-700 transition-all duration-300 ease-in-out" ></span> <span :class="open ? 'opacity-0' : 'opacity-100'" class="block h-0.5 w-full bg-gray-700 transition-all duration-300 ease-in-out" ></span> <span :class="open ? '-rotate-45 -translate-y-2' : ''" class="block h-0.5 w-full bg-gray-700 transition-all duration-300 ease-in-out" ></span> </div> </button> </div> </div> </nav> <!-- Mobile Menu Overlay --> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm z-40 md:hidden" style="display: none;" ></div> <!-- Mobile Menu Panel --> <div x-show="open" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="fixed top-0 right-0 h-full w-64 bg-white shadow-2xl z-50 md:hidden" style="display: none;" > <div class="flex flex-col h-full"> <!-- Close Button --> <div class="flex justify-end p-4"> <button @click="open = false" class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-rose-50 transition-colors duration-200" aria-label="Close menu" > <ion-icon name="close-outline" class="text-2xl text-gray-700"></ion-icon> </button> </div> <!-- Menu Items --> <nav class="flex-1 px-4 py-6 space-y-2"> <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group"> <ion-icon name="home-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon> <span class="text-gray-700 group-hover:text-rose-400">Home</span> </a> <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group"> <ion-icon name="information-circle-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon> <span class="text-gray-700 group-hover:text-rose-400">About</span> </a> <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group"> <ion-icon name="briefcase-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon> <span class="text-gray-700 group-hover:text-rose-400">Services</span> </a> <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group"> <ion-icon name="images-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon> <span class="text-gray-700 group-hover:text-rose-400">Portfolio</span> </a> <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group"> <ion-icon name="mail-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon> <span class="text-gray-700 group-hover:text-rose-400">Contact</span> </a> </nav> <!-- Footer --> <div class="px-4 py-6 border-t border-gray-100"> <p class="text-sm text-gray-500 text-center">© 2026 Brand</p> </div> </div> </div> </div> <!-- Content Area --> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="text-center"> <h2 class="text-4xl font-bold text-gray-800 mb-4">Hamburger Menu Example</h2> <p class="text-gray-600 max-w-2xl mx-auto"> Click the hamburger icon on mobile view to see the smooth sliding menu animation. The menu features a professional gradient design with smooth transitions. </p> </div> </div>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
Login to leave a comment
No comments yet. Be the first!
No comments yet. Be the first!