README
Vanilla menu
A simple and lightweight javascript menu without dependencies.
Install
npm i vanilla-menu
Example
<div id="menu" class="va-menu-container va-menu-container--default">
<div class="va-menu__mobile">
<div class="va-menu__mobile-content">
Mobile header here
</div>
<a href="#" class="va-menu__mobile-button"></a>
</div>
<div class="va-menu__brand">
LOGO HERE
</div>
<ul class="va-menu">
<li class="va-menu__item">
<a href="https://github.com/dimsog/vanilla-menu" class="va-menu__item-link">Home</a>
</li>
<li class="va-menu__item">
<a href="#" class="va-menu__item-link">Dropdown</a>
<ul class="va-submenu">
<li class="va-submenu__item">
<a href="#" class="va-submenu__item-link">Menu item 1</a>
</li>
<li class="va-submenu__item">
<a href="#" class="va-submenu__item-link">Menu item 2</a>
</li>
</ul>
</li>
<li class="va-menu__item va-menu__item--megamenu">
<a href="#" class="va-menu__item-link">Megamenu</a>
<div class="va-menu__item--megamenu-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer mattis ipsum eget leo auctor posuere. Suspendisse ac lacus ex.
Fusce tempus pretium sapien nec malesuada.
Sed velit velit, suscipit eu vestibulum et, euismod sit amet diam.
Morbi dapibus consectetur commodo. Maecenas aliquam at felis sed cursus.
</div>
</li>
<li class="va-menu__item va-menu__item--fixed va-menu__item--megamenu">
<a href="#" class="va-menu__item-link">Megamenu fixed</a>
<div class="va-menu__item--megamenu-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi fringilla magna a velit feugiat eleifend.
Nullam vulputate vehicula suscipit.
</div>
</li>
<li class="va-menu__item">
<a href="#" class="va-menu__item-link">Submenu</a>
<ul class="va-submenu">
<li class="va-submenu__item">
<a href="#" class="va-submenu__item-link">
TV
</a>
<ul class="va-submenu">
<li class="va-submenu__item">
<a href="#" class="va-submenu__item-link">Brand 1</a>
</li>
<li class="va-submenu__item">
<a href="#" class="va-submenu__item-link">Brand 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="va-menu va-menu-more-container">
<li class="va-menu__item">
<a href="#" class="va-menu__item-link">...</a>
</li>
</ul>
<div class="va-menu__static">
<a href="#">
<img src="images/shopping-cart.svg" class="icon img-fluid">
</a>
</div>
</div>
SCSS file
@import '~vanilla-menu/src/scss/vanilla-menu';
JavaScript
import VanillaMenu from 'vanilla-menu';
new VanillaMenu('#menu', {
mobile: 768,
clickable: false
});