jQuery

【jQuery】カスタマイズ可能なマルチレベルスタックナビゲーションメニューjQuery mlStackNav

May 12, 2018
jQuery mlStackNav

jQuery mlStackNavはレスポンシブ対応、カスタマイズ可能で、アクセスしやすく、使いやすいマルチレベルスタックナビゲーションメニュー。

Usage example

Navigation toggle button

<button type="button" class="ml-stack-nav-toggle">
    <span class="ml-stack-nav-toggle__line"></span>
    <span class="ml-stack-nav-toggle__line"></span>
    <span class="ml-stack-nav-toggle__line"></span>
</button>

Multi-level navigation menu

<nav class="ml-stack-nav js-ml-stack-nav">
    <ul class="ml-stack-nav__menu">
        <li class="ml-stack-nav__item">
            <div class="ml-stack-nav__item-inner">
                <a href="" class="ml-stack-nav__link">
                    Item 1
                </a>
                <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">→</button>
            </div>

            <ul class="ml-stack-nav__menu">
                <li class="ml-stack-nav__item">
                    <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">← Back</button>
                </li>
                <li class="ml-stack-nav__item">
                    <div class="ml-stack-nav__item-inner">
                        <a href="" class="ml-stack-nav__link">
                            Item 1 level 2
                        </a>
                        <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">→</button>
                    </div>

                    <ul class="ml-stack-nav__menu">
                        <li class="ml-stack-nav__item">
                            <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">← Back</button>
                        </li>
                        <li class="ml-stack-nav__item">
                            <a href="" class="ml-stack-nav__link">
                                Item 1 level 3
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="ml-stack-nav__item">
                    <a href="" class="ml-stack-nav__link">
                        Item 2
                    </a>
                </li>
            </ul>
        </li>
        <li class="ml-stack-nav__item">
            <a href="" class="ml-stack-nav__link">
                Item 2
            </a>
        </li>
    </ul>
</nav>

Plugin initialization

<script>
    $(".js-ml-stack-nav").mlStackNav();
</script>

MIT