#Mobile navigation menu for Bootstrap

BS-Mobilenav is a package allowing you to create a mobile friendly and swipeable menu from any regular Bootstrap grid element. View a demo

##Dependencies

• jQuery
• jQuery touchSwipe

##Installation

You can install BS-Mobilenav with Bower:

bower install bs-mobilenav

##How to use

###1. Init BS-Mobilenav with options

You need to initialize the menu before using it. Use the init() function with the following options:

var options = {
    swipe: true                        // switch the swipe gestures (left/right) on or off
};
BSMobilenav.init(options);

###2. Needed DOM elements

Please take a look at the demo in order to view the typical example. All you need to add besides the plugin initialization is a grid element with the .bs-mobilenav class, for example:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 bs-mobilenav">    // .bs-mobilenav class
            <!-- NAV MENU OR ANY OTHER HTML ELEMENTS YOU WANT-->
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Menu item</a></li>
                <li><a href="#">Menu item</a></li>
                ...
            </ul>
        </div>
        <div class="col-lg-9 col-md-8">     // content need to be properly sized in xs and sm as the menu will disappear in mobile/tablet mode
            <!-- ANY CONTENT-->
        </div>
    </div>
</div>

Be careful to properly size your main content in mobile/tablet mode (here with class="col-lg-9 col-md-8") as the menu will be removed from the flow for XS and SM screen sizes as defined by Bootstrap.

###3. CSS customization

You can customize the CSS in order to change the menu background color, width and the backdrop color:

.bs-mobilenav{
    ...
    @media (max-width: 991px) {
            ...
            width: 240px; // menu width in mobile mode (default to 240px)
            left: -243px; // change according to the menu width (includes the shadow width)
            background-color: #fff; // menu background color in mobile mode (default to white)
            ...
        }
    }

.bs-mobilenav-backdrop{
    background-color: rgba(0, 0, 0, 0.2); // menu backdrop background color
    ...
}

###4. Show/hide the menu programmatically

BSMobilenav.show();
BSMobilenav.hide();

###5 Toggle the menu using data-toggle attribute

In order to toggle the menu you can use data-toggle="bs-mobilenav" on any element, like this:

<button data-toggle="bs-mobilenav">Toggle</button>