ECサイトで役立つ!メガメニュー(MEGA MENU)jQueryプラグインの紹介

解説

メガメニューのjQueryプラグインのご紹介です。 ECサイトでたくさんのメニューを見せたいときに便利です。 マウスオンで表示する、クリックで表示するなど2タイプを指定できます。 フェードかスライドか、表示スピードもオプションで指定できます。 プラグインの配布サイト「 jQuery Mega Drop Down Menu Plugin」のページから、 DOWNLOADをクリックしてファイル一式をダウンロードしてください。

デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

HTML

上記のサンプルにした場合のHTMLソースです。

<div class="wrap">
  <!--メガメニューサンプル-->
  <div class="demo-container">
    <div class="blue">
      <ul id="mega-menu" class="mega-menu">
        <li>
          <a href="test.html">Home</a>
        </li>
        <li>
          <a href="test.html">Products</a>
          <ul>
            <li>
              <a href="#">Mobile Phones &#038; Accessories</a>
              <ul>
                <li>
                  <a href="#">Product 1</a>
                </li>
                <li>
                  <a href="#">Product 2</a>
                </li>
                <li>
                  <a href="#">Product 3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Desktop</a>
              <ul>
                <li>
                  <a href="#">Product 4</a>
                </li>
                <li>
                  <a href="#">Product 5</a>
                </li>
                <li>
                  <a href="#">Product 6</a>
                </li>
                <li>
                  <a href="#">Product 7</a>
                </li>
                <li>
                  <a href="#">Product 8</a>
                </li>
                <li>
                  <a href="#">Product 9</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Laptop</a>
              <ul>
                <li>
                  <a href="#">Product 10</a>
                </li>
                <li>
                  <a href="#">Product 11</a>
                </li>
                <li>
                  <a href="#">Product 12</a>
                </li>
                <li>
                  <a href="#">Product 13</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Accessories</a>
              <ul>
                <li>
                  <a href="#">Product 14</a>
                </li>
                <li>
                  <a href="#">Product 15</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Software</a>
              <ul>
                <li>
                  <a href="#">Product 16</a>
                </li>
                <li>
                  <a href="#">Product 17</a>
                </li>
                <li>
                  <a href="#">Product 18</a>
                </li>
                <li>
                  <a href="#">Product 19</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Sale</a>
          <ul>
            <li>
              <a href="#">Special Offers</a>
              <ul>
                <li>
                  <a href="#">Offer 1</a>
                </li>
                <li>
                  <a href="#">Offer 2</a>
                </li>
                <li>
                  <a href="#">Offer 3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Reduced Price</a>
              <ul>
                <li>
                  <a href="#">Offer 4</a>
                </li>
                <li>
                  <a href="#">Offer 5</a>
                </li>
                <li>
                  <a href="#">Offer 6</a>
                </li>
                <li>
                  <a href="#">Offer 7</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Clearance Items</a>
              <ul>
                <li>
                  <a href="#">Offer 9</a>
                </li>
              </ul>
            </li>
            <li class="menu-item-129">
              <a href="#">Ex-Stock</a>
              <ul>
                <li>
                  <a href="#">Offer 10</a>
                </li>
                <li>
                  <a href="#">Offer 11</a>
                </li>
                <li>
                  <a href="#">Offer 12</a>
                </li>
                <li>
                  <a href="#">Offer 13</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">About Us</a>
          <ul>
            <li>
              <a href="#">About Page 1</a>
            </li>
            <li>
              <a href="#">About Page 2</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Services</a>
          <ul>
            <li>
              <a href="#">Service 1</a>
              <ul>
                <li>
                  <a href="#">Service Detail A</a>
                </li>
                <li>
                  <a href="#">Service Detail B</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Service 2</a>
              <ul>
                <li>
                  <a href="#">Service Detail C</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Service 3</a>
              <ul>
                <li>
                  <a href="#">Service Detail D</a>
                </li>
                <li>
                  <a href="#">Service Detail E</a>
                </li>
                <li>
                  <a href="#">Service Detail F</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Service 4</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
  <!--/メガメニューサンプル-->
</div>

CSS

CSSは下記のファイルを読み込みます。 スキンの色によって読み込むCSSを変えます。

<link href="css/dcmegamenu.css" rel="stylesheet" type="text/css" />
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" />

jQuery

jsパラメーター指定です。 主には下記のパラメーターを指定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu').dcMegaMenu({
        rowItems: '5', // '数値で指定'
        speed: 'fast',//'fast'か'slow'
        effect: 'fade',//'fade'か'slide'
        event: 'click',//'click'か'hover'
        fullWidth: true //'true'か'false'trueで横幅100%表示
    });
});
</script>

オプション設定

その他、下記のオプション指定ができます。 詳しくは こちら

$.fn.dcMegaMenu = function(options){
    var defaults = {
        classParent: 'dc-mega',    // Allows you to change the class given to the parent li tags
        rowItems: 3,                  // Number of sub-menus in each row
        classParent: 'dc-mega',
    classContainer: 'sub-container',    // Allows you to change the class given to the mega sub-menu container
    classSubLink: 'mega-hdr', // Set class given to mega menu parent menu items
    rowItems: 3, // Number of sub-menus in each row
    speed: 'fast',  // Speed of drop down animation
        effect: 'fade',  // Type of drop down animation - 'slide' or 'fade'
        event: 'hover // Use either 'hover' or 'click'
        fullWidth: false,  // Set to true to always show sub-menus at 100%
    onLoad : function(){},  // Callback function when the menu initialises
        beforeOpen : function(){},  // Callback function prior to the mega sub-menu opening
    beforeClose: function(){}  // Callback function prior to the mega sub-menu closing
};

 

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です