"Fancy Sidebar Navigation"
Bootstrap 3.3.0 Snippet by maridlcrmn

<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 id="wrapper"> <div class="overlay"></div> <!-- Sidebar --> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Brand </a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">Team</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Works <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">Dropdown heading</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="https://twitter.com/maridlcrmn">Follow me</a> </li> </ul> </nav> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1>Fancy Toggle Sidebar Navigation</h1> <p>Bacon ipsum dolor sit amet tri-tip shoulder tenderloin shankle. Bresaola tail pancetta ball tip doner meatloaf corned beef. Kevin pastrami tri-tip prosciutto ham hock pork belly bacon pork loin salami pork chop shank corned beef tenderloin meatball cow. Pork bresaola meatloaf tongue, landjaeger tail andouille strip steak tenderloin sausage chicken tri-tip. Pastrami tri-tip kielbasa sausage porchetta pig sirloin boudin rump meatball andouille chuck tenderloin biltong shank </p> <p>Pig meatloaf bresaola, spare ribs venison short loin rump pork loin drumstick jowl meatball brisket. Landjaeger chicken fatback pork loin doner sirloin cow short ribs hamburger shoulder salami pastrami. Pork swine beef ribs t-bone flank filet mignon, ground round tongue. Tri-tip cow turducken shank beef shoulder bresaola tongue flank leberkas ball tip.</p> <p>Filet mignon brisket pancetta fatback short ribs short loin prosciutto jowl turducken biltong kevin pork chop pork beef ribs bresaola. Tongue beef ribs pastrami boudin. Chicken bresaola kielbasa strip steak biltong. Corned beef pork loin cow pig short ribs boudin bacon pork belly chicken andouille. Filet mignon flank turkey tongue. Turkey ball tip kielbasa pastrami flank tri-tip t-bone kevin landjaeger capicola tail fatback pork loin beef jerky.</p> <p>Chicken ham hock shankle, strip steak ground round meatball pork belly jowl pancetta sausage spare ribs. Pork loin cow salami pork belly. Tri-tip pork loin sausage jerky prosciutto t-bone bresaola frankfurter sirloin pork chop ribeye corned beef chuck. Short loin hamburger tenderloin, landjaeger venison porchetta strip steak turducken pancetta beef cow leberkas sausage beef ribs. Shoulder ham jerky kielbasa. Pig doner short loin pork chop. Short ribs frankfurter rump meatloaf.</p> <p>Filet mignon biltong chuck pork belly, corned beef ground round ribeye short loin rump swine. Hamburger drumstick turkey, shank rump biltong pork loin jowl sausage chicken. Rump pork belly fatback ball tip swine doner pig. Salami jerky cow, boudin pork chop sausage tongue andouille turkey.</p> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper -->
body { position: relative; overflow-x: hidden; } body, html { height: 100%;} .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color: transparent;} /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 220px; } #sidebar-wrapper { z-index: 1000; left: 220px; width: 0; height: 100%; margin-left: -220px; overflow-y: auto; overflow-x: hidden; background: #1a1a1a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #page-content-wrapper { width: 100%; padding-top: 70px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -220px; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%; } .sidebar-nav li:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li:first-child a { color: #fff; background-color: #1a1a1a; } .sidebar-nav li:nth-child(2):before { background-color: #ec1b5a; } .sidebar-nav li:nth-child(3):before { background-color: #79aefe; } .sidebar-nav li:nth-child(4):before { background-color: #314190; } .sidebar-nav li:nth-child(5):before { background-color: #279636; } .sidebar-nav li:nth-child(6):before { background-color: #7d5d81; } .sidebar-nav li:nth-child(7):before { background-color: #ead24c; } .sidebar-nav li:nth-child(8):before { background-color: #2d2366; } .sidebar-nav li:nth-child(9):before { background-color: #35acdf; } .sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus{ color: #fff; text-decoration: none; background-color: transparent; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 20px; line-height: 44px; } .sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none; } /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger { position: fixed; top: 20px; z-index: 999; display: block; width: 32px; height: 32px; margin-left: 15px; background: transparent; border: none; } .hamburger:hover, .hamburger:focus, .hamburger:active { outline: none; } .hamburger.is-closed:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px,0,0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { position: absolute; left: 0; height: 4px; width: 100%; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-closed .hamb-top { top: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-middle { top: 50%; margin-top: -2px; } .hamburger.is-closed .hamb-bottom { bottom: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-top { top: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-bottom { bottom: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); } .hamburger.is-open .hamb-middle { display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); } .hamburger.is-open:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-open:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px,0,0); -webkit-transition: all .35s ease-in-out; } /*-------------------------------*/ /* Overlay */ /*-------------------------------*/ .overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(250,250,250,.8); z-index: 1; }
$(document).ready(function () { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = false; trigger.click(function () { hamburger_cross(); }); function hamburger_cross() { if (isClosed == true) { overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } $('[data-toggle="offcanvas"]').click(function () { $('#wrapper').toggleClass('toggled'); }); });

Related: See More


Questions / Comments:

I've almost got this to work but I'm struggling with the background hover colour on the burger menu - its supposed to change colour to correspond with the menu title colour but mine is just white. Can anyone help to fix this please?

Example: http://www.matthewsfrance.co.uk/burgermenutest.html

ktm1971 () - 8 months ago - Reply 0


please update to boostrap v4.2.1. thx.

erfan1988 () - 1 year ago - Reply 0


PROBLEM! PLEASE HELP!!!
If you add more text to the body content and scroll the page up, all teh text go up beyond the X, that's not supossed to happend... how I fix this?

Coralí Triana () - 2 years ago - Reply 0


Thank you, works perfectly

Virgile Parat () - 2 years ago - Reply 0


Thanks for the code. How can i make this side bar open in default ?

Arun Roy () - 2 years ago - Reply 0


How can I make this not to push the content when sidebar is show, but instead to overlay on top of the content?

crazymrazy () - 2 years ago - Reply 0


I like it and i thank you for the sharing

Could you tell me how i get the text "Menu" under the "hamburger-icons" and the "x"

Alex () - 2 years ago - Reply 0


that doesn't work !! i don't understand why i copied the three files !!

hayat () - 2 years ago - Reply 0


It will work with old bootstrap version(3.3.0) . You will still find some errors.
my advice for u is to take some idea from the current code and design ur own with latest bootstrap

Mansoor Ahmad () - 2 years ago - Reply 0


Any chance this will port over to BS4? I don't know how to do it XD

Mark Christian Perry () - 2 years ago - Reply 0


You can use http://upgrade-bootstrap.bo... to convert to BS4

Alex () - 2 years ago - Reply 0


add
css
#wrapper.animating #page-content-wrapper {
position: absolute;
}
edit js
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
$('#wrapper').addClass('animating').delay(500).queue(function(){
$(this).removeClass("animating").dequeue();
});
});

