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

WPB Advanced FAQ
  • WordPress
  • December 14, 2018

【WordPress】WordPressサイトにFAQシステムを追加するWPB Advanced FAQ
ScrollStory
  • jQuery
  • December 13, 2018

【jQuery】スクロールベースのストーリーを構築するためのjQueryプラグインScrollStory
jQuery Sticker
  • jQuery
  • December 12, 2018

【jQuery】ユーザーがページをスクロールダウンするとページの上部に要素を固定させるjQuery Sticker
Parallax Image
  • WordPress
  • December 11, 2018

【WordPress】シンプルなパララックスプラグインParallax Image
Simple Modal
  • jQuery
  • December 10, 2018

【jQuery】軽量、シンプル、カスタマイズ可能なモーダルプラグインSimple Modal