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