jQuery

【jQuery】クリック可能なレスポンシブメガメニューResponsive Mega Menu

February 1, 2017
Responsive Mega Menu

Responsive Mega Menuはクリック可能なレスポンシブメガメニュー。

HTML

<a class="skip-to-content" href="maincontent">Skip to main content</a>
	<span class="jsHamburger">
    	<i class="fa fa-bars"></i>
    </span>

	<nav class="main-nav">

                        
	<ul>
		<li class="primary-nav-item"><a href="">Primary Nav Item 1</a>
			<ul class="submenu">
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 1</a>
					<ul>
						<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 1</a></li>
						<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 2</a></li>
						<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 3</a></li>
						<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 4</a></li>
						<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 5</a></li>
					</ul>
				</li>
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 2</a></li>
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 3</a>
				<ul>
					<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 1</a></li>
					<li class="tertiary-nav-item"><a href="">Tertiary Nav Item 2</a></li>
				</ul>
				</li>
			</ul>
			</li>
			<li class="primary-nav-item"><a href="">Primary Nav Item 2</a>
			<ul class="submenu">
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 1</a></li>
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 2</a></li>
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 3</a></li>
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 4</a></li>
				<li class="secondary-nav-item"><a href="">Secondary Nav Item 5</a></li>
			</ul>
			</li>
			<li class="primary-nav-item"><a href="" >Primary Nav Item 3</a></li>
			<li class="primary-nav-item"><a href="" >Primary Nav Item 4</a></li>
			<li class="primary-nav-item"><a href="" >Primary Nav Item 5</a></li>
		</ul>
    </nav>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="megaMenu.js"></script>