jQuery

【jQuery】ハンバーガーメニューアニメーションHamburger Menu

February 9, 2017
hamburger menu

Hamburger Menuはハンバーガーメニューアニメーションプラグイン。

	<header>
		<nav class=menu>
			<div class="nav-button">
				<div id="nav-icon">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			<nav class="menu-head">
				<ul class="menu-head-inner">
					<a href="#" class="menu-head-link">
						<li>LOGO</li>
					</a>
				</ul>
			</nav>
			<nav class="menu-body">
				<ul class="menu-body-inner">
					<div class="parent1">
						<div class="parent2 first-menu" id="parent2-1">
							<a href="#" class="menu-body-link" id="highlight">
								<li>MENU1</li>
							</a>
						</div>
					</div>
					<div class="parent1">
						<div class="parent2" id="parent2-2">
							<a href="#" class="menu-body-link" id="highlight">
								<li>MENU2</li>
							</a>
						</div>
					</div>
					<div class="parent1">
						<div class="parent2" id="parent2-3">
							<a href="#" class="menu-body-link" id="highlight">
								<li>MENU3</li>
							</a>
						</div>
					</div>
					<div class="parent1">
						<div class="parent2" id="parent2-4">
							<a href="#" class="menu-body-link" id="highlight">
								<li>MENU4</li>
							</a>
						</div>
					</div>
					<div class="parent1">
						<div class="parent2 last-menu" id="parent2-5">
							<a href="#" class="menu-body-link" id="highlight">
								<li>MENU5</li>
							</a>
						</div>
					</div>
				</ul>
			</nav>
		</nav>
	</header>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="script.js"></script>