jQuery

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

April 16, 2017

Mobile first menuはレスポンシブ対応で772px以上の時はスクロールダウンするとヘッダーメニューがスライドして上にいき、スクロールアップするとメニューが下にスライドして表示されます。772px以下の時はメニューアイコンが表示されます。

HTML

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

JS

  <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

Download