for full width wrapper while closing sidebar

Bilal Köşker () - 2 years ago - Reply 0


THis fancy bar page content wrapper is moving in mobiles and ipad. Is there any way we position the right side content from moving in mobile

Subash pothini () - 2 years ago - Reply 0


how do you make the sidebar disappear when clicking anywhere on the page?

thibaut () - 2 years ago - Reply 0


hii... can u help me how to download this code

chandana114 () - 2 years ago - Reply 0


Hey, i want to know why im having problem with Google Chrome
http://craftsys.com.br/temp... If i set it to mobile then will open the sidebar, in firefox it works well but in chrome i dont know why that sidebar error occours.

Um tal de Nuggets () - 2 years ago - Reply 0


To make the sidebar move to the right side of the page you need to overwrite Bootstrap's class:
Add .navbar-fixed-top {right:0}

Right now it's left:0

ruchiccio () - 2 years ago - Reply 0


How can I make, when you clicked an item of the navbar, the navbar will close?

Sn0pY () - 2 years ago - Reply 0


Sn0pY () - 2 years ago - Reply 0


i need this menu in right side how can i do it i need help ?

jenish astound () - 2 years ago - Reply 0


any solution?

jenish astound () - 2 years ago - Reply 0


yes is just apply:
right: 0;
and remove:
left: 0;
on ".sidebar-nav li:before" in css.

