Author: | bobk810i |
---|---|
Views Total: | 244 views |
Official Page: | Go to website |
Last Update: | March 14, 2022 |
License: | MIT |
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>);