Skip to content
A responsive slider navigation jQuery plugin
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
tasks
.gitignore
.travis.yml
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

Slyder Build Status

a responsive slider navigation faq jQuery plugin
npm version GitHub version

Demo page

Package manager

//bower
bower install --save yohoho.slyder
//npm
npm install yohoho.slyder

Install

<!-- In your <body> HTML tag -->

<!-- slyder faq -->
<ul class="slyder-nav">
    <!-- 1 -->
    <li class="s-item">
        <h3>
            <a href="#" class="s-link">Question 1 &rsaquo;</a>
        </h3>

        <ul class="s-hidden">
            <li class="s-back">
                <a href="#" class="s-link">&lsaquo; Question 1</a>
            </li>

            <!-- 1.1 -->
            <li class="s-item">
                <h3>
                    <a href="#" class="s-link">Question 1.1 &rsaquo;</a>
                </h3>

                <div class="s-hidden">
                    <p class="s-back">
                        <a href="#" class="s-link">&lsaquo; 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 &rsaquo;</a>
                </h3>

                <div class="s-hidden">
                    <p class="s-back">
                        <a href="#" class="s-link">&lsaquo; 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 &rsaquo;</a>
        </h3>

        <div class="s-hidden">
            <p class="s-back">
                <a href="#" class="s-link">&lsaquo; 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 &rsaquo;</a>
        </h3>

        <ul class="s-hidden">
            <li class="s-back">
                <a href="#" class="s-link">&lsaquo; Question 3</a>
            </li>

            <!-- 3.1 -->
            <li class="s-item">
                <h3>
                    <a href="#" class="s-link">Question 3.1 &rsaquo;</a>
                </h3>

                <ul class="s-hidden">
                    <li class="s-back">
                        <a href="#" class="s-link">&lsaquo; Question 3.1</a>
                    </li>

                    <!-- 3.1.1 -->
                    <li class="s-item">
                        <h3>
                            <a href="#" class="s-link">Question 3.1.1 &rsaquo;</a>
                        </h3>

                        <div class="s-hidden">
                            <p class="s-back">
                                <a href="#" class="s-link">&lsaquo; 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 &rsaquo;</a>
                        </h3>

                        <div class="s-hidden">
                            <p class="s-back">
                                <a href="#" class="s-link">&lsaquo; 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 &rsaquo;</a>
                </h3>

                <div class="s-hidden">
                    <p class="s-back">
                        <a href="#" class="s-link">&lsaquo; 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.

You can’t perform that action at this time.