Thales Nunes () - 2 years ago - Reply 0


and... (almost forgot)
on " #sidebar-wrapper" change
left: 100vw
and in "#wrapper.toggled #sidebar-wrapper" chooose the size of the sidebar changing the left attribute

Thales Nunes () - 2 years ago - Reply 0


This is effing genius, thanks!

Todd () - 2 years ago - Reply 0


How Can i convert it with fixed Top nav bar ??

Bilal Baig () - 2 years ago - Reply 0


hi
I'm using it and seem to work very fine. But I'd like to start viewing the menu with a the dropdown section opened. If I set the class to "dropdown-open open" I don't know why but the open class disappear at run time!
Could u help me?

Daniele Cascone () - 2 years ago - Reply 0


amazingly cool............thanx a lot

Yo Yo () - 3 years ago - Reply 0


can u help me, i want to make the div not being block if i open the sidebar. i have been try to edit the source but still i cant do it.

Chuba () - 3 years ago - Reply 0


wich library did u used ? about js & css?

Kelyn Daniela Camacho Pernia () - 3 years ago - Reply 0


Is there an easy way to convert this to come down from the top?

Matthew Stahlmann () - 3 years ago - Reply 0


i have copy all the code php,js,css and included all fils link like css and js ....but still its not working

preet () - 3 years ago - Reply 0


i copy the code save in .html .css .js only open the hamburger if you hover :-) but i can't see the navigation. who can help me with this problem?

Julie Leurs () - 3 years ago - Reply 0


Hi, this is cool. Is there a way to keep the Menu open by default when the page loads on desktops?

Himanshu Sharma () - 3 years ago - Reply 0


This is great. I have been trying for an hour to make this work on the right side and just cannot get it to happen. So weird. Trying reversing everything and it refuses to accommodate.

Stuart Starr () - 3 years ago - Reply 0


For anyone who finds this post with the same question, I just finished making this work on the right side.

In CSS, replace all "left"s with "right" except for the very last one in the overlay class. This makes everything go from the right wall inward rather than the left wall inward. Next, go to the "hamburger" class right after the big "Hamburger-Cross" heading and put in "right: 0;". This will make the starting position of your hamburger icon on the right side.

I'm not sure about the color highlights because I ended up removing them for my implementation, but that should be the gist of it.

Bradley Singer () - 3 years ago - Reply 0


Hey great job on this navbar. How can I hide the button? to show only on small screens (mobile).

Afladimir () - 3 years ago - Reply 0


First thanks for the menu , very good , I'm already making my adjustments. I wanted to make when I click on the desired menu he close the menu back to my normal page. wait :)

Daniel () - 3 years ago - Reply 0


i copy the code save in .html .css .js but not function.. who can help me ? how i can get a full code include js

amirul () - 3 years ago - Reply 0


Concerning the Firefox problem, it's linked to the .hamburger CSS classes: the transform and transition properties are only notified for webkit based browsers. If you add systematically the -moz-, -o-, -ms- and standard property, it also works for Firefox. Example:

.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}

Benjamin Laible () - 3 years ago - Reply 0


This didn't work for me and the -ms-transition is not recognized by visual studio

Afladimir () - 3 years ago - Reply 0


Hi! The cross seems bad on Firefox, and i don't know why. Can someone help me? Otherwise, you made a really great job!

Neio Wolf () - 3 years ago - Reply 0


Concerning the Firefox problem, it's linked to the .hamburger CSS classes: the transform and transition properties are only notified for webkit based browsers. If you add systematically the -moz-, -o-, -ms- and standard property, it also works on Firefox. Example:

.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}

Benjamin Laible () - 3 years ago - Reply 0


How could add sub ​​-sub -menus with the style you drive

julio vazquez () - 4 years ago - Reply 0


How put a social sidebar under the menu without having the colors ?
and thanks for this menu it's really beautiful !

A Vt () - 4 years ago - Reply 0


How can i position the sidebar navigation at the right.. ?

jayr mendoza () - 4 years ago - Reply 0


when you press the link inside dropdown, this is closed!

