"navbar lateral slide menu"
Bootstrap 3.1.0 Snippet by joseanmola

<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="#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'); }); });

Related: See More

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 () - 1 year ago - Reply 0

Thank you so much!

Wouter Stulp () - 2 years 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 () - 3 years ago - Reply 0

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

maxsurguy () - 3 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 () - 3 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 () - 3 years ago - Reply 0

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

Heloisa Araújo () - 3 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 () - 4 years ago - Reply 0

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

Isaac Menely () - 4 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 () - 4 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 () - 4 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 () - 4 years ago - Reply 0

thank's you very much, !^^

Truc Quynh () - 4 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 () - 4 years ago - Reply 0

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

Ash Moosa () - 4 years ago - Reply 0

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

Bart () - 4 years ago - Reply 0

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

sad () - 4 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 () - 4 years ago - Reply 0

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

boycanfly () - 4 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 () - 4 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 () - 4 years ago - Reply 0

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

Bart () - 4 years ago - Reply 0

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

maxsurguy () - 4 years ago - Reply 0

You were close, It's Ryan!

boycanfly () - 4 years ago - Reply 0

haha, cool :) welcome to Bootsnipp!

maxsurguy () - 4 years ago - Reply 0

That's good.

The Silences () - 4 years ago - Reply 0

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

Darth Guybrush () - 4 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 () - 4 years ago - Reply 0

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

Darth Guybrush () - 4 years ago - Reply 0

Very cool, thanks!

Gary Harrower () - 4 years ago - Reply 0