Author: | jpguevara |
---|---|
Views Total: | 795 views |
Official Page: | Go to website |
Last Update: | October 8, 2017 |
License: | MIT |
Preview:

Description:
A simple vanilla JavaScript plugin to create a responsive, fullscreen navigation menu for desktop and mobile.
How to use it:
Include the main stylesheet in the document’s head section.
<link rel="stylesheet" href="src/menu.css">
Create the site navigation from a normal html unordered list.
<ul class="menu" id="menuId"> <li class="menu-item"><a href="#optionA">Option A</a></li> <li class="menu-item"><a href="#optionB">Option B</a></li> <li class="menu-item"><a href="#optionC">Option C</a></li> <li class="menu-item"><a href="#optionC">Option D</a></li> <li class="menu-item"><a href="#optionC">Option E</a></li> </ul>
Create a trigger element to toggle the fullscreen navigation.
<a menu-toggle="menuId" class="btn-menu">Menu</a>
Include the JavaScript ‘menu.js’ and initialize the plugin.
<script src="src/menu.js"></script>
Menu.init(options);
Apply your custom styles to the navigation menu.
li.menu-item { background-color: #009688; } li.menu-item:nth-child(1) { background-color: #512da8; } li.menu-item:nth-child(2) { background-color: #00bcd4; } li.menu-item:nth-child(3) { background-color: #0288d1; } li.menu-item:nth-child(4) { background-color: #ff7043; }
Plugin’s default options.
Menu.init({ menuClass: 'menu', menuHiddenClass: 'menu-hidden', menuShowClass: 'menu-show', menuItemClass: 'menu-item', menuToggleAttribute: 'menu-toggle', showAnimations: false, animationHideClass: 'menu-hide-animate', animationShowClass: 'menu-show-animate', });