sidebar menu Final

by Kiran Duggal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="left-six-class" id="left-six">
    <button class="btn btn-md btn2 glyphicon glyphicon-align-justify"></button>
</div>
<!-- Elements -->
<div id="sidemenu-bg" class="sidemenu-bg hide"></div>
<ul id="sidemenu" class="sidemenu new-side-navigation">
    <!-- <li class="logo"><a href="#home"><i class="habra"></i></a></li> -->
    <li class="has-submenu imFirst"><a href="#user"><i class="fa fa-user"></i></a>

        <ul class="sidemenu-sub simplebar" id="sidemenu-simple-scrollbar">
            <li class="text">
                 <h4>User</h4>

            </li>
            <li class="has-sub-menu"> <a href="#my-profile"><i class="fa fa-chevron-circle-down pull-right"></i>Sub menu</a>

                <ul class="hidemee ul-hide">
                    <li><a href="#my-profile">My profile</a>

                    </li>
                    <li><a href="#my-posts">My posts</a>

                    </li>
                    <li><a href="#my-comments">My comments</a>

                    </li>
                    <li><a href="#my-dialogues">My dialogues</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">item1</a>

            </li>
            <li><a href="#">item2</a>

            </li>
            <li><a href="#">item3</a>

            </li>
            <li><a href="#">item4</a>

            </li>
            <li><a href="#">item5</a>

            </li>
            <li><a href="#">item6</a>

            </li>
            <li><a href="#">item7</a>

            </li>
            <li class="has-sub-menu"> <a href="#my-profile"><i class="fa fa-chevron-circle-down pull-right"></i>Sub menu</a>

                <ul class="hidemee ul-hide">
                    <li><a href="#my-profile">My profile</a>

                  ...

CSS

#sidebar {
    display: none;
}
.ul-hide li {
    list-style: none inside;
}
.sidemenu-sub {
}
#left-six {
    border:solid 1px red;
    position:relative;
    left:300px;
    top:40px;
}
.showmee {
    display: block;
}
.hidemee {
    display: none;
}
/*SCROLLBARFIX IE FIREFOX */
 .simplebar .simplebar-scroll-content {
    /*   overflow-y: hidden !important;
    width: 100% !important; */
}
/*SCROLLBARFIX IE FIREFOX END*/
 .simplebar-scroll-content, .simplebar-scrollbar {
    height: 100vh !important;
}
.sidemenu {
    height: 100%;
}
a {
    color: #6da3bd;
    text-decoration: none;
    width:177px;
}
a:hover {
    color: #3d6f87;
    text-decoration: underline;
}
ul {
    margin: 0;
    padding: 0;
}
.pull-right {
    float: right;
}
.hide {
    display: none !important;
}
.sidemenu-bg {
    /*  position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.37);
    z-index: 99;*/
}
.sidemenu {
    position: fixed;
    top: 0;
    display: table;
    background-color: #f2f2f2;
    /*z-index: 100;*/
    z-index: 2000;
    left: -10px;
    /* overflow:scroll; */
}
.sidemenu > li {
    display: table-row;
}
.sidemenu > li:hover, .sidemenu > li.active {
    background-color: #e8e8e8;
}
.sidemenu > li > a {
    box-shadow: inset 0 -1px 0 #e3e3e3;
}
.sidemenu > li:first-child > a, .sidemenu > li:last-child > a {
    box-shadow: none;
}
.sidemenu > li.active .sidemenu-sub {
    display: table-cell;
    /*left: -170px;*/
}
.sidemenu > li.active > a {
    box-shadow: inset 3px 0 0 #bababa;
    color: #595959;
}
.sidemenu > li.full-height {
    height: 100%;
}
.sidemenu > li.full-height > a {
    vertical-align: middle;
}
.sidemenu > li > a {
    display: table-cell;
    height: 71px;
    width: 71px;
    color: #ccc;
    text-align: center;
    text-decoration: none;
}
.sidemenu > li > a:hover {
    color: #727272;
}
.sidemenu > li > a > .fa {
    font-size: 28px;
    line-height: 71px;
}
.sidemenu > li.logo {
   ...

JavaScript

$(function () {
    $(document).on('click', '.left-six-class', function () {
        $('.new-side-navigation > li').each(function () {
            if ($('.new-side-navigation > li').hasClass('active')) {
                console.log('if' + (this));
                $('.new-side-navigation > li.active').addClass('active');
                $('.new-side-navigation > li:first-child').addClass('schctive');
            } else {
                console.log('else');
                setTimeout(function () {
                    $('#sidemenu-simple-scrollbar').animate({
                        width: 'show'
                    });                   
                }, 200);
                
                 setTimeout(function () {
                     $('.new-side-navigation > li:first-child').addClass('active schctive');
                }, 500);
                
            }
        });
        //$('.new-side-navigation > li:first-child').addClass('active schctive');
        $('#left-six').addClass('left-six-class-2').removeClass('left-six-class');
        $('.new-side-navigation').css('background', 'red');
    });
    $(document).on('click', '.left-six-class-2', function () {
        $('.has-submenu.active').find('.sidemenu-sub').animate({
            width : 'hide'

        }, 700);
        setTimeout(function () {

            $('.new-side-navigation li.active').removeClass('active');
            $('.new-side-navigation > li:first-child').removeClass('schctive');

        }, 800);

        $('#left-six').addClass('left-six-class').removeClass('left-six-class-2');
        $('.new-side-navigation').css('background', 'green');
    });
});




/* New Sidebar menu */
$(function () {
    
    
    $('#sidemenu-simple-scrollbar').animate({
//    	width: 'hide'
    });
    
    
    var $content, $doc, $has_submenu, $no_submenu, $sidemenu, $slidemenu_bg, hide, move, removeActive, $submenuAdded;
    $doc = $(document);
    $content = $('#content');
    $slidemenu_bg =...