解説
メガメニューの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 & 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 };