The off-canvas menu plug-in for Bootstrap that I am going to show you in this tutorial can be used for smaller screens like mobile phones as a user clicks on the three lines menu toggle button.
The menu will overlap the visible content and it will disappear as a user clicks the cross button (that you may customize).
So, let me start by an online demonstration along with a setting up guide of this off-canvas menu.
In this demo, a menu bar is created by using the typical Bootstrap navbar class. The button with three horizontal lines that show up in small screens like mobile or smart phones is given an added class apart from what you normally use i.e. offcanvas-toggle. In addition, the data-toggle=”offcanvas” data attribute is also given.
See the demo and if you are using a bigger screen, resize it so the mobile menu appears. Click on three line button for displaying the off-canvas menu:
Notice this line and see the difference if you already experienced the navbar in Bootstrap:
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">
To set up this plugin for your web pages, follow these steps.
Include the bootstrap.min.css and bootstrap.offcanvas.min.css files in the <head> section. You may get plug-in’s package by downloading from the Github site (developed by iamphill) or download directly here. Unzip and get the CSS and JS files.
<link href=”http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”css/bootstrap-offcanvas/bootstrap.offcanvas.min.css”/>
Just above the </body> tag, place the jQuery and bootstrap.offcanvas.js JS file. This is also contained in the downloaded package.
Step 3 – the markup:
As mentioned earlier, use the plug-in’s classes and data attribute in the <button> tag for mobile. See the complete code in the demo page.
You may use custom CSS for styling the menu or its items. Using the same off-canvas plug-in, the menu items and divider are assigned some CSS properties for demonstration.
While you may use many other classes for the whole menu or parts of it, I have just used the dropdown-menu and divider classes in the <style> section to give off canvas menu a custom look. Rest of the code is the same as in the first example.
You may also override the CSS of the navbar-default class for customizing the look of the off-canvas or complete menu. For that, simply change the navbar-default related classes in the <style> section after Bootstrap’s CSS file or in your own external file.
See this demo where off-canvas menu is created by overriding the navbar-default classes:
Get the complete code in the demo page for this example.