Slyder 
a responsive slider navigation faq jQuery plugin
Demo page
Package manager
//bower bower install --save yohoho.slyder//npm npm install yohoho.slyderInstall
<!-- In your <body> HTML tag --> <!-- slyder faq --> <ul class="slyder-nav"> <!-- 1 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 1 ›</a> </h3> <ul class="s-hidden"> <li class="s-back"> <a href="#" class="s-link">‹ Question 1</a> </li> <!-- 1.1 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 1.1 ›</a> </h3> <div class="s-hidden"> <p class="s-back"> <a href="#" class="s-link">‹ Question 1.1</a> </p> <div class="s-content"> <p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices. Praesent sit amet aliquet purus, varius tempus augue. Aliquam nec diam lacinia, porta enim eget, venenatis purus. Praesent mollis nisi a diam volutpat suscipit. Nam pretium elit mauris, eget laoreet massa scelerisque in.</p> </div> </div> </li> <!-- 1.2 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 1.2 ›</a> </h3> <div class="s-hidden"> <p class="s-back"> <a href="#" class="s-link">‹ Question 1.2</a> </p> <div class="s-content"> <p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices. Praesent sit amet aliquet purus, varius tempus augue. Aliquam nec diam lacinia, porta enim eget, venenatis purus. Praesent mollis nisi a diam volutpat suscipit. Nam pretium elit mauris, eget laoreet massa scelerisque in.</p> </div> </div> </li> </ul> </li> <!-- 2 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 2 ›</a> </h3> <div class="s-hidden"> <p class="s-back"> <a href="#" class="s-link">‹ Question 2</a> </p> <div class="s-content"> <p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices. Praesent sit amet aliquet purus, varius tempus augue. Aliquam nec diam lacinia, porta enim eget, venenatis purus. Praesent mollis nisi a diam volutpat suscipit. Nam pretium elit mauris, eget laoreet massa scelerisque in.</p> </div> </div> </li> <!-- 3 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 3 ›</a> </h3> <ul class="s-hidden"> <li class="s-back"> <a href="#" class="s-link">‹ Question 3</a> </li> <!-- 3.1 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 3.1 ›</a> </h3> <ul class="s-hidden"> <li class="s-back"> <a href="#" class="s-link">‹ Question 3.1</a> </li> <!-- 3.1.1 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 3.1.1 ›</a> </h3> <div class="s-hidden"> <p class="s-back"> <a href="#" class="s-link">‹ Question 3.1.1</a> </p> <div class="s-content"> <p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices. Praesent sit amet aliquet purus, varius tempus augue. Aliquam nec diam lacinia, porta enim eget, venenatis purus. Praesent mollis nisi a diam volutpat suscipit. Nam pretium elit mauris, eget laoreet massa scelerisque in.</p> </div> </div> </li> <!-- 3.1.2 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 3.1.2 ›</a> </h3> <div class="s-hidden"> <p class="s-back"> <a href="#" class="s-link">‹ Question 3.1.2</a> </p> <div class="s-content"> <p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices. Praesent sit amet aliquet purus, varius tempus augue. Aliquam nec diam lacinia, porta enim eget, venenatis purus. Praesent mollis nisi a diam volutpat suscipit. Nam pretium elit mauris, eget laoreet massa scelerisque in.</p> </div> </div> </li> </ul> </li> <!-- 3.2 --> <li class="s-item"> <h3> <a href="#" class="s-link">Question 3.2 ›</a> </h3> <div class="s-hidden"> <p class="s-back"> <a href="#" class="s-link">‹ Question 3.2</a> </p> <div class="s-content"> <p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices. Praesent sit amet aliquet purus, varius tempus augue. Aliquam nec diam lacinia, porta enim eget, venenatis purus. Praesent mollis nisi a diam volutpat suscipit. Nam pretium elit mauris, eget laoreet massa scelerisque in.</p> </div> </div> </li> </ul> </li> </ul>//in your main JS file $('.slyder-nav').slyder({ back: '.s-back .s-link', current: 's-current', hidden: 's-hidden', item: '.s-item', link: 'h3 .s-link', offset: 0, scrolltarget: 'current', scrolltop: true, wrapper: 'slyder-wrapper' });Settings
| Option | Type | Default | Description |
|---|---|---|---|
| back | string | '.s-back .s-link' | CSS selector to find back link navigation |
| current | string | 's-current' | CSS class applied to current item |
| hidden | string | 's-hidden' | CSS selector to find hidden item to display |
| item | string | '.s-item' | CSS selector to find sub items |
| link | string | 'h3 .s-link' | CSS selector to find link navigation |
| offset | integer | 0 | Pixels to offset when auto-scroll |
| scrolltarget | string | 'current' | Define the target to auto-scroll |
| scrolltop | boolean | true | Define wether to enable or not auto-scroll |
| wrapper | string | 'slyder-wrapper' | CSS class applied to wrapper |
Dependencies
jQuery latest version
Authors and Copyright
Made with ♥ by Achraf Chouk
Please, read LICENSE for more details.
