About

jQuery plugin built on top of Bootstrap framework to create mobile menus similar to Google's Material Design.

Instalation

The install process is relativelly easy, regardless of which installation method you choose. The end result will be the same.

Using Bower

$ bower install jquery-mdstrap

Using npm

$ npm install jquery-mdstrap

Running any of this commands will download the plugin into their respective location.

Manual installation

If you don't feel comfortable with using Bower, you can install the plugin manually. Download from here in a .zip format and unzip the file. Place the contents of the dist/ folder into your project.

No matter what method you've chosen, you will now have to include the plugin's files into your project.

                        
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />

<!-- jQuery library -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- jQuery mdStrap -->
<script src="jquery-mdstrap.min.js"></script>
                        
                    

It is recommended to load all JavaScript files just before the closing </body> tag for better performance, but this is not a requirement. Just don't forget to add the necessary dependencies before the plugin files.

Source files

If you use SASS in your development process, this plugin comes with the .sass source files. Just include them into your project and you're done (on the CSS part).

@import "/path/to/source/jquery-mdstrap"

If using SASS for development, it is actually the recoomended method as it reduces the number of HTTP requests and makes the page load faster.

Usage

First, add the navigation mockup into your project. Something like this...

                        
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark bg-primary">
    <div class="container-fluid">
        <!-- Navbar toggle -->
        <button class="navbar-toggler navbar-toggler-left" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Brand -->
        <h1 class="navbar-brand">jQuery mdStrap</h1>

        <!-- Main menu -->
        <ul class="navbar-nav navbar-nav-left">
            <li class="nav-item active"><a class="nav-link" href="#about">Home <span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#instalation">Instalation</a></li>
            <li class="nav-item"><a class="nav-link" href="#options">Options</a></li>
            <li class="nav-item"><a class="nav-link" href="#development">Development</a></li>
        </ul>
    </div>
</nav>
                        
                    

Use the .navbar-toggleable-* classes to enable the mobile view at different screen widths. Reference the Bootstrap documentation for more details about the grid system.

After that, call the plugin in a separate JavaScript file or at the bottom of you page (after the plugin's own JS script).

                        
jQuery(document).ready(function($) {

    // Call with default params
    $('.navbar-nav-left').mdStrap();

    // Call with custom params
    $('.navba-nav-right').mdStrap({
        'menuTrigger' : '.navbar-toggler-right'
    });

});
                        
                    

Options

Setting	Type	Default	Description
fixedTop	boolean	true	Specify if the navigation is fixed to the top.
menuTrigger	CSS class	.navbar-toggler-left	The class that triggers the menu when clicked.
scrollValue	integer	10	The value on which the navbar gets a box-shadow effect. Necessary only when fixedTop is set to true.
debug	boolean	false	Logs various plugin related messages/settings. Recommended only when asked by the developer or facing with erros generated by the plugin.

Development

This plugin is in continuously development.