"Side menu on hover"
Bootstrap 3.3.0 Snippet by ShaiCohen

<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 ----------> <div class="container"> <br/> <div class="panel-group" role="tablist"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="collapseListGroupHeading1"> <h4 class="panel-title"> <a href="#collapseListGroup1" class="" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseListGroup1">Insured / Joint Insured</a> </h4> </div> <div class="panel-collapse collapse in" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="true"> <ul class="list-group"> <li class="list-group-item"> <address> <strong>Owner Code </strong>None, Insured<br> <abbr title="Tax Identification Number">TIN:</abbr> 285-16-1723<br> GEORGE S MALOOF<br> 1804 FARRS GARDEN PATH<br> WESTLAKE, OH 44145-2068<br> </address> </li> <li class="list-group-item"> <address> <strong>Owner Code </strong>None, Insured<br> <abbr title="Tax Identification Number">TIN:</abbr> 289-20-4981<br> NORA M MALOOF<br> 1804 FARRS GARDEN PATH<br> WESTLAKE, OH 44145-2068<br> </address> </li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="collapseListGroupHeading2"> <h4 class="panel-title"> <a href="#collapseListGroup2" class="" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseListGroup2">Owner(s)</a> </h4> </div> <div class="panel-collapse collapse in" role="tabpanel" id="collapseListGroup2" aria-labelledby="collapseListGroupHeading2" aria-expanded="true"> <ul class="list-group"> <li class="list-group-item"> <address> <strong>Owner Code </strong>Partial, Owner, non-COLI<br> <abbr title="Tax Identification Number">TIN:</abbr> 288-42-3103<br> FAYE JUDITH MALOOF-WOLF<br> 1804 FARRS GARDEN PATH<br> WESTLAKE, OH 44145-2068<br> </address> </li> <li class="list-group-item"> <address> <strong>Owner Code </strong>Partial, Owner, non-COLI<br> <abbr title="Tax Identification Number">TIN:</abbr> 278-22-7666<br> THERESA J KRATUS<br> 20965 LAKE RD <br> ROCKY RIVER, OH 44116-1339<br> </address> </li> <li class="list-group-item"> <address> <strong>Owner Code </strong>Partial, Owner, non-COLI<br> <abbr title="Tax Identification Number">TIN:</abbr> 283-42-2248<br> VIRGINIA M CASCARILLA<br> 25408 LAKE RD <br> BAY VILLAGE, OH 44140-2623<br> </address> </li> <li class="list-group-item"> <address> <strong>Owner Code </strong>Partial, Owner, non-COLI<br> <abbr title="Tax Identification Number">TIN:</abbr> 289-44-5612<br> KIMBERLY G HAIKAL<br> 13882 LAKE AVE <br> LAKEWOOD, OH 44107-1425<br> </address> </li> </ul> </div> </div> </div> </div>
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: