【jQuery】HTML・CSS・jQueryを使ってハンバーガーアイコンをアニメーション化。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>
 
animated-hamburger-icon

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

  • LATEST
  • RELATED
  • POPULAR