Off Canvas Slide Menu For Bootstrap


We have put together a great off canvas slide menu plugin for you to use, hack up and add to your next web design project. A little freebie for your Bootstrap toolkit.

 

Mobile web design is here to stay, that’s for sure. Creating great user experiences across digital media can be a daunting task. So we wanted to give you one of our prized possessions and help to make it a bit easier for you. Here is the off canvas sliding menu we use in our latest Bootstrap theme Plixis.

 

Download with a Tweet! Demo

 


The HTML

Basically we are using two elements here. The actual hidden nav and the button which triggers it using a combination of CSS3 and Jquery. Below you will see the standard HTML markup with no bells and whistles. We are using our favorite icon set from FontAwesome in this code as well.


 


The CSS

Let’s make the magic. We will start with the navigation button. In this animation we will need to control each element of the navigation button and sliding navigation separately using CSS3. See below for the styles used to do this.

 


 

Next we will style the off canvas menu. Here you can adjust the background color of the menu container.


 

Finally we will style the menu and animations on hover. You can adjust fonts, sizes, colors, etc of the menu links. Since FontAwesome is svg based, we can use the icons in our CSS as well as HTML.


 


The Jquery

This is the final step to making this menu work. This includes the dropdown slide and triggers the menu on click.

 


 

Tell us what you think

