Edc-nav NPM | npm.io

edc-nav

A plugin javascript for create nav lists responsive

Installation

Using npm:

$ npm i --save edc-nav

Using yarn:

$yarn add edc-nav

Using

The plugin need the next HTML structure

<html>
<head>
  <style>
    .container {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="edc-nav header">
      <ul id="demo" class="burger edc-nav edc-nav-btn">
        <li></li><li></li><li></li>
      </ul>
      <h1>edc-nav</h1>
    </div>
    <div class="edc-nav nav">
      <ul>
        <li><a href="#" class="active">link 0</a></li>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link n</a></li>
      </ul>
    </div>
    <div class="edc-nav content">
        Your content goes here...
    </div>
  </div>
</body>
</html>

Include edc-nav.css and edc-nav.js

...
<head>
  ...
  <link rel="stylesheet" href="/{path}/edc-nav/edc-nav.css">
</head>
<body>
  ...
  <script type="application/javascript" src="/{path}/edc-nav/edc-nav.js"></script>
</body>
...

Launch edc-nav when the document is ready

...
<body>
  ...
  <script>
    window.onload = function () {
      edcNav.init();
    };
  </script>
</body>
...

Settings

You can use your custom selectors

...
<body>
  ...
  <script>
    window.onload = function () {
      edcNav.init({
        selector: '.my-awesome-selector',
        trigger_selector: '#my-awesome-button'
      });
    };
  </script>
</body>
...

You can change this properties:

Option	Default	Description
selector	'.edc-nav'	the nav element
trigger_selector	'.edc-nav-btn'	the btn element, this launch nav
content_selector	'.edc-nav.content'	the content element
open_class	'edc-nav-open'	class name used when the nav is showing
close_class	'edc-nav-close'	class name used when the nad is hidden