jQuery
【jQuery】レスポンシブ対応のモバイルファーストナビゲーションMobile first menu
April 16, 2017

Mobile first menuはレスポンシブ対応で772px以上の時はスクロールダウンするとヘッダーメニューがスライドして上にいき、スクロールアップするとメニューが下にスライドして表示されます。772px以下の時はメニューアイコンが表示されます。
<!-- /Menu--> <div id="header-nav"> <div class="container"> <!-- H1 for SEO --> <div class="brand"> <a href="/"><h1>Ghostlab</h1></a> </div> <!-- Small screen menu button --> <a href="#menu" class="menu-link"> <span class="bar1"></span> <span class="bar2"></span> <span class="bar3"></span> </a> <!-- /Small screen menu button --> <!-- Menu Items --> <nav id="menu" role="navigation"> <ul> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!-- /Menu Items --> </div> </div> <!-- /Menu -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script> <script src="js/modernizr.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js'></script> <script src="js/index.js"></script>
MIT