jQuery

【jQuery】HTML・CSS・jQueryを使ってハンバーガーアイコンをアニメーション化。Animated hamburger icon

September 24, 2016
animated-hamburger-icon

Animated hamburger iconはHTML、CSS、jQueryを使ってハンバーガーのアイコンをアニメーション化。

HTML

  	<header>
  		<div class="navbar">
  			<h1>Hamburger Icon</h1>
     			<div class="menu-btn float-right">
 					<span class="lvl-1"></span>
 					<span class="lvl-2"></span>
 					<span class="lvl-3"></span>
     			</div> 
     	</div>
		<nav>
			<ul class="navbar-list">
				<a href="menu.html"><li>Menu</li></a>
				<a href="order-online.html"><li>Order Online</li></a>
				<a href=""><li>Locate Us</li></a>
			</ul>
		</nav>     	 	
  	</header>

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/script.js"></script>