JSFiddle - React, Tailwind, and code Playground

by fripouille

HTML

<div id="nav_responsive">
    <ul class="nav_min">
        <li class="toggleSubMenu"><span>MENU</span> 
            <ul class="responsive">
                <li><a href="#">ITEM 1</a>
                </li>
                <li class="toggle_sub_submenu"><span>ITEM 2</span>

                    <ul class="sub_submenu" >
                        <li><a href="#">Sous Item 2 - 1 </a>
                        </li>
                        <li><a href="#">Sous Item 2 - 2</a>
                        </li>
                    </ul>
                </li>
                <li class="toggle_sub_submenu"><span>ITEM 3</span>

                    <ul class="sub_submenu">
                        <li>	<a href="#">Sous Item 3 - 1</a>

                        </li>
                        <li>	<a href="#">Sous Item 3 - 2</a>

                        </li>
                        <li>	<a href="#">Sous Item 3 - 3</a>

                        </li>
                    </ul>
                </li>
                <li class="toggle_sub_submenu"><span>ITEM 4</span>

                    <ul class="sub_submenu">
                        <li><a href="#">Sous Item 4 - 1</a>
                        </li>
                        <li class="toggle_sub_sub_submenu"><span>Sous Item 4 - 2</span>

                            <ul class="sub_sub_submenu">
                                <li><a href="#">Sous Sous Item 4 - 2 - 1</a>
                                </li>
                                <li><a href="#">Sous Sous Item 4 - 2 - 2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="toggle_sub_submenu"><span>ITEM 5</span>

                    <ul class="sub_submenu">
                        <li><a href="#">Sous Item 5 - 1</a>
                        </li>
                        <li><a href="#">Sous Item 5 - 2</a>
                        </li>
                    </ul>
  ...

CSS

#nav_responsive {
	height: 49px;
    width: 100%;
    z-index: 500;
	position: relative;
}

@media screen and (max-width: 720px) {
	#nav_responsive {
	display:block;
}
}

/********************MENU*********************************/

#nav_responsive ul.nav_min {
	margin:0 auto;
	padding:0;
	position:relative;
	width:100%;
}

#nav_responsive ul.nav_min a {
	color:#FFF;
	background-color: rgba(0, 88, 157, 1);
	border:1px solid #444;
	display: block;
	text-decoration:none;
	text-align:center;
	font-size:1.8em;
	padding: 10px 0;
	
}

#nav_responsive ul.nav_min a:hover {
	color:#FFF;
	background-color:rgba(84, 135, 192, 1);
	text-shadow:none;
}

#nav_responsive ul.nav_min li:hover ul {
    display: block;
}

/**************************SOUS MENU************************/
#nav_responsive ul.nav_min ul.responsive, 
#nav_responsive ul.nav_min ul.responsive ul {
	margin:0 auto;
	padding:0;
	position:relative;
	width:100%;
	/*display:none;*/
}

#nav_responsive ul.nav_min ul.responsive ul {   
	position:relative;
	/*display:none;*/
}

#nav_responsive ul.nav_min ul.responsive li {   
	position:relative;
	
}

#nav_responsive ul.nav_min ul.responsive li:hover ul {
    display: block;
}

#nav_responsive  ul.responsive ul li a{
	color:#FF8900;
	font-size:1.4em;
	padding: 5px 0;
	background-color: rgba(0, 0, 0, 0.62);
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
	text-shadow: 1px 1px 1px #000000, 
				-1px 1px 1px #000000, 
				-1px -1px 1px #000000, 
				 1px -1px 1px #000000;
}

#nav_responsive  ul.responsive a {
	color:#FFF;
	background-color: rgba(53, 61, 70, 0.9);
	border:1px solid #444;
	display: block;
	text-decoration:none;
	text-align:center;
	font-size:1.8em;
	padding: 10px 0;
	
}

#nav_responsive ul.responsive a:hover {
	color:#000;
	background-color:rgba(255, 255, 255, 0.9);
	text-shadow:none;
}

#nav_responsive  ul.responsive a.orange {
    background-color: rgba(255, 137, 0, 0.9);
}





/***********************SOUS SOUS MENU...

JavaScript

$(document).ready( function () {
    // On cache les sous-menus :
    $(".nav_min ul.responsive").hide();
    $(".responsive ul.sub_submenu").hide();
    $(".sub_submenu ul.sub_sub_submenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".nav_min li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    });
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".nav_min li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.responsive:visible").length != 0) {
            $(this).next("ul.responsive").slideUp("normal");            
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".nav_min ul.responsive").slideUp("normal");
            $(this).next("ul.responsive").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    
    // actions pour les sous-sous menu  
    $(".responsive li.toggle_sub_submenu span").each( function () {
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;    
    $(".responsive li.toggle_sub_submenu > a").click( function () {        
        if ($(this).next("ul.sub_submenu:visible").length != 0) {
            $(this).next("ul.sub_submenu").slideUp("normal");
        }      
        else {
            $(".responsive ul.sub_submenu").slideUp("normal");
            $(this).next("ul.sub_submenu").slideDown("normal");
        }
        return false;
    });      
   // actions pour les...