Basic Fullscreen Navigation In Vanilla JavaScript

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',
});