Simple JS 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 }) });