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

jquery.touchSlider
  • jQuery
  • October 18, 2018

【jQuery】タッチスライダーを作成するプラグインtouchSlider
NavScroll
  • jQuery
  • October 18, 2018

【jQuery】ページの一部にアニメーションスクロールするためのjQueryプラグインNavScroll
Calendar by WD – Responsive Event Calendar
  • WordPress
  • October 18, 2018

【WordPress】ウェブサイトにカレンダーを追加することができるプラグインCalendar by WD
Boishakh carousel
  • jQuery
  • October 17, 2018

【jQuery】jQueryを使った画像カルーセルを作成するためのプラグインBoishakh carousel
jquery-on-scrolled-to
  • jQuery
  • October 16, 2018

【jQuery】要素がビューポート内の特定の部分に移動したときにアクションを実行するjQuery on-scrolled-to