About

jQuery mdStrap plugin creates a side menu for smartphones or other handheld devices. It's built based on Twitter Bootstrap's framework version 4 (currently alpha 2).

Plugin installation

First, you'll have to include the necessary CSS stylesheets into the <head> section.

                            
  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />

  <!-- mdStrap Menu -->
<link rel="stylesheet" href="css/mdstrap.css" />

Second, you'll have to add the JS just before the closing </body> tag. Being a jQuery plugin, don't forget to add the jQuery library before.

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

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

And that's it.

Pre-Processors

If you are working with CSS pre-processors, you can @import the style into your project for better organization.

@import '/path/to/jquery-mdstrap'
As of this moment, only the SASS version is available.

Usage

To enable the plugin, you'll just need to call the function on the element containing the navigation.

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

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

    // Call with custom params
    $('.navba-rnav').mdStrap({
        'key1'    => 'value1',
        'key2'    => 'value2',
    });

});

Options

fixedTop
Bool (true by default)
Setting it to true allowes you to customise the appearence of the menu when scrolling. Usually set only when .navbar-fixed-top class is present.
menuTrigger
CSS class (navbar-toggler by default)
The class for the button that will trigger the menu when on mobile devices.
scrollValue
integer (10 by default)
If fixedTop is set to true, this is required to trigger the necessary class for stylize the navbar.
mobileMenuBreak
integer (992 by default)
In px, define the width breakpoint on which the mobile version of the menu kicks in.

Development

This plugin is in continuous development, so expect changes to occur. To get the latest changes, visit this page and the repo itself at https://www.github.com/corneliucirlan/mdstrap