<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <header role="banner" class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div class="navbar-inverse side-collapse in"> <nav role="navigation" class="navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#Home">Home</a></li> <li><a href="#categories">Categories</a></li> <li><a href="#settings">Settings</a></li> </ul> </nav> </div> </div> </header> <div class="container side-collapse-container"> <div class="row"> <h1>Welcome</h1> <p>This is a shopkik demo.</p> <p>Make your browser smaller and the top menu wil become into a lateral slider menu</p> </div> </div> <div class="image"> <img src="http://www.youthedesigner.com/wp-content/uploads/2009/10/Graphic-Designer-T-Shirts-25.jpg"/> <div> <button type="button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle btn-xl"><i class="glyphicon glyphicon-heart"></i></button> </div> </div>

body { padding-top: 50px; position: relative; } pre { tab-size: 8; } @media screen and (max-width: 768px) { .side-collapse-container{ width:100%; position:relative; left:0; transition:left .4s; } .side-collapse-container.out{ left:200px; } .side-collapse { top:50px; bottom:0; left:0; width:200px; position:fixed; overflow:hidden; transition:width .4s; } .side-collapse.in { width:0; } } body{margin:40px;} img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); margin-bottom:20px; display: block; margin-left: auto; margin-right: auto; } img:hover { filter: none; /* IE6-9 */ -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ } image { display: block; margin-left: auto; margin-right: auto; } .btn-circle.btn-xl { width: 90px; height: 90px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 70px; }

$(document).ready(function() { var sideslider = $('[data-toggle=collapse-side]'); var sel = sideslider.attr('data-target'); var sel2 = sideslider.attr('data-target-2'); sideslider.click(function(event){ $(sel).toggleClass('in'); $(sel2).toggleClass('out'); }); });