Material Inspired Side Off-canvas Nav With Pure JavaScript

Category: Javascript , Menu & Navigation | December 8, 2016
Views Total:988 views
Official Page:Go to website
Last Update:December 8, 2016


Material Inspired Side Off-canvas Nav With Pure JavaScript


A Material design inspired nav written in ES 6 that enables the user to toggle an off-canvas menu from the edge, while blurring the main content.

How to use it:

Install the side nav to your web project.

Include the Material Icons iconic font for the icons.

 <link href="" rel="stylesheet">

Create the off-canvas menu from a nav list.

<nav id="primary-nav">
    <li><i class="material-icons">home</i>Home</li>
    <li><i class="material-icons">add</i>Add</li>
    <li><i class="material-icons">bubble_chart</i>Ideas</li>
    <li><i class="material-icons">insert_photo</i>Insert a Photo</li>
    <li><i class="material-icons">headset</i>Audio Options</li>
    <li><i class="material-icons">cast</i>Cast Options</li>
    <li><i class="material-icons">nature_people</i>Man Tree</li>
    <li><i class="material-icons">tag_faces</i>Are you Happy?</li>
    <li><i class="material-icons">settings</i>Settings</li>

Create a hamburger menu toggle button.

<button id="primary-nav-toggle" class="material-icons" aria-label="toggle navigation">menu</button>

You Might Be Interested In:

Leave a Reply