Hope you find this menu and tutorial helpful. Feel free to hack it up and make it yours. If you don’t have twitter and want to get the menu you can download it here. Stay tuned for more freebies and tutorials on Bootstrap.

 

 


   

  • Jamie Collingwood

    This is awesome… thanks!

    • themearmada

      No problem Jamie! Glad you like it.

  • COBER //

    Is there a way to have it expanded on larger devices and only collapsed on small?

    • themearmada

      Thanks for your response.
      A quick way to do that would be to add a list with your menu items, display it on desktop only and remove the toggle button for the off canvas slide menu on desktop only. It would take some css fiddling but it could be done with this.

  • sanlunas

    This menu is nice.

    But I would like to use as an additional menu or (side panel) over my actual site. When i put this code my site menu messed up. Is there any way to put this side menu as an addttional one without scramble my top menu layout? What I mean is that… I would like to show just the MENU button overlaying the whole site… for people open it to change collor site etc.

    • themearmada

      Thanks Sanlunas. The menu can be used any way you would like. Up to you. If you are using in conjunction with another menu, you will need to do some tweaking. May want to use a different class other than “nav” so it does not conflict with bootstrap. Thanks.

  • skar

    Is there a way to have a top level section be an actual link, and have a caret next to it to show the dropdown list? example “Get help” is an an actual page but it also has children, and I don’t want to duplicate the Get help link to show in dropdown so it can be clicked

    • themearmada

      Thanks for the message. You can manipulate this menu as you wish. It would just take a little fiddling with to do what you are trying to do.

  • lucas

    Hi, If I want menu on left side, what need to edit?

    • themearmada

      This specific module is only for a right side menu. You would essentially need to change a good bit of the css to make this work with the left side.

      • Anirvan

        This menu is great. Just loved it. So first of all a big thanks to you for making it and sharing it. For menu to be on left side, you can just change the css and should work fine. Sorry I also did some other changes to fit my requirements.

        • themearmada

          Thanks Anirvan. I removed all the css from the comment thread to cut back on spacing. Please submit a link to it instead. Thanks

      • Sean Bintley

        by changing the “right” css properties to “left”, the menu seems to work ok on the left instead of on the right

  • Vladimir Lisic

    Is it possible to have normal navigation (full width bar) on large screens and trigger this option only for mobile devices (ie. when the Bootstrap activates it’s default mobile navbar)?

    Thanks

    • themearmada

      It would be possible but you would more than likely need to control two menus, one for desktop and one for mobile. You can hide the desktop version with bootstraps hidden-x class and then show the other only on mobile. It would require a good amount of css tweaks but definitely possible.

  • tinusmile

    For my latest project I need to place the sub nav on the outer left side instead of below. This only for desktop viewports of course, in mobile views I leave the script as it is. Now my question: how can I disable that all following list elements of the main nav collapse below. They should stay at the same height as sub nav opens on the left. Thanx!

    • themearmada

      Not 100% sure what you mean here. The sub nav is designed to fit directly underneath its parent nav. I think you may need to look at an alternate solution for what you are trying to do. Thanks

      • tinusmile

        Thanks for your reply. I finally coded the desktop nav separatly.

  • Guest123

    this is awesome, I wanted to know if there was a way to make it push the content and act like a slide in push nav. it does do it for the “menu” button but not for anything else.

    • themearmada

      With this current slide option there is not a way to make the content slide. There are a few other panel sliders out there that do that. Thanks.

  • Antony

    I would like to slide in the menu when the user clicks outside the menu area

    • themearmada

      May need to use a different plugin for that. This module works only with a toggle switch.

  • Zubaida Tasmeen

    is this menu compatible with IE8 plus? Plz let me know…

    • themearmada

      It should work nicely there. I would test it out a bit to make sure it works for your needs. Thanks

    • yyhmsg

      It doesn’t appear to work with IE 8, you can check it here – http://netrenderer.com/index.php – the whole menu loads full screen and takes up the whole top of the page.

  • Srini

    Nice work! When I load this page and decrease my browser width to smallest (mobile width), click on your icon bar drops down a menu, which is probably the standard bootstrap nav. So is there a reason why you didn’t use your own slide out menu on your blog?

    • themearmada

      This is a slide out menu from one of our themes Plixis seen here http://themearmada.com/plixis. We created our site before Plixis menu was created and wanted to keep everything pretty simple on the main site.
      Thanks

  • Ken Isaac Sonza

    Hi, how can i change the color of navbar!? on this code were can i find the css?

    thanks

    • themearmada

      You would want to override it in main.css. Use the class “.navbar.navbar-inverse.navbar-fixed-top” and change your background color property.

  • Aftab Alam

    Excellent Example. I have see it throughly the internet. This is more adaptive example. I will suffer this hatrick tomorrow.

  • q-think the welcome

    Thanks for Sharing 😉

    But I want ti implement normal menu horizontal in pc or other large device ( I mean not in hamburger menu or toggle menu ) and can change to hamburger or toggle transition off-canvas menu in mobile or other small device.

    So, how I can implement to this?
    please help and guide me. Thanks

    • themearmada

      For this example, it’s only set up as a slide menu. You would need to code in your normal nav and then use css media queries to switch over on mobile devices.

      • q-think the welcome

        Ok, Thanks for share & help me with your guide 😉

        One more question 🙂

        How to make responsive design with bootstrap to control page like mobile web?

  • curiousLee

    Thank you for this wonderful sliding menu! It works well on desktops and mobiles. You’ve done an amazing job on it, and you’ve made it free! Thanks again.

    • themearmada

      No problem. Glad you enjoyed it.

  • madsklitgaard

    I really love this plugin, but on my iPhone and iPad it only works once or twice in safair and then I can’t push it anymore – even if I reload the page it doesn’t work. I’ve had multiple people trying it on their phones and ipads and they all have problems with it in Safari. They are able to navigate for 2-3 links and then it stops working. It works fine in Chrome on both iPhone and iPad.

    What could be causing this?

    • themearmada

      Not sure. Is it the demo or your own site that is causing the error? It seems to be working on ours without a problem.

  • Pingback: Adding a sliding menu to your Bootstrap Application Layout control – Kwintessential Notes()

  • Tommy de Jesus

    I’m using this with Google Maps API, but I’d like the slider to load expanded. For some reason, I’m not seeing how I would do that.

    • themearmada

      This menu is built to be triggered by clicking. If you know javascript you may be able to customize it the way you want it. Thanks

  • dwood

    Hi, I want to comment that I am also having issues with the menu on the iPhone 5 and newer-it will work for some pages, but it gets stuck after going through a few pages on the site. I am not sure what is causing this-perhaps it is conflicting with another piece of javascript on my site? It works great everywhere else except Safari in iPhones.

    • themearmada

      Sounds like something on your site may be causing an issue. Check out firebugs console and make sure all your code is valid as well. Hope this helps. Thanks

      • dwood

        thanks for the reply! I actually downloaded the demo code from this page and uploaded it to my server without manipulating the code and I see the menu issue on the iphone/ipad. Is there updated code of this demo at github or another location? I know that the theme you created with the menu bar does work properly on the iphone.

  • Pingback: معرفی چند سایت برای افزودن منو موبایل به bootstrap()

  • Yoonyoul Ryu

    This is great! Thanks for the great work and share.

  • Hey, How would I do this for the left side, instead of the right side?

    I want the menu to come from the left but cannot figure it out

    • themearmada

      You would need to override some CSS and JS to do this. It’s only set up to work on the right side.

  • there is much easier approach to do this, above one is nice but having lots of extra markup then bootstrap itself, checkout below link for much better solution:
    http://www.jqueryscript.net/demo/jQuery-Based-Off-canvas-Menu-For-Bootstrap-Bootstrap-Offcanvas/

  • Soe Lynn Htike

    I have an error . I am testing with angular js.
    TypeError: $(…).navgoco is not a function

    at HTMLDocument. (shop.min.js:1)

  • Princess Himaja

    could you pls guide me……how to add a function for: on click anywhere the right side menu should be closed same as when we click on ‘X’ icon.

  • Pingback: Bootstrap off canvas slide menu - JavaScript, HTML5, jQuery plugins, and more - your library of scripts, tutorials and snippets!()

  • thanks a lot for sharing! I want the offcanvas to push the body to the right/left side and then the nav show up, is it possible? for now, the offcanvas just comes on the content, but I want it to push the content to a side…like this one : http://codepen.io/moeinio/pen/jAovmR

  • Y M

    Hey great menu you built here, tried to add it to my app unfortunately couldn’t get my submenus to work properly. i can’t get them to close / open. is there any special marker i should add ? an id or class ? putting the dropdown included in your example works fine.
    https://uploads.disquscdn.com/images/2dfc9a01470e744423c306e2af045573fb8fe289be3da26821709e5b3d4a417d.jpg

  • Ryan

    How to animated the hamburger menu that when clicked it will transform to x.