Slide side submenu 1

Slide side submenu 1

HTML

<div class="container">
            <div class="main-content">                  
                <a href="#" data-toggle=".container" id="sidebar-toggle">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                </a>
                <div class="content">                       
                </div>
            </div>
            <div id="sidebar">
                <ul class="menu">
                    <li tabindex="1"><span class="menu1">Home &gt;</span>
                        <ul class="submenu">
                            <li><a href="#" class="back">Volver</a></li>
                            <li><a href="#" class="home">Home 11</a></li>
                            <li><a href="#" class="users">Home 12</a></li>
                            <li><a href="#" class="signout">Home 13</a></li>
                        </ul>   
                    </li>
                    <li tabindex="2"><span class="menu2">Explore</span></li>
                    <li tabindex="3"><span class="menu3"> Users</span></li>
                    <li tabindex="4"><span class="menu4"> Sign Out</span></li>
                </ul>                  
            </div>
        </div>

CSS

.container{
  width:300px;
  height:100%;
  //background-color:green;
  //float:right;
  position:absolute;
  right:-260px;
}
.open-sidebar{
    right:0px;
}
#sidebar{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  
  width: 270px;
  height: 100%;
  background-color: brown;
  position:absolute;
  left:40px;
  top:0px;
}
.menu, .submenu {
  width:100%;
  height:100%;
  
  list-style-type:none;
  margin:0;
  padding:0;
}

.submenu {
  ///display:none;
  position:absolute;
  top:0px;
  right: -260px;
  background-color:green;

    -webkit-transition:  right 0.4s ease-in-out;
    -moz-transition:  right 0.4s ease-in-out;
    -ms-transition:  right 0.4s ease-in-out;
    -o-transition:  right 0.4s ease-in-out;
    transition:  right 0.4s ease-in-out;  
  
}


.menu li a,
.menu li span {
  display:block;
  padding: 20px;
  text-decoration:none;
  text-align: center;
  color: #ccc;
}

.bar {
  width: 60%;
  height:3px;
  display:block;
  background-color: #fff;
  margin: 0px 0px 3px 0px;
}

.main-content {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  
  border-radius: 5px;
  width: 40px;
  height: auto;
  position: absolute;
  padding: 10px 0px 6px 12px;
  margin:0;
  
  top: 0px;
  left: 0px;
  z-index:10;
}


#sidebar ul li:focus ul,
#sidebar ul li:active ul{
    right:0px;
}

#sidebar ul> li:hover> a,

#sidebar ul li:hover span {
  color:white;
}

.back {
    color: black;
    padding: 0px;
}

JavaScript

$(document).ready(function() {
  $(".main-content").click(function() {
    $(".container").toggleClass("open-sidebar");
  });
    /*
    $('.parent').click(function() {
         $('.submenu').toggle('visible');
     });
*/
  });