Mobile navigation module for your website, which gives you possibility to get rid of routine
Example
https://codepen.io/mickyholbrook/pen/OJRXrvd
Installation
npm
npm i mobile-nav-js
Load the required JS to your entry JS file:
let MobileNav = require('mobile-nav-js');
or
import MobileNav from 'mobile-nav-js';
Load the required stylesheet to your entry CSS file:
@import "node_modules/mobile-nav-js/index";
Cloning git repository
1. Go to your project directory
2. git clone https://github.com/dmitriyakkerman/mobile-nav-js.git .
Put the required stylesheet link in HEAD tag:
<link rel="stylesheet" href="./dist/css/mobile-nav.min.css">
Put the script at the bottom of your markup:
<script src="./dist/js/mobile-nav.min.js"></script>
Usage
- Create typical menu-toggler/burger-menu(sometimes you need more than one toggler so you can use several ones if needed).
- Create mobile navigation component with nesting and toggle elements.
<div class="mobile-toggler toggler1">☰</div>
<ul class="mobile-nav" role="navigation">
<li>
<a href="">1</a>
<button class="link-toggler">+</button>
<ul>
<li>
<a href="">1.1</a>
<button class="link-toggler">+</button>
<ul>
<li>
<a href="">1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">2</a>
<button class="link-toggler">+</button>
<ul>
<li>
<a href="">2.1</a>
<button class="link-toggler">+</button>
<ul>
<li>
<a href="">2.1.1</a>
<button class="link-toggler">+</button>
<ul>
<li>
<a href="">2.1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Initialization
- Specify root selector in "nav" option.
- Specify "navTogglers" option: one or multiple nav toggle selectors inside "el" option and media breakpoint of when your nav toggle elements are going to be visible inside "responsive" option.
- Specify link toggle selector in "linkTogglers" option.
- Specify "bodyClose" option if navigation should be closed after "click" event fired out navigation root element("false" by default).
- Specify "preventParentClick" option for preventing "click" event on links, which contain children("false" by default).
document.addEventListener('DOMContentLoaded', function() {
new MobileNav({
nav: '.mobile-nav',
navTogglers: {
el: '.mobile-toggler', //or '.toggler1, .toggler2' if you have different togglers
responsive: 991
},
linkTogglers: '.link-toggler',
bodyClose: true,
preventParentClick: true
})
});