jQuery
【jQuery】オフキャンバスナビゲーションシステムFlyout
February 22, 2017

FlyoutはSassとjQueryで構築されたクロスブラウザの左右のオフキャンバスナビゲーションシステム。軽量で主にCSSベースで、可能な限りほとんどJavaScriptを使用しません。
<nav class="main-nav split"> <a href="#left-nav" class="btn split__left js-flyout-link" data-flyout-side="left">Toggle left</a> <a href="#right-nav" class="btn js-flyout-link" data-flyout-side="right">Toggle right</a> </nav>
<div id="left-nav" class="flyout flyout--left"> <h3>Left Nav</h3> <a href="#left-nav" class="btn btn--expand js-flyout-link" data-flyout-expand="true">Toggle expand</a></p> <ul class="nav"> <li class="nav__item"><a href="#">item1</a></li> <li class="nav__item"><a href="#">item2</a></li> <li class="nav__item"><a href="#">item3</a></li> <li class="nav__item"><a href="#">item4</a></li> <li class="nav__item"><a href="#">item5</a></li> <li class="nav__item"><a href="#">item6</a></li> <li class="nav__item"><a href="#">item7</a></li> <li class="nav__item"><a href="#">item8</a></li> </ul> <h4>Keep toggling!</h4> <img src="http://24.media.tumblr.com/03bb15878227ee7138cd693084944b75/tumblr_mn9ikdCpdY1r2kb4qo1_400.gif" alt="hypnotoad"> </div>