JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<nav aria-label="Main Navigation">
		<ul>
				<li><a href="…">Home</a></li>
				<li><a href="…">Shop</a></li>
				<li class="has-submenu">
						<a href="…" aria-haspopup="true" aria-expanded="false">
							Space Bears
						</a>
						<ul>
								<li><a href="…">Space Bear 6</a></li>
								<li><a href="…">Space Bear 6 Plus</a></li>
						</ul>
				</li>
				<li><a href="…">Mars Cars</a></li>
				<li><a href="…">Contact</a></li>
		</ul>
</nav>

CSS

nav > ul li       ul { display: none; }
nav > ul li:hover ul { display: block;}

JavaScript

var menuItems = document.querySelectorAll('li.has-submenu');
Array.prototype.forEach.call(menuItems, function(el, i){
	var activatingA = el.querySelector('a');
	var btn = '<button><span><span class="visuallyhidden">show submenu for “' + activatingA.text + '”</span></span></button>';
	activatingA.insertAdjacentHTML('afterend', btn);

	el.querySelector('button').addEventListener("click",  function(event){
		if (this.parentNode.className == "has-submenu") {
			this.parentNode.className = "has-submenu open";
			this.parentNode.querySelector('a').setAttribute('aria-expanded', "true");
			this.parentNode.querySelector('button').setAttribute('aria-expanded', "true");
		} else {
			this.parentNode.className = "has-submenu";
			this.parentNode.querySelector('a').setAttribute('aria-expanded', "false");
			this.parentNode.querySelector('button').setAttribute('aria-expanded', "false");
		}
		event.preventDefault();
	});
});

var menuItems = document.querySelectorAll('li.has-submenu');
Array.prototype.forEach.call(menuItems, function(el, i){
	el.querySelector('a').addEventListener("click",  function(event){
		if (this.parentNode.className == "has-submenu") {
			this.parentNode.className = "has-submenu open";
			this.setAttribute('aria-expanded', "true");
		} else {
			this.parentNode.className = "has-submenu";
			this.setAttribute('aria-expanded', "false");
		}
		event.preventDefault();
		return false;
	});
});