Create Responsive Side Navigation using TailwindCSS & AlpineJs
Wed Jun 07 2023 10:18:26 GMT+0000 (Coordinated Universal Time)
Saved by @meetmario #undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> <script src="https://cdn.tailwindcss.com"></script> <script src="//unpkg.com/alpinejs" defer></script> </head> <body class="bg-[url('unsplash.jpg')] bg-cover" x-data="{ openMenu : false }" :class="openMenu ? 'overflow-hidden' : 'overflow-visible' "> <style> [x-cloak] { display: none !important; } </style> <header class="flex justify-between items-center bg-white drop-shadow-sm py-4 px-8"> <!-- Logo --> <a href="/" class="text-lg font-bold">Logo</a> <!-- Mobile Menu Toggle --> <button class="flex md:hidden flex-col items-center align-middle" @click="openMenu = !openMenu" :aria-expanded="openMenu" aria-controls="mobile-navigation" aria-label="Navigation Menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> <span class="text-xs">Menu</span> </button> <!-- Main Navigations --> <nav class="hidden md:flex"> <ul class="flex flex-row gap-2"> <li> <a href="#" class="inline-flex py-2 px-3 bg-slate-200 rounded" aria-current="true">Home</a> </li> <li> <a href="#" class="inline-flex py-2 px-3 hover:bg-slate-200 rounded">About</a> </li> <li> <a href="#" class="inline-flex py-2 px-3 hover:bg-slate-200 rounded">Articles</a> </li> <li> <a href="#" class="inline-flex py-2 px-3 hover:bg-slate-200 rounded">Contact</a> </li> </ul> </nav> </header> <!-- Pop Out Navigation --> <nav id="mobile-navigation" class="fixed top-0 right-0 bottom-0 left-0 backdrop-blur-sm z-10" :class="openMenu ? 'visible' : 'invisible' " x-cloak> <!-- UL Links --> <ul class="absolute top-0 right-0 bottom-0 w-10/12 py-4 bg-white drop-shadow-2xl z-10 transition-all" :class="openMenu ? 'translate-x-0' : 'translate-x-full'"> <li class="border-b border-inherit"> <a href="#" class="block p-4" aria-current="true">Home</a> </li> <li class="border-b border-inherit"> <a href="#" class="block p-4">About</a> </li> <li class="border-b border-inherit"> <a href="#" class="block p-4">Articles</a> </li> <li class="border-b border-inherit"> <a href="#" class="block p-4">Contact</a> </li> </ul> <!-- Close Button --> <button class="absolute top-0 right-0 bottom-0 left-0" @click="openMenu = !openMenu" :aria-expanded="openMenu" aria-controls="mobile-navigation" aria-label="Close Navigation Menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 absolute top-2 left-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </nav> </body> </html>
Comments