<header>
<!-- /.border-b -->
<div x-data="{ animate: false }" class="flex flex-col mx-auto max-w-screen lg:px-4 lg:items-center lg:justify-between lg:flex-row lg:px-6 lg:px-8">
<div class="container container-wide">
<div class="w-full flex-flex-row">
<div class="flex flex-row items-center justify-between px-4 lg:py-4">
<a href="/en/" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
</a>
<button class="p-2 my-4 -mr-4 border rounded-lg md:hidden focus:outline-none focus:shadow-outline border-borderColor" @click.prevent="animate = (animate) ? false : true;document.body.classList.add('overflow-hidden');">
<span class="sr-only">Toggle Navigation</span>
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="10"></rect>
<rect y="30" width="100" height="10"></rect>
<rect y="60" width="100" height="10"></rect>
</svg>
</button>
</div>
<nav
aria-label="primary"
class="relative z-20 flex-col flex-grow hidden w-full pb-4 md:pb-0 md:flex md:justify-between md:flex-row">
<div class="relative flex flex-col group">
<a href="#" class="flex-row items-center block w-full px-4 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat text-textBrand-nav">
<span class="inline-block">Services</span>
</a>
<div class="absolute z-10 flex-col hidden bg-grayBrand-dropdown group-hover:block w-560 mt-nav">
<div class="flex flex-row w-full">
<div class="w-3/5 p-4 bg-white shadow-lg">
<div class="flex flex-col mx-3">
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
</div>
</div>
<div class="w-2/5 p-4">
<p class="font-bold uppercase text-14 text-textBrand">Featured Links</p>
<ul>
<li><a href="#" target="_self">Lorem Link</a></li>
<li><a href="#" target="_self">Lorem Link</a></li>
<li><a href="#" target="_self">Lorem Link</a></li>
<li><a href="#" target="_self">Lorem Link</a></li>
</ul>
<!-- /.testing -->
</div>
</div>
<!-- /.flex flex-row w-full -->
</div>
</div>
<div class="relative flex flex-col group">
<a href="#" class="flex-row items-center block w-full px-4 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat text-textBrand-nav">
<span class="inline-block">Opportunities</span>
</a>
<div class="absolute z-10 hidden mt-nav bg-grayBrand-dropdown w-280 group-hover:block">
<div class="px-2 pt-2 pb-4 shadow-lg">
<div class="flex flex-col mx-3">
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
</div>
</div>
</div>
</div>
<div class="relative group">
<button class="flex flex-row items-center w-full px-4 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat">
<span>Projects</span>
</button>
<div class="absolute z-10 hidden bg-grayBrand-dropdown w-280 group-hover:block">
<div class="px-2 pt-2 pb-4 shadow-lg">
<div class="flex flex-col mx-3">
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col group">
<a href="https://hotd-craft.clients.bostonwebdevelopment.com/accelerators/" class="flex-row items-center block w-full px-4 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat text-textBrand-nav">
<span class="inline-block">Projects</span>
</a>
<div class="absolute z-10 hidden mt-nav bg-grayBrand-dropdown w-280 group-hover:block">
<div class="px-2 pt-2 pb-4 shadow-lg">
<div class="flex flex-col mx-3">
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col group">
<a href="#" class="flex-row items-center block w-full px-6 py-4 mt-2 text-base font-bold text-left uppercase bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 focus:outline-none font-montserrat text-textBrand-nav">
<span class="inline-block">About Us</span>
</a>
<div class="absolute z-10 hidden mt-nav bg-grayBrand-dropdown w-280 group-hover:block">
<div class="px-2 pt-2 pb-4 shadow-lg">
<div class="flex flex-col mx-3">
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
<a href="#" class="flex flex-row block pb-2 mb-4 no-underline border-b hover:underline text-textBrand-nav text-14 font-robotoCondensed hover:font-bold border-grayBrand-light">
Lorem Link
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- /.flex-flex-row w-full -->
</div>
<!-- /.container container-wide -->
<nav
class="absolute top-0 right-0 z-50 w-2/3 h-full min-h-screen py-6 pl-4 pr-16 overflow-x-visible overflow-y-scroll border-l border-gray-800 bg-blue-600"
:class="{ 'hidden': false }"
x-show="animate"
@click.away="animate = false"
x-transition:enter="transition ease-out duration-200 origin-right"
x-transition:enter-start="transform scale-x-0 opacity-0"
x-transition:enter-end=" transform scale-x-100 opacity-100"
x-transition:leave="transition ease-in duration-200 origin-right"
x-transition:leave-start=" transform scale-x-100 opacity-100"
x-transition:leave-end=" transform scale-x-0 opacity-0"
x-cloak>
<button @click.prevent="animate = (animate) ? false : true;document.body.classList.remove('overflow-hidden');" class="relative px-2 py-1 mb-8 text-white">X</button>
<ul>
<li class="uppercase font-robotoCondensed text-15">
<a href="#" class="block py-2 text-white no-underline border-b border-white">Contact Us</a>
</li>
<li class="mt-2 uppercase font-robotoCondensed text-15">
<a href="#" class="block py-2 text-white no-underline border-b border-white">Services</a>
<ul class="pl-3 mt-4 list-inside">
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
</ul>
</li>
<li class="mt-2 uppercase font-robotoCondensed text-15">
<a href="#" class="block py-2 text-white no-underline border-b border-white">Opportunities</a>
<ul class="pl-3 mt-4 list-inside">
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
</ul>
</li>
<li class="mt-2 uppercase font-robotoCondensed text-15">
<a href="https://hotd-craft.clients.bostonwebdevelopment.com/accelerators/" class="block py-2 text-white no-underline border-b border-white">Projects</a>
<ul class="pl-3 mt-4 list-inside">
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
</ul>
</li>
<li class="mt-2 uppercase font-robotoCondensed text-15">
<a href="#" class="block py-2 text-white no-underline border-b border-white">About Us</a>
<ul class="pl-3 mt-4 list-inside">
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
<li class="my-2 font-robotoCondensed"><a href="#" class="py-6 text-white no-underline normal-case text-13">Lorem Link</a></li>
</ul>
</li>
<li class="uppercase font-robotoCondensed text-15">
<a href="#" class="block py-2 text-white no-underline border-b border-white">News</a>
</li>
<li class="uppercase font-robotoCondensed text-15">
<a href="#" class="block py-2 text-white no-underline border-b border-white">Events</a>
</li>
</ul>
</nav>
<div>
</header>
<main>
<div class="container p-4 bg-blue-200 mb-8">
<h1 class="text-3xl mb-8 leading-snug">Dropdown Nav with mobile off-canvas menu using Tailwind and AlpineJs</h1>
<p class="text-lg mb-4">
Dropdowns not working in <span class="font-bold">codepen</span> because the CDN version of tailwind does not <a href="https://tailwindcss.com/docs/pseudo-class-variants#group-hover">include group:hover</a>.
Add the following to your tailwind config file and the hover dropdowns will work.
</p>
<code class="font-monospace bg-gray-100 p-2 my-8 block">
display: ['responsive', 'group-hover', 'group-focus'],
</code>
<p class="text-lg mb-4">
I recieved some assistance from the AlpineJs discord community setting up the offcanvas for another project, but have adapted it to work here for the mobile menu.
</p>
</div>
<div class="container p-4 bg-gray-200">
<p class="text-lg mb-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni commodi necessitatibus itaque assumenda rerum? Sunt enim maxime nesciunt fugiat odit aspernatur veniam fuga harum, sint quisquam in! Suscipit, laboriosam. Repellat inventore corporis tempore nesciunt nobis fugiat autem magnam totam quo.
</p><!-- /.text-lg mb-4 -->
<p class="text-lg mb-4">
Accusantium modi amet aliquid at quas labore voluptate similique nisi veniam beatae, consectetur ex blanditiis cum, minus fugiat aliquam libero corporis officia ratione? Ipsum nulla totam doloremque repudiandae veniam iste vel illo corporis? Inventore sapiente officia, eos maxime consequatur id!
</p><!-- /.text-lg mb-4 -->
<p class="text-lg mb-4">
Ut fugiat, soluta sint dolorem possimus nihil et excepturi in odio eaque voluptatum ipsam itaque, delectus recusandae. Laboriosam atque tempore sint unde tempora cumque harum? Maxime, repellendus nobis molestias aspernatur quo, optio aperiam tempora possimus quis illo a impedit minima!
</p><!-- /.text-lg mb-4 -->
<p class="text-lg mb-4">
Ipsa maxime, eligendi repellat cumque exercitationem asperiores eos enim debitis unde distinctio accusamus consequatur. Impedit vero error nostrum at. Possimus commodi maxime magnam laboriosam earum, sed error tempora molestias laudantium asperiores delectus cupiditate esse minus odit eum illo voluptatem quam.
</p><!-- /.text-lg mb-4 -->
<p class="text-lg mb-4">
Accusantium explicabo consequuntur eum nobis cum delectus eius numquam corrupti temporibus adipisci, perspiciatis repellat eligendi earum dignissimos minus ipsum labore odio possimus magnam molestiae ducimus animi. Quia, animi. Neque rerum eos nihil officia ipsum dolorum accusamus dignissimos laudantium earum aliquam.
</p><!-- /.text-lg mb-4 -->
<p class="text-lg mb-4">
Deleniti facilis quidem vitae, illum modi aperiam, officia earum optio at excepturi ad, perspiciatis tempore saepe non rem eos neque aliquid facere omnis dignissimos corporis vel nesciunt! Cupiditate velit assumenda aliquam nesciunt nemo asperiores dolore dignissimos, eveniet autem at eaque.
</p><!-- /.text-lg mb-4 -->
<p class="text-lg mb-4">
Et amet, reiciendis aliquid magni aperiam dicta molestias exercitationem, aspernatur corrupti earum sapiente? Iusto officia porro ratione sequi quo, magnam ea blanditiis quisquam fugit et maiores non vero dolorem, aspernatur omnis esse nemo error. Minus tempora beatae aperiam vel dicta.
</p><!-- /.text-lg mb-4 -->
</div>
</main>
!
