JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<nav id="nav">
                <ul>
                    <li>
                        <a href="/">About Us</a>
                        <ul>
                            <li><a href="/">Customer reviews</a></li>
                            <li><a href="/">Contact us</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="/sitemap.html">Help centre</a>
                        <ul>
                            <li><a href="/">Travel insurance tips</a></li>
                            <li><a href="/">Travel insurance guides</a></li>
                            <li><a href="/">FAQ's</a></li>
                            <li><a href="/">Jargon buster</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="/">Blog</a>
                    </li>
                </ul>
            </nav>

CSS

#nav, #nav ul, #nav li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box; }

#nav {
  position: relative;
  min-height: 60px;
  max-width: 100%;
  background-color: #ffdb3a;
  color: #000;
  border: 1px solid #D9BA31; }
  @media screen and (min-width: 650px) {
    #nav {
      display: inline-block; } }
  @media screen and (max-width: 650px) {
    #nav {
      display: block; } }

#nav li {
  position: relative; }

#nav a {
  text-decoration: none;
  height: 100%;
  display: block;
  padding: 0 20px; }

@media screen and (min-width: 650px) {
  #nav a:focus {
    outline: none; } }

.plusMark {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700; }

@media screen and (min-width: 650px) {
  #nav li {
    text-align: left;
    width: 200px; } }
@media screen and (max-width: 650px) {
  #nav li {
    text-align: center;
    width: 100%; } }

/* Any sub menu */
@media screen and (min-width: 650px) {
  a + ul {
    position: absolute; }
    a + ul:not(.js-showElement) {
      display: none; } }
@media screen and (max-width: 650px) {
  a + ul {
    position: relative; }
    a + ul:not(.js-hideElement) {
      display: block; } }

/* The Main Navigation Bar - Navigation Level One */
#nav > ul, .fa {
  height: 100%;
  line-height: 60px; }

#nav > ul > li {
  position: relative;
  text-align: center; }
  @media screen and (min-width: 650px) {
    #nav > ul > li {
      float: left;
      width: auto; } }
  @media screen and (max-width: 650px) {
    #nav > ul > li {
      float: none;
      display: block;
      width: 100%; } }

#nav > ul > li > a {
  background-color: #ffdb3a; }
  #nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu {
    background-color: #D9BA31; }

#nav > ul > li:hover > a, #nav > ul > li:focus > a {
  background-color: #D9BA31; }

@media screen and (min-width: 650px) {
  #nav > ul > li:not(:last-child) {
    border-right: 1px solid #D9BA31;
    border-bottom: none; } }
@media...

JavaScript

$(document).ready(function() {


    // Remove no-js class
    $('html').removeClass('no-js');

	$('#toggleMenu').on('click', function() {

        if ( $(this).hasClass('js-open') ) {

            $('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement');
            $(this).removeClass('js-open');

            $(this).attr('aria-expanded', false);

        } else {

            $('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement');
            $(this).addClass('js-open');

            $(this).attr('aria-expanded', true);

        }

		return false; 
	})

    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');




    // sub menu
	// ------------------------

    // When interacting with a li that has a sub menu
    $('li:has("ul")').on('mouseover keyup click mouseleave', function(e) {

        console.log("test")

    	// If either -
    		// tabbing into the li that has a sub menu
    		// hovering over the li that has a sub menu
    	if ( e.keyCode === 9 | e.type === 'mouseover' ) {

    		// Show sub menu
    		$(this).children('ul').removeClass('js-hideElement');
            $(this).children('ul').addClass('js-showElement');
    	}

		// If mouse leaves li that has sub menu
		if ( e.type === 'mouseleave' ) {

			// hide sub menu
			$(this).children('ul').removeClass('js-showElement');
            $(this).children('ul').addClass('js-hideElement');
		}


		// If clicking on li that has a sub menu
		if ( e.type === 'click' ) {

			// If sub menu is already open
			if ( $(this).children('a').hasClass('js-openSubMenu') ) {

                // remove Open class
				$(this).children('a').removeClass('js-openSubMenu');

				// Hide sub menu
	    		$(this).children('ul').removeClass('js-showElement');
	            $(this).children('ul').addClass('js-hideElement');


			// If sub menu is closed
			} else {

                // add Open...