jQuery
【jQuery】メガメニューjQueryプラグイン。MegaMenu
September 26, 2016

MegaMenu jQueryプラグイン
<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