@bobk810i/islide-library v1.1.6
iSlide JS - JavaScript ES6 sliding menu bar library.
Documentation and example website - iSlideJS website
Getting started
Install the package from NPM...
npm i @bobk810i/islide-library
<link
rel="stylesheet"
href="node_modules/@bobk810i/islide-library/iSlide/iSlide-style.css"
/>
<script src="node_modules/@bobk810i/islide-library/iSlide/iSlide-script.js"></script>
... or include files from CDN
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@bobk810i/islide-library@1.1.6/iSlide/iSlide-style.css"
/>
<<<<<<< HEAD
<script src="https://cdn.jsdelivr.net/npm/@bobk810i/islide-library@1.1.6/iSlide/iSlide-script.js"></script>
=======
<script src="https://cdn.jsdelivr.net/npm/@bobk810i/islide-library@1.1.5/iSlide/iSlide-script.js"></script>
>>>>>>> dfde7955935ec8ba8e319945bf5de76665e9aaea
Create a div
at the beginning of the body
section with a specyfied class or id:
<div id="iSlide"></div>
Add points to the menu by adding data-islide-name="<name>"
to the html elements:
<section id="section_1" data-islide-name="menuElement1">
<!-- Section content -->
</section>
<section id="section_2" data-islide-name="menuElement2">
<!-- Section content -->
</section>
Specify the iSlide options - more info below
Initialize and mount iSlide object:
const menu = new iSlide("#iSlide", options);
menu.mount();
Documentation
Documentation website - comming soon...
Options:
Options object example:
const options = {
bar_color: '#ff99ff',
smooth_scroll: true,
icons_size: 30,
icons: {
menuElement1: 'settings',
menuElement2: 'info',
...
}
...
}
Avalible options:
Sizing:
indicator_radius: [number]
- icon indicators border radius default: 20bar_radius: [number]
- icons container (bar) border radius default: 20icons_size: [number]
- icons size default: 20
Colors:
indicators_color: [string]
- indicators basic color default: 'transparent'indicators_active_color: [string]
- indicators active color default: '#000000'bar_color: [string]
- bar color default: 'transparent'icons_color: [string]
- icons basic color default: '#000000'icons_active_color: [string]
- icons basic color default: '#ffffff'background_color: [string]
- menu background color default: 'transparent'dividers_color: [string]
- indicator dividers color default: '#000000'
Other:
position: [string]
- menu position (left,right,top,bottom) default: 'left'dividers: [string]
- shape of the dividers (horizontal,vertical,dot) default: 'vertical'z_index: [number]
- z-index of the menu default: 3smooth_scrolling: [boolean]
- enable smooth scrolling to the elements (true) default: falsescrolling_offset: [number]
- scrolling offset (gap) left at the top default: 0animation_speed: [number]
- menu sliding (described in methods below) animation time default: 0.2- essential
icons: [object]
- icons defining object (explained in icons below)
Icons:
It is essential to define icons
object inside options
.
Object construction:
const options = {
<data-islide-name> : '< icon name >',
...
}
Icon names:
Library is using Google Icons free icons. Just type the name of the icon inside of < icon name >
section.
Every <data-islide-name>
point must have the icon!
Methods:
.mount()
- initialization of the iSlide sliding menu.delete()
- delete iSlide sliding menu.update()
- update iSlide sliding menu after changing options.sliding(<buttonClass>, <hideOnStart>)
- enable sliding mode (< buttonClass > - trigger button, < hideOnStart > - (true) menu hidden on page load)
Event listeners:
.click(<data-islide-name>, function)
- run function after clicking on choosen icon.hover(<data-islide-name>, function)
- run function after hovering over choosen icon
Bug fix / Improvements
If you will find some bugs to fix, improvements to make or new features to add - feel free to write them in Issues tab.
License
GPL-3.0 License © Copyright 2022-present Jakub Kołodyński - Wszystkie prawa zastrzeżone/All Rights reserved