Basic Fullscreen Navigation In Vanilla JavaScript

Category: Javascript , Menu & Navigation | October 8, 2017
Author: jpguevara
Views Total: 116
Official Page: Go to website
Last Update: October 8, 2017
License: MIT


Basic Fullscreen Navigation In Vanilla JavaScript


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>

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>

Apply your custom styles to the navigation menu. { background-color: #009688; } { background-color: #512da8; } { background-color: #00bcd4; } { background-color: #0288d1; } { background-color: #ff7043; }

Plugin’s default options.

  menuClass: 'menu',
  menuHiddenClass: 'menu-hidden',
  menuShowClass: 'menu-show',
  menuItemClass: 'menu-item',
  menuToggleAttribute: 'menu-toggle',
  showAnimations: false,
  animationHideClass: 'menu-hide-animate',
  animationShowClass: 'menu-show-animate',