Skip to content

Setup

Jump to bottom
Lorenzo D'Ianni edited this page Sep 25, 2016 · 4 revisions

Download files

Download and save all files

$ npm install sidebarjs --save

Insert sidebarjs.min.css and sidebarjs.min.js in your index.html.

<head>

  <link rel="stylesheet" href="your/path/sidebarjs.min.css">

</head>
<body>

  <script src="your/path/sidebarjs.min.js"></script>

</body>

Create SidebarJS element

Write [sidebarjs] attribute inside a tag (div, aside, or whatever you want).

<div sidebarjs>
  <div>Title</div>
  <nav>
    <a href="link">Home</a>
    <a href="link">About</a>
    <a href="link">Contacts</a>
  </nav>
</div>

Trigger button

Do you need a trigger button for open/close SidebarJS? Just put [sidebarjs-toggle] attribute inside a tag and it's done!

<div sidebarjs-toggle>Open/Close</div>

Init

When you have files, [sidebarjs] and [sidebarjs-toggle] you can init your SidebarJS Module like:

var sidebarjs = new SidebarJS()

Full file example

<head>

  <link rel="stylesheet" href="your/path/sidebarjs.min.css">

</head>
<body>

  <div sidebarjs-toggle>Open/Close</div>

  <div sidebarjs>
    <div>Title</div>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>

  <script src="your/path/sidebarjs.min.js"></script>
  <script>
    // Init SidebarJS
    var sidebarjs = new SidebarJS();
  </script>

</body>

Clone this wiki locally