"Side menu on hover"
Bootstrap 3.3.0 Snippet by didierymartinez

<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 ----------> <nav class="navbar navbar-default sidebar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Usuarios <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a> <ul class="dropdown-menu forAnimate" role="menu"> <li><a href="{{URL::to('createusuario')}}">Crear</a></li> <li><a href="#">Modificar</a></li> <li><a href="#">Reportar</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Informes</a></li> </ul> </li> <li ><a href="#">Libros<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li> <li ><a href="#">Tags<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li> </ul> </div> </div> </nav>
body,html{ height: 100%; } nav.sidebar, .main{ -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } .main{ padding: 10px 10px 0 10px; } @media (min-width: 765px) { .main{ position: absolute; width: calc(100% - 40px); margin-left: 40px; float: right; } nav.sidebar:hover + .main{ margin-left: 200px; } nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; } nav.sidebar .navbar-brand, nav.sidebar .navbar-header{ text-align: center; width: 100%; margin-left: 0px; } nav.sidebar a{ padding-right: 13px; } nav.sidebar .navbar-nav > li:first-child{ border-top: 1px #e5e5e5 solid; } nav.sidebar .navbar-nav > li{ border-bottom: 1px #e5e5e5 solid; } nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #777; } nav.sidebar{ width: 200px; height: 100%; margin-left: -160px; float: left; margin-bottom: 0px; } nav.sidebar li { width: 100%; } nav.sidebar:hover{ margin-left: 0px; } .forAnimate{ opacity: 0; } } @media (min-width: 1330px) { .main{ width: calc(100% - 200px); margin-left: 200px; } nav.sidebar{ margin-left: 0px; float: left; } nav.sidebar .forAnimate{ opacity: 1; } } nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { color: #CCC; background-color: transparent; } nav:hover .forAnimate{ opacity: 1; } section{ padding-left: 15px; }

Related: See More


Questions / Comments:

anybody can't find the code just like me ?? how can i download it ??

punk73 () - 7 years ago - Reply -1


Just copy the CSS and html content.

Shrikant Gouda () - 7 years ago - Reply 0


good~~ awesome job!!

ymm () - 7 years ago - Reply 0


To get this working you need to include the jquery part too, it wasn't working for me either but use this in your code.

Place it in the head part
<script src="https://ajax.googleapis(.)com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Comment section shortens the code, so (.) is just a . without the ( )

zerofreeze () - 7 years ago - Reply 0


i cant use the dropdown, do you help me?

Miguel Ramos () - 8 years ago - Reply 0


hi i cant use the dropdown

tannie () - 8 years ago - Reply 0


great script but I would like to collapse dropdown without clicking to show active list item how can I do this?? just to make a dropdown collapse.. thanks

Karim Ali () - 8 years ago - Reply 0


interesting

Niranjan () - 8 years ago - Reply 0


How can I change "ACTIVE" class on clicked item?

Juan Carlos Sanchez Hernandez () - 8 years ago - Reply 0


HOW CAN I HAVE THIS BAR ON RIGHT SIDE OF THE PAGE

Ashish () - 8 years ago - Reply 0


I think I have found :

html navbar

<div class="main">
<div class="container ">

<div class="row">row1</div>

<div class="row">row2</div>

</div>
</div>

Jf () - 8 years ago - Reply 0


In css there are a "main" defined where to put it in html ?

Jf () - 8 years ago - Reply 0


how to integrate this menu in template, if I set like that the second row is falls below the menu
</nav> <-- end menu -->

<div class="container">
<div class="row">row1</div>
<div class="row">row2</div>
</div>

thanks

Jf () - 8 years ago - Reply 0


dropdown menu isn't working. when it expands, it goes under my site's content.

Hussain Sumrat () - 9 years ago - Reply 0


How to make this work with an existing bootstrap css files? Im confused.

Mico () - 9 years ago - Reply 0


Hi i tried the copying the code but it doesnt work. It displays the sidebar but the toggle it seems not working. Any help?

DRP () - 9 years ago - Reply 0


What exactly doesn't work?

maxsurguy () - 9 years ago - Reply 0


dropdown menu

Lucio Fuentes () - 8 years ago - Reply 0


Hi, is it possible to make it scroll with the page?
I applied it to my website and everything else worked perfectly.

Filip () - 9 years ago - Reply 0


Look for Affix plugin for bootstrap, there's already a tutorial on W3Schools for that.

moralesnery () - 8 years ago - Reply 0


(New to coding) how do I make it appear without disappearing?

anton () - 9 years ago - Reply 0