JSFiddle - React, Tailwind, and code Playground

by internetinspired

HTML

<div class="menu">
    <nav>
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul>
    </nav>
</div>

CSS

body {width: 90%; margin: 1em auto;}

/* The default, responsive menu, no JS scenario. */
nav a,
.nav-toggle {display: block; padding: .5em; margin: 0 0 .25em 0; background: #e5e5e5; border: 1px solid #ccc;}

/* Let's collapse that if we have JS */
.js-enabled nav {height: 0; overflow: hidden}

/* Then bring it back if we have JS and the toggle is clicked */
.js-enabled nav.active {height: auto;}

/* Now you can start laying on the fancy stuff, go! */

JavaScript

// Got js?
$("html").addClass("js-enabled");

// Do the menu stuff
$(function menuToggle() {
    // Make a lovely nav toggle element
	  $('.menu').prepend('<a class="nav-toggle" href="#">Menu</div>');
	
  // Give us a hook (.active) we can style when the toggle is clicked
  $('.nav-toggle').click(function() {
	  $('nav').toggleClass('active');
	  return false;
		});
});