I am a super small menu library written in vanilla js. I only contain a few essential methods and am easy to handle.
The Library file needs to embede in the head of your site directly in the html code or via your cms. Then the class LightMenu can be called in another js file with all the public methods like in the following example.
let menu = new LightMenu({
menu: 'navigation',
toggleBtn: 'hamburger',
closeBtn: 'closeMenu'
});Open: Opens the menu manually.
menu.open();Close: Closes the menu manually.
menu.close();| Key | Explanation |
|---|---|
| menu | id of your menu |
| menuContainer | css selector of your menu Container - default html body |
| toggleBtn | id of your toggle button |
| closeBtn | id of your close button |
| closeOnClick | deactivate menu through click on anything else |
| useSubmenuFunctions | use the submenu toggle functions for hidden submenus |
| submenuSelector | class selector to select submenu elements |
| trailSelector | class selector of active submenu parentnode |
| overlayOptions | style options for body overlay |
| overlayOptions.overlayContainer | id where the overlay should be placed - default on body |
| overlayOptions.color | hex code of preferred color |
| overlayOptions.opacity | number between 0 and 1 |
| overlayOptions.zIndex | where to place the overlay |
| overlayOptions.clickable | where to place the overlay |
| openCallback | function to run when menu opens |
| closeCallback | function to run when menu closes |
| submenuOpenCallback | function to run when submenu opens |
| submenuCloseCallback | function to run when submenu closes |