jQuery Off-canvas Menu Plugin For Bootstrap 4 - mdstrap

jQuery Off-canvas Menu Plugin For Bootstrap 4 - mdstrap
File Size: 959 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mdstrap is a tiny jQuery plugin that makes your Bootstrap 4 navbar act as an off-canvas side menu on mobile devices.

How to use it:

1. Include jQuery library and Bootstrap v4 framework on the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Download and include the mdstrap plugin's script after jQuery.

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

3. Add a navigation toggle to your Bootstrap 4 navbar.

<nav class="navbar navbar-fixed-top navbar-full navbar-light">

  <div class="container-fluid">

      <!-- Navigation toggle -->
      <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">&#9776;</button>

      <div class="nav navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Features</a>
          <a class="nav-item nav-link" href="#">Pricing</a>
          <a class="nav-item nav-link" href="#">About</a>
      </div>

  </div>
</nav>

4. Call the function on the navigation and done.

$('.navbar-nav').mdStrap();

5. Available options.

$('.navbar-nav').mdStrap({

  // Setting it to true allowes you to customise the appearence of the menu when scrolling.
  'fixedTop'          : true,

  // The class for the button that will trigger the menu when on mobile devices.
  'menuTrigger'       : 'navbar-toggler',

  // If fixedTop is set to true, this is required to trigger the necessary class for stylize the navbar.
  'scrollValue'       : '10'

});

Change logs:

2017-04-12

  • v2.1.0

2016-09-25

  • Added option to enable debugging mode

2016-09-08

  • Fixed mobile menu items not clickable

2016-08-16

  • Fixed overlay z-index

2016-08-13

2016-08-10

  • Added touchscreen support

2016-08-02

  • Modified to work even if nav not fixed to top

2016-08-01

  • CSS update

This awesome jQuery plugin is developed by corneliucirlan. For more Advanced Usages, please check the demo page or visit the official website.