"hoverable sidenav side out"
Bootstrap 3.0.0 Snippet by CharlesStone

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <a href="#" data-toggle="tooltip" data-placement="right" title="hey">Another tooltip</a> <nav class="main-menu"> <ul> <li> <a href="#"> <i class="fa fa-home fa-2x"></i> <span class="nav-text" data-toggle="tooltip" data-placement="right" > Dashboard </span> </a> </li> <li> <a href="#"> <i class="fa fa-laptop fa-2x"></i> <span class="nav-text"> UI Components </span> </a> </li> <li> <a href="#"> <i class="fa fa-list fa-2x"></i> <span class="nav-text"> Forms </span> </a> </li> <li> <a href="#"> <i class="fa fa-folder-open fa-2x"></i> <span class="nav-text"> Pages </span> </a> </li> <li> <a href="#"> <i class="fa fa-bar-chart-o fa-2x"></i> <span class="nav-text"> Graphs and Statistics </span> </a> </li> </ul> </nav>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); } @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300); .fa-2x { font-size: 2em; } .fa { position: relative; display: table-cell; width: 60px; height: 36px; text-align: center; vertical-align: middle; font-size:20px; } .main-menu:hover,nav.main-menu.expanded { width:250px; overflow:visible; } .main-menu { background:#0093d0; position:absolute; top:60px; bottom:0; height:70%; left:0; width:60px; overflow:hidden; -webkit-transition:width .05s linear; transition:width .05s linear; -webkit-transform:translateZ(0) scale(1,1); z-index:1000; } .main-menu>ul { margin:7px 0; } .main-menu li { position:relative; display:block; width:250px; } .main-menu li>a { position:relative; display:table; border-collapse:collapse; border-spacing:0; color:#999; font-family: arial; font-size: 14px; text-decoration:none; -webkit-transform:translateZ(0) scale(1,1); -webkit-transition:all .1s linear; transition:all .1s linear; } .main-menu .nav-icon { position:relative; display:table-cell; width:60px; height:36px; text-align:center; vertical-align:middle; font-size:18px; } .main-menu .nav-text { position:relative; display:table-cell; vertical-align:middle; width:190px; font-family: 'Titillium Web', sans-serif; } .no-touch .scrollable.hover { overflow-y:hidden; } .no-touch .scrollable.hover:hover { overflow-y:auto; overflow:visible; } a:hover,a:focus { text-decoration:none; } nav { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; } nav ul,nav li { outline:0; margin:0; padding:0; } .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { color:#fff; background-color:#5fa2db; }
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip({ title: "<h4>Hello, <b>I'm</b> <i>Smiley!</i></h4>", html: true, }); });

Related: See More


Questions / Comments: