"navbar lateral slide menu"
Bootstrap 3.1.0 Snippet by joseanmola

<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="#users">Users</a></li> <li><a href="http://placesforlove.com">Places</a></li> </ul> </nav> </div> </div> </header> <div class="container side-collapse-container"> <div class="row"> <h1>Hello</h1> <p>This is a side opening nav demonstration</p> <p>Make your browser smaller and the top menu wil become into a lateral slider menu</p> </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; } }
$(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'); }); });

Questions / Comments:

sir, can anyone tell me how i can get dropdown menu on this navbar. It does not work for me please i really need dropdown menu on this.... any help will be highly appreciated.

Sunil Kumar (0) - 9 months ago - Reply 0


Thank you so much!

Wouter Stulp (0) - 1 year ago - Reply 0


People.. i copied exactly the code and it is not working, why? i have some error i don't understand like:
in the js: $ is undefined
css: transaction, tab-size, etc is not a know css property
html: the tag header is not supported and nav too
pls help me

Guest (0) - 2 years ago - Reply 0


That means that jQuery is not loaded. Make sure to load jQuery before you load Bootstrap's .js files

maxsurguy (0) - 2 years ago - Reply 0


I tried in Android webview but it resize the page every time toggle the navbar. If I use Android browser it work fine.
How can I solve it ?

Giovanni Belelli (0) - 2 years ago - Reply 0


Thanks for this simple code that do well what it's aimed for. Worked fine with bootstrap 3.2.0 navbar + fontawesome !

Jan Mahler (0) - 2 years ago - Reply 0


@media screen and (max-width: 768px) { ul.navbar-nav { width: 200px; } }

Heloisa Araújo (0) - 2 years ago - Reply 0


Is there a way to keep this menu in the condensed mobile version that toggles? I'm attempting to save space in my header bar.

Isaac Menely (0) - 3 years ago - Reply 0


Is there a way to make the menu stay in the condensed mobile form?

Isaac Menely (0) - 3 years ago - Reply 0


Unfortunately, it seems to no longer work with Bootstrap v.3.2.0 - the side menu appears all white. Any solutions?

Benna (0) - 3 years ago - Reply 0


Hope there will come a solution to this. For now i was able to «find» the menu again by setting .side-collapse overflow:visible and .side-collapse.in overflow:hidden; but missing background color. and nav.navbar-collapse{background-color: inherit;} is not workin properly

Ola (0) - 3 years ago - Reply 0


Brilliant! When you reduce the size of the browser to simulate a mobile device, however, it includes functioning drop-downs. The actual HTML doesn't include this. I've always had problems with adding drop-downs to existing menus 'back in the days' of hovering with a mouse!

Croydon (0) - 3 years ago - Reply 0


thank's you very much, !^^

Truc Quynh (0) - 3 years ago - Reply 0


- On my iPad (portrait mode) the navbar-toggle button is not visible, only the black navbar ( when removing pull-left its visible on the right side)
- In landscape mode it shows the full navbar with textlinks (this is correct)

Any ideas? I've test it with this direct snippet link too.

Bart (0) - 3 years ago - Reply 0


Did you get a solution to this? Did you get ipad portrait view to show the toggle button?

Ash Moosa (0) - 3 years ago - Reply 0


Hi, not yet.. i can't find it where to change the css for this so far.

Bart (0) - 3 years ago - Reply 0


Hey guys! I replaced navbar-inverse with navbar-default and the whole navbar became invisible. How to fix that?

sad (0) - 3 years ago - Reply 0


How do you get the nav links on desktop mode to center? I tried text-align: center but it didn't work.

un_aligned (0) - 3 years ago - Reply 0


I replaced <ul class="nav nav-justified"> in place of <ul class="nav navbar-nav"> Hope that helps!

boycanfly (0) - 3 years ago - Reply 0


This wasn't exactly what I was looking for, but it got me looking in the right direction. Eventually I found http://stackoverflow.com/a/..., and that is exactly what I wanted.

un_aligned (0) - 3 years ago - Reply 0


I noticed there are scrolling issues on both Android Phones and iPhone for the second level nav items. Adding overflow-y: visible; to .side-collapse seemed to fix it.

boycanfly (0) - 3 years ago - Reply 0


Thanks for this suggestion! I just was looking for this :) Works fine!

Bart (0) - 3 years ago - Reply 0


Hey! Is this Owen? thanks for the fix, I hope the snippet author will notice it

maxsurguy (0) - 3 years ago - Reply 0


You were close, It's Ryan!

boycanfly (0) - 3 years ago - Reply 0


haha, cool :) welcome to Bootsnipp!

maxsurguy (0) - 3 years ago - Reply 0


That's good.

The Silences (0) - 3 years ago - Reply 0


Brilliant! Just what I was looking for, for a new mobile web site. Thanks!

Darth Guybrush (0) - 3 years ago - Reply 0


works on android?, cuz im using one that works 100% on iphone and 4% on android, its called sidr-menu

Malaiko (0) - 3 years ago - Reply 0


Yeah I tried that. This is better and works seemlessly with Bootstrap 3.1.1.

Darth Guybrush (0) - 3 years ago - Reply 0


Very cool, thanks!

Gary Harrower (0) - 3 years ago - Reply 0


Related: See More