Pretty Sidenav

Pretty Sidenav With VanillaJS.

Demo

Demo

How To Use

Install With CDN

Production

// CSS
https://cdn.rawgit.com/tutorjs/pretty-sidenav/0a369340/src/css/pretty-sidenav.css

// Javascript
https://cdn.rawgit.com/tutorjs/pretty-sidenav/0a369340/src/js/pretty-sidenav.js

Development

// CSS
https://rawgit.com/tutorjs/pretty-sidenav/master/src/css/pretty-sidenav.css

// Javascript
https://rawgit.com/tutorjs/pretty-sidenav/master/src/js/pretty-sidenav.js

HTML

  <div class="your-navigation">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>

  <button class="open-navigation">&#9776;</button>

Javascript

  
  new PrettySidenav({
    navigation: '.your-navigation',
    position: 'left', // left or right
    children: 'a', // element html children from your navigation
    trigger: '.open-navigation', // trigger for open navigation
    width: 300, // optional width (default) 250px
    background: '#34495e', // optional
    color: '#fff' // optional
  })

Thanks.