Bootstrap 4 jQuery Sliding Menu

Although Bootstrap 4 is still in its alpha (to be precise – alpha 2) version, designers and developers got excited a while ago and started using it. If you haven’t checked it yet, probably you will be delighted with some of the changes added as well as the new features it offers. Bootstrap 4 is a major update to the popular framework, adding Flexbox, Material Design cards and many others to ensure that it keeps up with current technologies and trends used in web design and development.

Bootstrap 4 jQuery Sliding Menu is created by a fellow developer and offers a new approach for the navigation, as it will automatically collapse and convert into a sliding menu which will make it pleasant to use on tablet and mobile devices.

This jQuery Sliding Menu is a nice solution for everyone who wants an easy and quick way to have a nice mobile menu without heavy JS plugins. Here is how to use it. Make sure to check the demo and the options below.

Installation:

CSS
Add the necessary CSS to your HTML doc:

<!-- 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" />

JS
The next step is to add the needed JS before the closing </body> tag. Do not 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>

Pre-processors
If you are working with CSS pre-processors, you can @import the style into your project to organize things better.

@import '/path/to/jquery-mdstrap'

Only the SASS version is available.

Call and Enable
To call the function and enable the plugin, you have to add the following code in your doc or put it in a separate file and link it.

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

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

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

});

This is it, you should have a working sliding menu for mobile and tablet devices.

Have a look at the demo where options are outlined or download it to start playing with it. Resize your browser window to see the plugin in action.

DEMO DOWNLOAD

More info at GitHub.

Featured image designed by Freepik