jQuery

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

February 6, 2017
pushy

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>

Desktop

ブラウザの互換性

  1. IE 9-11
  2. MS Edge
  3. Chrome
  4. Firefox
  5. Safari (Mac)

Mobile

  1. Chrome (Android 4.x)
  2. Safari (iOS 8)

MIT