'Responsive navbar in tailwind, replace hover event with tap on tablet using javascript
I have created a responsive navbar for a website using tailwind CSS. It is basically a CSS menu. With a desktop browser, when hovering over the Company menu item, the sub menu items are displayed in a drop down menu. This does not work on a tablet because there is no hover event. I was thinking about adding this feature using javascript. How to I go about adding a click/tap event to the Company menu item for touch devices so that the Company menu is displayed by a tap on a tablet device? The codepen demo of the current navbar is here.
const toggleNav = document.querySelector(".nav-list");
const toggleBtn = document.querySelector(".btn-toggle");
const overlay = document.querySelector(".overlay");
const body = document.querySelector("body");
toggleBtn.addEventListener("click", () => {
toggleNav.classList.toggle("active-nav");
body.classList.toggle("no-scroll");
overlay.classList.toggle("active");
toggleBtn.classList.toggle("active-toggle");
});
overlay.addEventListener("click", () => {
toggleNav.classList.remove("active-nav");
body.classList.remove("no-scroll");
overlay.classList.remove("active");
toggleBtn.classList.remove("active-toggle");
});
// [Dropdown]
const dropdownTrigger = document.querySelector(".has-dropdown");
const dropdownMenu = document.querySelector(".sub-menu");
dropdownTrigger.addEventListener("click", (event) => {
event.preventDefault();
dropdownTrigger.querySelector("svg").classList.toggle("active");
dropdownMenu.classList.toggle("active-sub");
});<body>
<!-- [Backgoround layer] -->
<span class="overlay"></span>
<!-- [Navbar] -->
<nav class="relative z-50 bg-dark">
<div class="mx-auto flex h-20 w-full max-w-[92%] items-center justify-between py-4 sm:h-28 sm:py-6">
<div class="">
<a href="#" class="flex items-center gap-3 font-primary text-3xl font-medium sm:text-5xl lg:text-[55px]">
To the Moon
</a>
</div>
<div class="nav-list lg:mt-5">
<ul class="!xl:justify-end relative flex flex-col space-y-2 md:flex-row md:items-center md:justify-center md:space-y-0 md:py-0">
<li class="px-4 py-2 md:py-4 lg:px-8">
<a href="#" class="relative font-primary text-base text-light transition-all duration-200 md:text-xl">
Home
<span class="inline-block; absolute -bottom-1 left-0 right-0 h-1 w-full bg-primary sm:h-1"></span>
</a>
</li>
<li class="px-4 py-2 md:py-4 lg:px-8">
<a href="#" class="font-primary text-base text-light transition-all duration-200 md:text-xl">Services</a>
</li>
<li class="group relative px-4 py-2 transition-all duration-300 md:py-4 md:hover:bg-primary md:hover:bg-opacity-60 lg:px-8">
<a href="#" class="has-dropdown flex items-center gap-3 font-primary text-base leading-6 text-light transition-all duration-200 md:text-xl">
Company
<svg class="sub-caret h-2.5 w-2.5 transform fill-current transition-all duration-200 sm:h-4 sm:w-4 md:group-hover:rotate-180" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background: new 0 0 386.257 386.257" viewBox="0 0 386.257 386.257">
<path d="m0 96.879 193.129 192.5 193.128-192.5z" />
</svg>
</a>
<ul class="sub-menu pl-3 md:pl-0">
<li class="px-4 pb-2 pt-4 md:py-3 lg:px-8">
<a href="#" class="border-b-transparent font-primary text-base text-light transition-all duration-200 hover:border-b-light md:border-b-2 md:text-xl">
<span class="md:hidden">-</span>
Portfolio
</a>
</li>
<li class="px-4 pt-2 md:py-3 lg:px-8">
<a href="#" class="border-b-transparent font-primary text-base text-light transition-all duration-200 hover:border-b-light md:border-b-2 md:text-xl">
<span class="md:hidden">-</span>
About
</a>
</li>
</ul>
</li>
<li class="px-4 pb-6 pt-2 pr-0 md:py-4 lg:pl-8">
<a href="#" class="border-b-2 border-b-transparent font-primary text-base text-light transition-all duration-200 md:text-xl">Contact</a>
</li>
</ul>
</div>
<button class="btn-toggle md:hidden">
<svg class="icon-bars h-6 w-6 fill-current" viewBox="0 0 55 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.5">
<path d="M0,25l55,0" style="fill: none; stroke: #fff; stroke-width: 8.33px" />
<path d="M0,46l55,0" style="fill: none; stroke: #fff; stroke-width: 8.33px" />
<path d="M-0,4l55,0" style="fill: none; stroke: #fff; stroke-width: 8.33px" />
</svg>
<svg class="icon-cross h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z" /></svg>
</button>
</div>
</nav>
<!-- [Header] -->
<header class="relative flex h-[60vh] justify-center bg-header bg-cover bg-center bg-no-repeat sm:h-[600px] sm:min-h-[calc(100vh-112px)]">
</header>
<!-- [JAVASCRIPT] ------------ -->
<script src="assets/js/script.js"></script>
</body>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|