jQuery

【jQuery】メガメニューjQueryプラグイン。MegaMenu

September 26, 2016
Megamenu

MegaMenu jQueryプラグイン

HTML

<div class="wrapper">
		<nav>
			<ul class="megamenu">
				<li>
					<a href="#">No menu</a>
				</li>
				<li data-hover="mega">
					<a href="#">Two column</a>
					<div class="mega">
						<div class="inner">
							<ul class="level-2 picture-based two-columns">
								<li>
									<a href="#">
										<span class="mm-icon-10"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-11"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-12"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-13"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-14"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-9"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
							</ul>
							<ul class="level-2 link-based two-columns">
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
							</ul>
							<ul class="level-2 list-based two-columns">
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
							</ul>
						</div>	
					</div>
				</li>
				<li data-hover="mega">
					<a href="#">Three Column</a>
					<div class="mega">
						<div class="inner">
							<ul class="level-2 picture-based three-columns">
								<li>
									<a href="#">
										<span class="mm-icon-10"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-11"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-12"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-13"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-14"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-9"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
							</ul>
							<ul class="level-2 link-based three-columns">
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
							</ul>
							<ul class="level-2 list-based three-columns">
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
							</ul>
						</div>	
					</div>
				</li>
				<li data-hover="mega">
					<a href="#">Four Column</a>
					<div class="mega">
						<div class="inner">
							<ul class="level-2 picture-based four-columns">
								<li>
									<a href="#">
										<span class="mm-icon-10"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-11"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit </p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-12"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-13"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-14"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-9"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-8"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<span class="mm-icon-7"></span>
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit</p>
									</a>	
								</li>
							</ul>
							<ul class="level-2 link-based four-columns">
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
										<p>lorem ipsum dolor sit emit, lorem ipsum dolor sit emit</p>
									</a>	
								</li>
							</ul>
							<ul class="level-2 list-based four-columns">
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
								<li>
									<a href="#">
										<strong>--------</strong>
									</a>	
								</li>
							</ul>
						</div>	
					</div>
				</li>
			</ul>	
		</nav>


	
	</div>

Demo/Download

Latest Blog

  • WordPress
  • December 30, 2018

覚えておくと便利なテンプレートパーツ
Starry
  • jQuery
  • December 29, 2018

【jQuery】Ajaxに基づく星評価システムStarry
jQuery-Stickem
  • jQuery
  • December 28, 2018

【jQuery】スクロールするときに項目を固定するjQuery Stickem
fakeLoader.js
  • jQuery
  • December 27, 2018

【jQuery】フルスクリーンで軽量のページプリローダープラグインfakeLoader
  • jQuery
  • December 26, 2018

【jQuery】軽量のプッシュメニュープラグインSecretNav