Ari Lishu () - 4 years ago - Reply 0


doesnt work properly in firefox you get a line instead of the x

john () - 4 years ago - Reply 0


how to add a top nav if i add it your side bar doesnt work

Ezaz war () - 4 years ago - Reply 0


ie8 don't support. Do you have any idea ?

hasanmumin () - 4 years ago - Reply 0


Nice work.

Sreehari Inukollu () - 4 years ago - Reply 0


lovely ~

Kwangil Kim () - 4 years ago - Reply 0


How do you add other bootstrap components like buttons below the <ul>? Thanks!

Garrett () - 4 years ago - Reply 0


What happens when you just add them there?

maxsurguy () - 4 years ago - Reply 0


They float up to the top where the standard bootstrap nav area would be and are hidden behind the brand section.

Garrett () - 4 years ago - Reply 0


Hi !
How to download this, because I've got a install problem (sorry for my english, i'm french)

Apak™ () - 4 years ago - Reply 0


Hi!
I would like to add other stuff to the sidebar not only the navigation.
I don't know how to do it. Maybe you can make a small update to this to be able to add other stuff too.
Thanks!

Cardei Catalin  () - 4 years ago - Reply 0


i just find a problem in you code, the label Works don't work '-'
here a print
http://prntscr.com/6s54y8

Andrey Hartung (Mosufe) () - 4 years ago - Reply 0


i just find the solution, you dont set in the itens of Works the role="menuitem"

Andrey Hartung (Mosufe) () - 4 years ago - Reply 0


Just thank you <3

Andrey Hartung (Mosufe) () - 4 years ago - Reply 0


How to make it slide from right?

Bashar Ayyash () - 4 years ago - Reply 0


thank you, how can i have right slidebar?

Mahyar () - 4 years ago - Reply 0


is anybody having problems with the js code working?i got about 25 JSLint problems
(keep in mind im extremely new to javascript and would rather just say i dont know it

TheSpitefulOctopus () - 4 years ago - Reply 0


No, I don't have any JS problems. The errors that JS lint complains about is mainly tabs and undefined jQuery in this case. jQuery is undefined because it is loaded from a different file so JS Lint doesn't know about it.

maxsurguy () - 4 years ago - Reply 0


I need help... i want to add a "Title" next to the botton (the action-botton), or add the botton into a menu or... place it wheres the "brand" is located(imagine the bootstrap default menu)... Thanks in advance (sorry for my english)

Dilan Quesada () - 4 years ago - Reply 0


How can i stop "hamburger is-closed" to be fixed on top and to become static

Dont wanna that the three lines (hamb-top,hamb-middle,hamb-bottom) follow me when i scroll down

Sry for my bad english i hope you understand it.

Luka () - 4 years ago - Reply 0


in this hamburger button works only once, after we select some other link in that slidebar the hamburger button wont works but it displays

Hemanth MC () - 4 years ago - Reply 0


Hey ,

It Looks Nice....

But i want to set it for different width for different resolution ... can you help me for same

Vikram Awalekar () - 4 years ago - Reply 0


Maridlcrmn, I am looking to add this menu your in a look my site the link http://horabus.com/Consulta...
Help me please.

Breno D'Oliveira () - 4 years ago - Reply 0


hi Breno, you only have to add this class="item-nav" to each <select> and in your CSS you have to put this:

.sidebar-nav .item-nav {
background: transparent;
color: #fff;
border: 0;
height: 42px;
padding: 10px;
width: 100%;
max-width: 100%;
overflow: hidden;
cursor: pointer;
}

Maria del Carmen () - 4 years ago - Reply 0


Thanks for the tip. How do I remove the transparency of the items in the dropdownlist?

Breno D'Oliveira () - 4 years ago - Reply 0


great sidebar folks!

otomori () - 4 years ago - Reply 0


I am in Love with you Maridlcrmn...

Ravish () - 4 years ago - Reply 0


hey it seems okay. you made a nice job. thanks for sharing it

jammie () - 4 years ago - Reply 0


nice side navbar thumbsUp by Mirchu Team

Mirchu () - 5 years ago - Reply 0