A Bootstrap Android Style Menu

The Bootstrap menu and mobile

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.

A demo of Bootstrap off-canvas menu

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):

jQuery off canvas 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.

A demo with inverted navbar class

You may use the other navbar class (inverse) built-in the Bootstrap framework, which is black for the same menu:

jQuery off canvas menu inverse

See online demo and code

For that, just using the navbar-inverse class in the <nav> tag:

<nav class="navbar navbar-inverse">

 

A demo of using custom CSS for the look of responsive off-canvas menu

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:

jQuery off canvas menu custom-CSS

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

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️