jQuery

【jQuery】レスポンシブマルチレベルメガメニューを実装FDX Menu

December 29, 2017
fdx-menu

FDX Menuはレスポンシブマルチレベルメガメニューを実装できます。

HTML

<link rel="stylesheet" type="text/css" href="fdx-menu.css">
    <nav class="fdx-menu">
	<div class="fdx-menu-in">

		<ul class="fdx-menu-1-level">
			<li><a href="#">Item</a></li>
			<li><a href="#">Multilevel</a>
				<ul class="fdx-menu-2-level">
					<li><a href="#">Product 1</a>
						<ul class="fdx-menu-3-level">
							<li><a href="#">Product 1 A</a></li>
							<li><a href="#">Product 1 B</a></li>
							<li><a href="#">Product 1 C</a></li>
						</ul>
					</li>
					<li><a href="#">Product 2</a>
						<ul class="fdx-menu-3-level">
							<li><a href="#">Product 2 A</a></li>
							<li><a href="#">Product 2 B</a></li>
							<li><a href="#">Product 2 C</a></li>
						</ul>
					</li>
					<li><a href="#">Product 3</a>
						<ul class="fdx-menu-3-level">
							<li><a href="#">Product 3 A</a></li>
							<li><a href="#">Product 3 B</a></li>
							<li><a href="#">Product 3 C</a></li>
						</ul>
					</li>			
				</ul>
			</li>
			<li class="fdx-menu-mega"><a href="#">Megamenu</a>
				<div class="fdx-menu-mega-container">
					<div class="fdx-menu-in">
						
						<div class="fdx-menu-mega-column">
							<h3><a href="#">Product 1</a></h3>
							<ul>
								<li><a href="#">Product 1 A</a></li>
								<li><a href="#">Product 1 B</a></li>
								<li><a href="#">Product 1 C</a></li>
							</ul>
						</div>

						<div class="fdx-menu-mega-column">
							<h3><a href="#">Product 2</a></h3>
							<ul>
								<li><a href="#">Product 2 A</a></li>
								<li><a href="#">Product 2 B</a></li>
								<li><a href="#">Product 2 C</a></li>
							</ul>
						</div>	

						<div class="fdx-menu-mega-column">
							<h3><a href="#">Product 3</a></h3>
							<ul>
								<li><a href="#">Product 3 A</a></li>
								<li><a href="#">Product 3 B</a></li>
								<li><a href="#">Product 3 C</a></li>
							</ul>
						</div>		

						<div class="fdx-menu-mega-column">
							<h3><a href="#">Product 4</a></h3>
							<ul>
								<li><a href="#">Product 4 A</a></li>
								<li><a href="#">Product 4 B</a></li>
								<li><a href="#">Product 4 C</a></li>
							</ul>
						</div>

					</div>
				</div>
			</li>
			<li class="fdx-menu-mega"><a href="#">Banner</a>
				<div class="fdx-menu-mega-container">
					<div class="fdx-menu-in">
						
						<div class="fdx-menu-mega-column">
							<h3><a href="#">Product 1</a></h3>
							<ul>
								<li><a href="#">Product 1 A</a></li>
								<li><a href="#">Product 1 B</a></li>
								<li><a href="#">Product 1 C</a></li>
							</ul>
						</div>

						<div class="fdx-menu-mega-column">
							<h3><a href="#">Product 2</a></h3>
							<ul>
								<li><a href="#">Product 2 A</a></li>
								<li><a href="#">Product 2 B</a></li>
								<li><a href="#">Product 2 C</a></li>
							</ul>
						</div>	

						<div class="fdx-menu-mega-column-banner">
							<a href="">
								<img src="https://rukminim1.flixcart.com/flap/960/960/image/eed87c.jpg?q=75" alt="Banner">
							</a>
						</div>	

					</div>
				</div>
			</li>
		</ul>
		
	</div>		
</nav>
<!-- // MENU -->

<span class="fdx-menu-btn"></span>

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

Download