JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav id="menusystem" data-bdrradiustl="" data-bdrradiustr="" data-bdrradiusbl="" data-bdrradiusbr="" class="menu-style menu-style-slide menu-style-slide-right menu-style-open">
    <ul>
        <li class="heading"><i class="fa fa-bars"></i> Menu <i class="fa fa-times close"></i></li>
        <li id="main-123456789" data-url="home" class="active"><span>Home</span>

        </li>
        <li id="main-14108761585433" data-url="products">
            <span><i class="fa fa-user"></i> Products</span>
            <span class="expand-menu"><i class="fa fa-chevron-left"></i></span>
            <ul style="display: block;">
                <li id="sub-714505845933" data-order="0" data-url="untitled655878">
                    <span>Untitled</span>
                    <span class="expand-menu"><i class="fa fa-chevron-left"></i></span>
                    <ul style="display: block;">
                        <li id="sub-633703739922" data-order="0" data-url="untitled658905"><span>Untitled</span>

                        </li>
                        <li id="sub-1243036184535" data-order="1" data-url="untitled1">
                            <span>Untitled1</span>
                          

                        </li>
                        <li id="sub-1163668230936" data-order="2" data-url="untitled2">
                            <span>Untitled2</span>
                            

                        </li>
                    </ul>
                </li>
                <li id="sub-1182250272294" data-order="1" data-url="untitled1"><span>Untitled1A</span>

                </li>
                <li id="sub-1782388193634" data-order="2" data-url="untitled2">
                    <span>Untitled2</span>
                    <span class="expand-menu"><i class="fa fa-chevron-left"></i></span>
                    <ul style="display: block;">
                        <li...

CSS

/* Main */
 nav.menu-style {
    left: 0px;
    top: 1px;
    width: 232px;
    height: 47px;
    font-family: 'Tahoma', sans-serif;
}
nav.menu-style ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative
}
nav.menu-style ul li {
    text-align: center;
    cursor: pointer;
    border-color: rgb(245, 223, 245);
}
nav.menu-style ul > li {
    background-color: rgb(128, 0, 128);
}
nav.menu-style ul > li:not(.heading):hover {
    background-color: rgb(208, 0, 208);
}
nav.menu-style ul > li.heading {
    font-weight: bold;
    padding: 10px;
}
nav.menu-style ul > li.heading > .close {
    background-color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    padding: 0 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
nav.menu-style ul > li.heading > .close {
    position: absolute;
    right: 10px;
    padding: 3px 5px;
}

nav.menu-style.menu-style-slide-right ul > li.heading > .close { right: auto; left: 10px; }

nav.menu-style.menu-style-slide-right ul > li.heading { text-align: right; }

nav.menu-style.menu-style-font-size-1 ul li span {
    font-size: 10;
}
nav.menu-style.menu-style-font-size-2 ul li span {
    font-size: 11;
}
nav.menu-style.menu-style-font-size-3 ul li span {
    font-size: 12;
}
nav.menu-style.menu-style-font-size-4 ul li span {
    font-size: 13;
}
nav.menu-style.menu-style-font-size-5 ul li span {
    font-size: 14;
}
nav.menu-style.menu-style-font-size-6 ul li span {
    font-size: 15;
}
nav.menu-style.menu-style-font-size-7 ul li span {
    font-size: 16;
}
nav.menu-style.menu-style-font-size-8 ul li span {
    font-size: 17;
}
nav.menu-style.menu-style-font-size-9 ul li span {
    font-size: 18;
}
nav.menu-style.menu-style-font-size-10 ul li span {
    font-size: 19;
}
nav.menu-style.menu-style-font-size-11 ul li span {
    font-size: 20;
}
nav.menu-style.menu-style-font-size-12 ul li span {
    font-size: 21;
}
nav.menu-style.menu-style-font-size-13 ul li span {
    font-size:...

JavaScript

$(function () {
    $('nav > ul > li > ul').css('display','none');
    $('body').on('click', 'nav.menu-style-slide-left .expand-menu', function (e) {
        e.stopImmediatePropagation();
        $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
        $(this).closest('li').find('ul').toggle();
    });
    
    $('body').on('click', 'nav.menu-style-slide-right .expand-menu', function (e) {
        e.stopImmediatePropagation();
        $(this).find('i').toggleClass('fa-chevron-left fa-chevron-down');
        $(this).closest('li').find('ul').toggle();
    });
    
    $('.close').click(function(){
        alert('');
    });

});