"google menu"
Bootstrap 3.3.0 Snippet by sumi9xm

Post to Facebook Tweet this

<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=0.1"> <meta name="author" content="sumit kumar"> <title>Slide Nave</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> <nav class="navbar navbar-inverse top-nav"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul> <li><a href="#" class="menu-icon" id="btn-menu"><i class="fa fa-bars" aria-hidden="true"></i></a></li> <li><a href="#" class="brand-logo"><img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADsM/QUIsUhwEVAgj1-fK8mqzAqDiDwEKlKc7QCL0B/w185-d-h40-p-rw/logo.png"></a></li> </ul> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-left"> <li><a href="#" class="home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li> <form class="navbar-form navbar-left"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> <input type="text" class="form-control" placeholder="Search"> </div> </form> </ul> <ul class="navbar-right"> <li><a href="#" class="th-icon"><i class="fa fa-th" aria-hidden="true"></i></a></li> <li><a href="#" class="home"><span class="badge">10</span></a></li> <li><a href="#" class="profil"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADso/ZGTVC0LVk1cFReheTbZzpGa2aawWyV8QACL0B/w140-d-h148-p-rw/profile-pic.jpg" class="img-responsive img-circle"></a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="side-navbar" id="sideNav"> <div class="side-nave-iner"> <ul> <li class="side-li"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> <span class="removeText">Home</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-th-large" aria-hidden="true"></i> <span class="removeText">collections</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-group" aria-hidden="true"></i><span class="removeText"> Communities</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="removeText"> profile</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="removeText"> event</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-bell" aria-hidden="true"></i><span class="removeText"> notifications</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="removeText"> setting</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-commenting" aria-hidden="true"></i> <span class="removeText">send feedback</span></a></li> <li class="side-li"><a href="#"><i class="fa fa-question-circle" aria-hidden="true"></i><span class="removeText"> help</span></a></li> </ul> </div> </div> </div> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> <script> $(document).ready(function(){ $("#btn-menu").hover(function(){ $("#sideNav").toggleClass("showHalfMenu"); }); $(".side-li").hover(function(){ $("#sideNav").toggleClass("showFullMenu"); $(".removeText").toggle(); }); }); </script> </body> </html>
.top-nav{ width: 100%; background: #009688; min-height:50px; padding: 0 0 0 8px; overflow: visible; font-size: 21px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 2; -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.3); box-shadow: 0 1px 8px rgba(0,0,0,.3); overflow: hidden; color: #fff; position: relative; border:solid 0px; border-radius:0px;} /*FORM SECTION///////////////////////////*/ .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color:transparent; } .navbar-inverse .navbar-toggle { border-color: #fff; margin-top: 12px; border-radius: 0px; } @media (min-width: 768px){ .navbar-form .input-group { display: inline-table; vertical-align: middle; margin-top: 6px; } } .top-nav ul { padding: 0px 15px; margin: 0px; } /*LEFT NAVBAR//////////////////*/ .navbar-form{box-shadow: none;} .top-nav ul li { list-style-type: none; float: left; display: block; } .top-nav ul li a{text-decoration:none;color:#fff;display:inline-block;} .top-nav ul li .home { font-size: 18px; padding: 18px 10px; color:#fff; } .top-nav ul li .menu-icon { text-decoration: none; font-size: 25px; padding: 12px 30px; margin-left: -24px; color: #fff; border-right: solid 1px #fff; display: inline-block; } .top-nav ul li .brand-logo { margin-left: 15px; padding-right: 15px; padding-top: 10px; position: relative; } .top-nav ul li .brand-logo:after{ content: ""; position: absolute; top: 12px; right: 0; height: 39px; border-right: 1px solid #FFF; } /*RIGHT NAVBAR//////////////////*/ .navbar-right .profil { height: 35px; width: 35px; margin-right: 15px; margin-top: 12px; } .navbar-right .badge { display: inline-block; min-width: 10px; padding: 8px 7px; margin-top: -2px; font-size: 12px; font-weight: bold; line-height: 1; margin-right: 15px; color: #777; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #fff; border-radius: 100%; margin-left: 15px; } .th-icon { padding: 15px 5px; } /*SIDE NAVBAR SECTION/////////////////////////*/ #sideNav { position: fixed; left:-80px; top:59px; width: 80px; height:100%; background-color:#0a796f; overflow-y: hidden; z-index: 999; } .side-nave-iner { position: relative; } .side-nave-iner>ul{margin: 0px;padding: 0px;width: 100%;} .side-nave-iner>ul>li{list-style-type: none;border-bottom: solid 1px;width: 100%;} .side-nave-iner>ul>li>a{text-decoration: none;display: block;padding:10px 0px;color:#fff;font-size:18px;text-transform:capitalize;transition: 0.5s;} .side-nave-iner>ul>li>a>.fa { margin-right: 30px; margin-left: 25px; font-size: 25px; } .side-nave-iner>ul>li>a:hover{background-color:#14423d;} #sideNav.showFullMenu { left:0; width: 311px; } #sideNav.showHalfMenu { left:0; } .removeText{ display: none;overflow: hidden; }

Related: See More

Paper Kit
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: