jQuery

【jQuery】レスポンシブスライダーナビゲーションSlyder

September 28, 2016
slyder

SlyderはレスポンシブスライダーナビゲーションjQueryプラグイン。

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',
    wrapper: 'slyder-wrapper'
});

MITライセンス