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

GoodPopup
  • jQuery
  • August 16, 2018

【jQuery】レスポンシブ対応のjQueryポップアッププラグインGoodPopup
  • WordPress
  • August 15, 2018

【WordPress】シンプルなライトボックスギャラリープラグインSimple Gallery Lightbox Gallery
  • WordPress
  • August 14, 2018

【WordPress】ライトボックスのポップアップを表示するWP Modal Popup with Cookie Integration
vMenu
  • jQuery
  • August 13, 2018

【jQuery】モバイルフレンドリーなドロップダウンスタイルのjQueryメニュープラグインvMenu
Color Stream
  • CSS
  • August 12, 2018

【CSS】CSSグラデーションバックグラウンドジェネレーターColor Stream