In this tutorial, I am going to show you an off-canvas menu based on Bootstrap navigation.
If you are already working with Bootstrap framework and included the jQuery library, then most of the dependencies are already done.
Additionally, it also requires jQuery mobile for touch events, so your menu works properly in mobile devices.
First, have a look at the demo which is followed by setting up guide.
In this example, a simple menu is created with Bootstrap built-in classes along with classes and data attributes related to making this menu looks like android mobile. The menu style is kept default (navbar-default) for this demo, have a look (Resize the screen for displaying mobile menu):
See online demo and code
For that, use the overlay class after the <body> tag:
<div class=”overlay”></div>
Now, where you normally use the button for mobile menu with data-toggle=”collapse”, instead of this use:
data-toggle="offcanvas"
The action is performed in the <script> section where the jQuery code is used to make this menu look like android mobile.
Also add the pull-left class in the <button> where you used data-toggle=”offcanvas”.
See the complete code in the demo page.
You may use the other navbar class (inverse) built-in the Bootstrap framework, which is black for the same menu:
See online demo and code
For that, just using the navbar-inverse class in the <nav> tag:
<nav class="navbar navbar-inverse">
Just like shown in the main Bootstrap navbar tutorial, you may override the default classes like navbar-default with your own CSS properties. For that, simply pick the related classes from the Bootstrap’s CSS file and either modify this under the <style> section after Bootstrap’s CSS or use it in your own external CSS file.
Whatever the case, you have to use it after the reference of Bootstrap’s CSS file. See this demo, where I changed the navbar-default properties for the android style off-canvas menu:
See online demo and code
Similarly, you may change the look and feel of the menu to match with the rest of your web project.
Credit for off-canvas menu: eknows