jQuery

【jQuery】レスポンシブオフキャンバスナビゲーションメニューPushy

February 6, 2017

PushyはCSS transformsとtransitionsを使用したレスポンシブ対応のオフキャンバスナビゲーションメニュー。

jQueryは1.9以上が必要。

HTML

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <ul>
        <!-- Submenu -->
        <li class="pushy-submenu">
            <a href="#">Submenu</a>
            <ul>
                <li class="pushy-link"><a href="#">Item 1</a></li>
                <li class="pushy-link"><a href="#">Item 2</a></li>
                <li class="pushy-link"><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li class="pushy-link"><a href="#">Item 1</a></li>
        <li class="pushy-link"><a href="#">Item 2</a></li>
    </ul>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
    <!-- Menu Button -->
    <div class="menu-btn">&#9776; Menu</div>
</div>