Skip to content

crewstyle/yohoho.slyder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Slyder Build Status

a responsive slider navigation faq jQuery plugin
npm version GitHub version

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.

About

A responsive slider navigation jQuery plugin

Resources

License

Stars

Watchers

Forks

Packages

No packages published