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

Similar snippets: See More


Comments:

Gary Harrower 2014-05-24 17:40:19
    Very cool, thanks!
Malaiko 2014-05-27 09:59:55
    works on android?, cuz im using one that works 100% on iphone and 4% on android, its called sidr-menu
Darth Guybrush 2014-06-19 23:01:40
    Yeah I tried that. This is better and works seemlessly with Bootstrap 3.1.1.
Darth Guybrush 2014-06-19 23:00:37
    Brilliant! Just what I was looking for, for a new mobile web site. Thanks!
The Silences 2014-06-25 07:19:44
    That's good.
boycanfly 2014-06-25 21:16:37
    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.
maxsurguy 2014-06-25 22:52:43
    Hey! Is this Owen? thanks for the fix, I hope the snippet author will notice it
boycanfly 2014-06-26 14:25:35
    You were close, It's Ryan!
maxsurguy 2014-06-26 17:38:31
    haha, cool :) welcome to Bootsnipp!
Bart 2014-06-30 13:40:27
    Thanks for this suggestion! I just was looking for this :) Works fine!
un_aligned 2014-06-25 22:16:00
    How do you get the nav links on desktop mode to center? I tried text-align: center but it didn't work.
boycanfly 2014-06-26 14:28:27
    I replaced <ul class="nav nav-justified"> in place of <ul class="nav navbar-nav"> Hope that helps!
un_aligned 2014-06-26 15:21:29
    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.
sad 2014-06-28 07:47:28
    Hey guys! I replaced navbar-inverse with navbar-default and the whole navbar became invisible. How to fix that?
Bart 2014-07-01 17:08:26
    - 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)
Ash Moosa 2014-08-31 03:56:47
    Did you get a solution to this? Did you get ipad portrait view to show the toggle button?
Bart 2014-09-10 08:27:03
    Hi, not yet.. i can't find it where to change the css for this so far.
Truc Quynh 2014-07-09 09:06:40
    thank's you very much, !^^
Croydon 2014-07-20 19:45:51
    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!
Benna 2014-08-05 20:01:26
    Unfortunately, it seems to no longer work with Bootstrap v.3.2.0 - the side menu appears all white. Any solutions?
Ola 2014-08-28 10:25:18
    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
Isaac Menely 2014-08-14 19:08:38
    Is there a way to make the menu stay in the condensed mobile form?
Isaac Menely 2014-08-14 19:25:12
    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.
Heloisa Araújo 2015-03-04 22:57:24
    @media screen and (max-width: 768px) { ul.navbar-nav { width: 200px; } }
Jan Mahler 2015-07-21 12:53:54
    Thanks for this simple code that do well what it's aimed for. Worked fine with bootstrap 3.2.0 navbar + fontawesome !
Giovanni Belelli 2015-07-30 07:39:53
    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 ?
Guest 2015-09-17 14:42:48
    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
maxsurguy 2015-09-18 00:15:55
    That means that jQuery is not loaded. Make sure to load jQuery before you load Bootstrap's .js files
Wouter Stulp 2016-04-21 07:42:12
    Thank you so much!
Sunil Kumar 2017-03-29 17:44:14
    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.

Commenting will be back soon.