FlyoutはSassとjQueryで構築されたクロスブラウザの左右のオフキャンバスナビゲーションシステム。軽量で主にCSSベースで、可能な限りほとんどJavaScriptを使用しません。

1. Modernizr
2. jQuery

<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>

• Tag
• jQuery
• Navigation