<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="wrapper"> <div class="side-bar"> <ul> <li class="menu-head"> CLASH OF CLANS <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a> </li> <div class="menu"> <li> <a href="#">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a> </li> <li> <a href="#">Love snippet<span class="glyphicon glyphicon-heart pull-right"></span></a> </li> <li> <a href="#">Like it? <span class="glyphicon glyphicon-star pull-right"></span></a> <ul class="parent"> <li><a href="#">Read</a></li> <li><a href="#">Write</a></li> <li><a href="#">Execute</a></li> </ul> </li> <li> <a href="#">Settings <span class="glyphicon glyphicon-cog pull-right"></span></a> </li> </div> </ul> </div> <div class="content"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> </div> </div> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Lato); .container { width:800px; overflow:hidden; display:inline-block; } .side-bar { background:#6590A5; position:absolute; height:100%; width:200px; color:#fff; transition: margin-left 0.5s; } .side-bar ul { list-style:none; padding:0px; } .side-bar ul li.menu-head { font-family: 'Lato', sans-serif; padding:20px; } .side-bar ul li.menu-head a { color:#fff; text-decoration:none; height:50px; } .side-bar ul .menu-head a { color:#fff; text-decoration:none; height:50px; } .side-bar ul .menu li a { color:#fff; text-decoration:none; display:inline-table; width:100%; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; } .side-bar ul .menu li a:hover { border-left:3px solid #ECECEA; padding-left:17px; } .side-bar ul .menu li.active a { padding-left:17px; background:#97B9CA; border-left:3px solid #ECECEA; margin-bottom:1px; } .side-bar ul .menu li.active a:before { content:""; position: absolute; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 7px solid #97B9CA; margin-top: -10px; margin-left: 180px; } .content { padding-left: 200px; transition: padding-left 0.5s; } .active > .side-bar { margin-left:-150px; transition: margin-left 0.5s; } .active > .content { padding-left:50px; transition: padding-left 0.5s; } .menu li ul.parent { display:none; transition: all 3s; } .menu li.active ul.parent { display:block; transition: all 3s; } .menu li ul.parent li a { padding-left:40px; border-left:0px; background:#6590A5; } .menu li ul.parent li.active a { padding-left:39px; background:#40728A; border-left:1px solid #ECECEA; margin-bottom:1px; } .menu li ul.parent li a:hover { padding-left:39px; border-left:1px solid #ECECEA; } .menu ul.parent li.active a:before,.menu li.active ul.parent li a:before { border:0px; }

$(document).ready(function(){ $(".push_menu").click(function(){ $(".wrapper").toggleClass("active"); }); }); $(document).ready(function(){ $(".menu li a").click(function(){ //$(this).parent('li:has(ul)').find('ul').show(); //$(this).parent('li:has(ul)').children('ul').toggle(300); $(this).parent().children('ul.parent').toggle(300); }); });