"multi-level-push-menu"
Bootstrap 3.3.0 Snippet by niksgupt

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="sumit kumar"> <title>Trial</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> </head> <body> <section class="showHalfMenu" id="haff-menu"> <div class="container-fluid"> <!--=======SLID-NAV 1============--> <section id="nav-1"> <nav id="main-nav"> <h2 class="title">All Categoris <a href="javascript:;"> <span class="menu-icon pull-right" id="menu-btn"><i class="fa fa-bars" aria-hidden="true" id="chang-menu-icon"></i></span></a></h2> <ul class="ul" id="main-menu"> <li id="home"> <a href="javascript:;"> <i class="fa fa-laptop" aria-hidden="true"></i> Divice <i class="fa fa fa-chevron-left pull-right arow"></i> </a> </li> <li id="link"> <a href="javascript:;"> <i class="fa fa-link"></i> Social link <i class="fa fa fa-chevron-left pull-right arow"></i> </a> </li> <li id="news"> <a href="javascript:;"> <i class="fa fa-newspaper-o"></i> News </a> </li> <li> <a href="javascript:;"> <i class="fa fa-edit"></i> edit </a> </li> <li> <a href="javascript:;"> <i class="fa fa-inbox"></i> inbox </a> </li> <li> <a href="javascript:;"> <i class="fa fa-envelope"></i> sumi9xm@gmail.com </a> </li> </ul> </nav> </section> <!--=======SLID-NAV 2============--> <section class="nav-2" id="nav-2"> <nav class="main-nav" id="home-sub-nav"> <h2 class="title">All Divice <a href="javascript:;"> <span class="home-icon pull-right" id="menu-home"><i class="fa fa-laptop" aria-hidden="true"></i></span></a></h2> <ul class="ul"> <li class="back"> <a href="javascript:;"> <i class="fa fa-angle-double-left" aria-hidden="true"></i>Back </a> </li> <li> <a href="javascript:;"> <i class="fa fa-television"></i> television </a> </li> <li> <a href="javascript:;"> <i class="fa fa-phone"></i> phone </a> </li> <li> <a href="javascript:;"> <i class="fa fa-mobile"></i> mobile </a> </li> <li> <a href="javascript:;"> <i class="fa fa-tablet"></i> tablet </a> </li> </ul> </nav> </section> <!--=======SLID-NAV 3============--> <section class="nav-3" id="nav-3"> <nav class="main-nav" id="link-sub-nav"> <h2 class="title">Social Link <a href="javascript:;"> <span class="home-icon pull-right" id="menu-home"><i class="fa fa-link" aria-hidden="true"></i></span></a></h2> <ul class="ul"> <li class="back"> <a href="javascript:;"> <i class="fa fa-angle-double-left" aria-hidden="true"></i>Back </a> </li> <li> <a href="javascript:;"> <i class="fa fa-facebook"></i> facebook </a> </li> <li> <a href="javascript:;"> <i class="fa fa-google-plus"></i> google </a> </li> <li> <a href="javascript:;"> <i class="fa fa-twitter"></i> twitter </a> </li> <li> <a href="javascript:;"> <i class="fa fa-youtube"></i> youtube </a> </li> <li id="not"> <a href="javascript:;"> <i class="fa fa-bell"></i>Notification<i class="fa fa fa-chevron-left pull-right" id="arow"></i> </a> </li> </ul> </nav> </section> <!--=======SLID-NAV 4============--> <section class="nav-4" id="nav-4"> <nav class="main-nav" id="not-sub-nav"> <h2 class="title">Notification <a href="javascript:;"> <span class="home-icon pull-right" id="menu-home"><i class="fa fa-bell" aria-hidden="true"></i></span></a></h2> <ul class="ul"> <li class="sub-back"> <a href="javascript:;"> <i class="fa fa-angle-double-left" aria-hidden="true"></i>Back </a> </li> <li> <a href="javascript:;"> <i class="fa fa-envelope"></i> mail </a> </li> <li> <a href="javascript:;"> <i class="fa fa-commenting"></i> hangout </a> </li> <li> <a href="javascript:;"> <i class="fa fa-comments"></i> chat </a> </li> <li> <a href="javascript:;"> <i class="fa fa-trash"></i> trash </a> </li> </ul> </nav> </section> </div> </section> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#home").click(function(){ $("#home-sub-nav").toggle(500); $("#main-menu").hide(500); }); $(".back").click(function(){ $("#home-sub-nav").hide(200); $("#link-sub-nav").hide(200); $("#main-menu").show(500); }); $("#link").click(function(){ $("#link-sub-nav").toggle(200); $("#main-menu").hide(500); }); $("#not").click(function(){ $("#not-sub-nav").toggle(200); $("#main-menu").hide(500); }); $(".sub-back").click(function(){ $("#not-sub-nav").hide(200); }); $("#menu-btn").click(function(){ $("#haff-menu").toggleClass("showHalfMenu"); $("#main-menu").toggle( ); }); }); </script> </body> </html>
.showHalfMenu{position:absolute;top:0px;left:-250px;width:300px;height:100%;overflow: hidden;transition: 0.9s;} #showFullMenu{position: absolute;top:0px;left:0px;width:300px;height:100%;overflow: hidden;transition: 0.9s;} #nav-1 #main-nav { position:absolute; top:0px;left:0px; width: 300px; background-color: #00BCD4; height: 100%;overflow: hidden; min-height: 720px; } #main-menu{display: none;} .title { font-size: 24px; font-weight: bold; color: #FFEB3B; padding: 15px 15px; border-bottom: solid 1px #000; margin-top: 0px; margin-bottom: 0px; } .title > a .fa{color:#fff;} .ul{margin:0px;padding:0px;} .ul li{list-style-type:none;width:100%;border-bottom: solid 1px #000;} .ul li a{text-align:left;text-decoration:none;font-size:16px;text-transform: capitalize;color:#fff;padding:10px 15px;display:block;} .ul li a .fa{margin-right:10px;} .ul li a:hover{background-color:#00acc1;} /*NAV BAR-2**************************/ #nav-2 .main-nav { position:absolute; top:0px;left:0px; width: 250px; background-color: #00BCD4; height: 100%;overflow: hidden; min-height: 720px; z-index: 2;display: none; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /*NAV BAR-3**************************/ #nav-3 .main-nav { position:absolute; top:0px;left:0px; width: 250px; background-color: #00BCD4; height: 100%;overflow: hidden; min-height: 720px; z-index: 3;display: none; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /*NAV BAR-4**************************/ #nav-4 .main-nav { position:absolute; top:0px;left:0px; width: 200px; background-color: #00BCD4; height: 100%;overflow: hidden; min-height: 720px; z-index: 4;display: none; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

Related: See More


Questions / Comments: