Bootstrap Snippet Side menu on hover using HTML CSS

"Side menu on hover"
Bootstrap 3.3.0 Snippet by didierymartinez

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

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

punk73 () - 8 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 () - 8 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 () - 9 years ago - Reply 0

I think I have found :

html navbar

</div>
</div>

Jf () - 9 years ago - Reply 0

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

Jf () - 9 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 -->

thanks

Jf () - 9 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

"Side menu on hover" Bootstrap 3.3.0 Snippet by didierymartinez

Related: See More

Questions / Comments:

"Side menu on hover"
Bootstrap 3.3.0 Snippet by didierymartinez