Side menu on hover
<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;
}
good~~ awesome job!!,anybody can’t find the code just like me ?? how can i download it ??,Just copy the CSS and html content.,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 ( ),i cant use the dropdown, do you help me?,hi i cant use the dropdown,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,interesting,How can I change “ACTIVE” class on clicked item?,HOW CAN I HAVE THIS BAR ON RIGHT SIDE OF THE PAGE,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>,In css there are a “main” defined where to put it in html ?,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,dropdown menu isn’t working. when it expands, it goes under my site’s content.,How to make this work with an existing bootstrap css files? Im confused.,Hi i tried the copying the code but it doesnt work. It displays the sidebar but the toggle it seems not working. Any help?,What exactly doesn’t work?,dropdown menu,Hi, is it possible to make it scroll with the page?I applied it to my website and everything else worked perfectly.,Look for Affix plugin for bootstrap, there’s already a tutorial on W3Schools for that.,(New to coding) how do I make it appear without disappearing?,The author is didierymartinez
Loading...
