JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<nav id="cr-menu" class="cr-menuwrapper">
	<button class="cr-trigger">Menu</button>
	
	<ul class="cr-menu">
		<li>
			<a href="#">Fashion</a>
			<ul class="sub-menu">
				<li>
					<a href="#">Men</a>
					<ul class="sub-menu">
						<li><a href="#">Shirts</a></li>
						<li><a href="#">Jackets</a></li>
						<li><a href="#">Chinos &amp; Trousers</a></li>
						<li><a href="#">Jeans</a></li>
						<li><a href="#">T-Shirts</a></li>
						<li><a href="#">Underwear</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Women</a>
					<ul class="sub-menu">
						<li><a href="#">Jackets</a></li>
						<li><a href="#">Knits</a></li>
						<li><a href="#">Jeans</a></li>
						<li><a href="#">Dresses</a></li>
						<li><a href="#">Blouses</a></li>
						<li><a href="#">T-Shirts</a></li>
						<li><a href="#">Underwear</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Children</a>
					<ul class="sub-menu">
						<li><a href="#">Boys</a></li>
						<li><a href="#">Girls</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Electronics</a>
			<ul class="sub-menu">
				<li><a href="#">Camera &amp; Photo</a></li>
				<li><a href="#">TV &amp; Home Cinema</a></li>
				<li><a href="#">Phones</a></li>
				<li><a href="#">PC &amp; Video Games</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Furniture</a>
			<ul class="sub-menu">
				<li>
					<a href="#">Living Room</a>
					<ul class="sub-menu">
						<li><a href="#">Sofas &amp; Loveseats</a></li>
						<li><a href="#">Coffee &amp; Accent Tables</a></li>
						<li><a href="#">Chairs &amp; Recliners</a></li>
						<li><a href="#">Bookshelves</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Bedroom</a>
					<ul class="sub-menu">
						<li>
							<a href="#">Beds</a>
							<ul class="sub-menu">
								<li><a href="#">Upholstered Beds</a></li>
								<li><a href="#">Divans</a></li>
								<li><a href="#">Metal Beds</a></li>
								<li><a href="#">Storage Beds</a></li>
								<li><a href="#">Wooden...

CSS

.cr-trigger{background:red;}
ul.cr-menu{display:none;}
.show-menu{display:block!important;}
ul.sub-menu{display:none;}

JavaScript

if($('li').hasClass('ul.sub-menu')){$('li').css('background','red');}
$('.cr-trigger').click(function(){
    $('ul.cr-menu').toggleClass('show-menu').find('ul.sub-menu').prepend('<li class="back">Back</li>');
})
$('li a').click(function(){
    $(this).parent().children('ul.sub-menu').show();
});