Skip to content

Instantly share code, notes, and snippets.

@gimesi

gimesi/mobile-subnavigation-toggle.html

Last active May 24, 2023 07:51
Show Gist options
  • Save gimesi/0f438999c28b02386781ae2833ebf968 to your computer and use it in GitHub Desktop.
Save gimesi/0f438999c28b02386781ae2833ebf968 to your computer and use it in GitHub Desktop.
Download ZIP
A navigation menu for mobile with toggle function for sublevel links powered by AlpineJS
Raw
mobile-subnavigation-toggle.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AlpineJS Mobile Menu with Subnavigation Toggle</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet" type="text/css">
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" type="text/css">
</head>
<body class="bg-white">
<nav x-data="{ navOpen: false }">
<!-- mobile menu button -->
<button class="p-2 text-gray-900 hover:bg-gray-100 focus:outline-none" aria-label="Main menu" aria-expanded="false" @click="navOpen = !navOpen" :class="{ 'bg-gray-200' : navOpen }">
<svg class="h-8 w-8" :class="{ 'hidden' : navOpen }" 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>
<svg class="hidden h-8 w-8" :class="{ 'hidden' : !navOpen }" 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>
<!-- mobile menu-->
<div class="hidden" :class="{ 'block' : navOpen , 'hidden' : !navOpen }">
<!-- with children -->
<div x-data="{ isOpen: false }">
<div class="w-full flex justify-between items-start">
<a href="#" class="bg-gray-100 hover:bg-gray-200 p-3 flex-grow">Link</a>
<a @click=" isOpen = !isOpen" class="bg-gray-300 hover:bg-gray-200 p-3 cursor-pointer focus:outline-none" :class="{ 'bg-gray-900' : isOpen , 'hover:bg-gray-800' : isOpen }">
<svg class="h-6 w-6 transform" :class="{ 'hidden' : isOpen }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<svg class="h-6 w-6 transform -rotate-45 text-white" :class="{ 'hidden' : !isOpen }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</a>
</div>
<div x-show="isOpen" class="flex flex-col bg-gray-900 text-gray-300">
<a href="#" class="text-sm flex p-3 hover:bg-gray-800">Subnav Link</a>
<a href="#" class="text-sm flex p-3 hover:bg-gray-800">Subnav Link</a>
<a href="#" class="text-sm flex p-3 hover:bg-gray-800">Subnav Link</a>
<a href="#" class="text-sm flex p-3 hover:bg-gray-800">Subnav Link</a>
<a href="#" class="text-sm flex p-3 hover:bg-gray-800">Subnav Link</a>
<a href="#" class="text-sm flex p-3 hover:bg-gray-800">Subnav Link</a>
</div>
</div>
<!-- without children-->
<div class="w-full flex">
<a href="#" class="bg-gray-100 hover:bg-gray-200 p-3 flex-grow">Link</a>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js" defer></script>
</body>
</html>
@asmit7
Copy link

asmit7 commented Feb 11, 2023

good

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment