a responsive slider navigation faq jQuery plugin
//bower
bower install --save yohoho.slyder//npm
npm install yohoho.slyder<!-- 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'
});| 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 |
jQuery latest version
Made with ♥ by Achraf Chouk
Please, read LICENSE for more details.