【jQuery】メガメニューjQueryプラグイン。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>
 
Megamenu

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

  • LATEST
  • RELATED
  • POPULAR