Side Navbar For One Page Scrolling Sites – iSlide

Preview:

Description:

iSlide is a JavaScript library that automatically generates a customizable navbar for one-page scrolling websites.

Features:

• Smooth Scrolling.
• Material Icons.
• Custom sizes, colors, positions.

How to use it:

1. Load the stylesheet iSlide-style.css and JavaScript iSlide-script.js in the document.

<link rel=”stylesheet” href=”iSlide-style.css” />
<script src=”iSlide-script.js”></script>

2. Create an empty DIV container to hold the navbar.

<div id=”iSlide”></div>

3. Assign a unique name to each page section as follows:

<section id="section_1" class="slide" data-islide-name="menuElement1">
  <h1>Example</h1>
</section>
<section id="section_2" class="slide"  data-islide-name="menuElement2">
  <h2>Section 2</h2>
</section>
<section id="section_3" class="slide"  data-islide-name="menuElement3">
  <h2>Section 3</h2>
</section>
<section id="section_4" class="slide"  data-islide-name="menuElement4">
  <h2>Section 4</h2>
</section>

4. Initialize the iSlide library and define the icon name (see https://fonts.google.com/icons) for each nav item.

const menu = new iSlide("#iSlide", {
      icons: {
        menuElement1: 'settings',
        menuElement2: 'info',
        menuElement3: 'favorite',
        menuElement4: 'paid',
      }
});
menu.mount();

5. Set the position of the navbar: left, right, top, bottom.

const menu = new iSlide("#iSlide", {
      position: 'right', // default: 'left'
});

6. Customize the divider styles: horizontal, vertical, dot.

const menu = new iSlide("#iSlide", {
      dividers: 'dot', // default: 'vertical'
});

7. Enable/disable smooth scrolling.

const menu = new iSlide("#iSlide", {
      smooth_scrolling: true,, // default: 'auto'
});

8. More configuration options.

const menu = new iSlide("#iSlide", {
      indicator_radius: 20, 
      bar_radius: 20, 
      icons_size: 20, 
      z_index: 3, 
      animation_speed: 0.2, 
      scrolling_offset: 0, 
      selection_range: [-10, 400], 
      //Colors
      bar_color: 'transparent', 
      background_color: 'transparent', 
      icons_color: '#000000', 
      icons_active_color: '#ffffff', 
      indicators_color: 'transparent', 
      indicators_active_color: '#000000', 
      dividers_color: '#000000', 
});

9. API methods.

// init
menu.mount();
// remove the navbar
menu.delete();
// update the navbar
menu.update();
// enable sliding mode
menu.sliding(<buttonClass>, <hideOnStart>);