"Lateral menu side slider hover"
Bootstrap 3.3.0 Snippet by joseanmola

<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"> <div class="row"> <h2>Lateral side slider menu HOVER </h2> <p>Make the browser window smaller in order to make the side dissapear and the open menu appear</p> </div> <div class="container" > <div class="row row-offcanvas row-offcanvas-left"> <div class="container"> <p class="visible-xs"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Menu</button> </p> </div> <div class="col-xs-12 col-sm-4 sidebar-offcanvas" id="sidebar" > <a class="visible-xs btn btn-primary btn-xs pull-right" data-toggle="offcanvas">CERRAR</a> <ul> <li><a href="http://mispicaderos.com/" class="btn btn-blanco text-left ">MISPICADEROS.COM</a></li> <li><a href="http://placesforlove.com/" class="btn btn-blanco text-left ">PLACESFORLOVE.COM</a></li> <li><a href="http://trovacacamporella.com/" class="btn btn-blanco text-left ">TROVACAMPORELLA.COM</a></li> <li><a href="http://mispicaderos.com/" class="btn btn-blanco text-left ">MISPICADEROS.COM</a></li> <li><a href="http://placesforlove.com/" class="btn btn-blanco text-left ">PLACESFORLOVE.COM</a></li> <li><a href="http://trovacacamporella.com/" class="btn btn-blanco text-left ">TROVACAMPORELLA.COM</a></li> </ul> </div><!--/.sidebar-offcanvas--> <div class="col-md-8 col-sm-8 col-xs-12"> CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO </div> </div><!--/row--> </div> </div>
/******offcanvas*********/ html, body { overflow-x: hidden; } @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } .row-offcanvas-right { right: 0; } .row-offcanvas-left { left: 0; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; } .row-offcanvas-left .sidebar-offcanvas { left: -100%; } .row-offcanvas-left .sidebar-offcanvas.active { left: 0%; } .row-offcanvas-right.active { right: 50%; } .row-offcanvas-left.active { left: 50%; } .sidebar-offcanvas { position: absolute; top: 0; z-index:999; background-color: #ffffff; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } }
$(document).ready(function() { $('[data-toggle="offcanvas"]').click(function () { $('.sidebar-offcanvas').toggleClass('active'); }); });

Related: See More


Questions / Comments: