Slyder, a responsive slider navigation faq jQuery plugin

‹ Github project page

Getting started


<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu pulvinar magna. Sed efficitur neque et orci aliquam efficitur quis sed urna. Nam et malesuada risus. Pellentesque placerat feugiat odio, nec ullamcorper augue pulvinar et. Vestibulum tincidunt lorem eu est mattis, id tristique risus faucibus. Ut mauris lacus, mollis quis mattis viverra, dictum dictum urna. Donec in porttitor augue, vel laoreet justo. Cras auctor erat dictum ante convallis, sit amet venenatis erat dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                        <p>Donec fringilla ultrices est et ultricies. Suspendisse potenti. Etiam at faucibus justo. Phasellus porta interdum aliquam. Donec arcu libero, scelerisque eu fringilla vitae, dignissim vel neque. Integer sed ex vel eros pulvinar tincidunt. Phasellus pharetra, urna in egestas pellentesque, ligula turpis lacinia mauris, vel bibendum arcu nulla id enim. Nunc placerat bibendum erat, eu semper lacus rhoncus eget. Nulla ut sapien in est placerat commodo ut vitae augue.</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>
            

(function ($){
    $('.slyder-nav').slyder();
})(jQuery);

Options

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
wrapper string 'slyder-wrapper' CSS class applied to wrapper