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

PushyはCSS transformsとtransitionsを使用したレスポンシブ対応のオフキャンバスナビゲーションメニュー。
jQueryは1.9以上が必要。
<!-- 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">☰ Menu</div> </div>
ブラウザの互換性
MIT