JSFiddle - React, Tailwind, and code Playground

by Vijayakrishnan Krishnan

HTML

<script src="&lt;script src=&quot;http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js&quot;&gt;&lt;/script&gt;"></script>
        <div id="cms-sidenav" class="cf">
            <ul class="sidenav">
                <li class="sn"><a href="#" data-panel="sn-pan-1">Lorem</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-2">Ipsum</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-3">Dolar</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-4">Sit</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-5">Amet</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-6">Et</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-7">Donut</a></li>
            </ul>
            
            <!-- hidden panel that slides out? -->
            <div id="sn-pan-1">
                <a class="control-view"></a>
                <ul>
                    <li>Stuff 1</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-2">
                <a class="control-view"></a>
                <ul>
                    <li>Stuff 2</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-3">
            <a class="control-view"></a>
                <ul>
                    <li>Stuff 3</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-4">
             <a class="control-view"></a>
                <ul>
                    <li>Stuff 4</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-5">
             <a class="control-view"></a>
                <ul>
                    <li>Stuff 5</li>
                    <li>Here</li>
                </ul>
            </div>
            
            
            <div...

CSS

#cms-sidenav {
    width: 100px;
    height: 100%;
    background: #333;
    position: fixed;
    left: 0;
    top: 0;
}

ul.sidenav{
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.sidenav li{
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
}

ul.sidenav li.active { background:cyan; }

#cms-sidenav a{
    color: #848484;
    text-decoration: none;
}

#cms-sidenav a:hover{
    color: #d1d1d1;
    text-decoration: none;
}

.sn a {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #
}

div[id*="sn-pan-"]{
    float: left;
    background: red;
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}

a.control-view{ /* button for closing the sidenav panel */
    width: 30px;
    height: 29px;
    background: green;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 9999;
    display: none;
    cursor: pointer;

    /* rotate */
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg); 

    /* transition */
    -webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;
    -moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease;
    -o-transition: background-position .6s ease-in-out, -o-transform .3s ease;
    -ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;
    transition: background-position .6s ease-in-out, transform .3s ease;
}

div#sn-pan-1 a.control-view:hover{
/*Rotate*/
    -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
    transform:rotate(-360deg);

}

JavaScript

$(".sn a").on('click',function(){ // Sidenav panel script

    var panID = $("#" + $(this).data('panel') );

    $("div[id*='sn-pan-']")
    .stop()
    .hide({slide:'toggle'}, 400);

    $(panID)
    .css({'left' : '100px','overflow':'visible'})
    .stop()
    .animate({width:'toggle'}, 400)

        $(".control-view").stop().fadeOut("slow");  // Fadein menu close button
    $(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);   

});

$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});

$(".control-view").hover( // Hover effect for menu close button
    function () {
    $(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
   }, 
    function () {
    $(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});

$('.control-view').click(function(e) {
        $("div[id*='sn-pan-']")
        .stop()
        .hide({slide:'toggle'}, 400);

        $('ul.sidenav li').not(this).removeClass('active');

        $(".control-view").stop().fadeOut("fast");
});