jQueryメニュープラグインsuperfish使い方ガイド_jquery

ダウンロードアドレス: http://plugins.jquery.com/project/Superfish

ドキュメントの説明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Superfish のいくつかの機能と効果:

純粋な CSS を使用して動的な効果を実現し、クロスブラウザーで、最悪のブラウザー IE6 をサポートします
マウスを離したときにドロップダウン メニューが自動的に非表示になるように設定できます。デフォルトは 800 ミリ秒です
フェードインおよびフェードアウト アニメーションをサポート
キーボード応答をサポート
サブメニューを含む親メニューにプロンプ​​ト矢印を自動的に追加します
シャドウ効果をサポートしますが、Firefox、Chrome などの優れたブラウザのサポートが必要です...最悪のブラウザ IE6 は免除されます
オプションのコールバック js 関数

使用説明書

1. 1. まず、Jquery と Superfish ファイルをページに導入します

<script src="Jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="superfish.js" type="text/javascript"><!--mce:1--></script>

2. 2. 次に、ul li を使用してメニューのコンテンツを作成します

<ul class="sf-menu">
 <li><a href="#aa">menu item that is quite long</a></li>
 <li class="current">
    <a href="#ab">menu item →</a>
<ul>
 <li class="current"><a href="#">menu item</a></li>
 <li><a href="#aba">menu item</a></li>
 <li><a href="#abb">menu item</a></li>
</ul>
</li>
</ul>

3. 最後に、初期化メニューを作成し、エフェクトを設定します

$(document).ready(function(){
 $("ul.sf-menu").superfish({
   hoverClass:  'sfHover', //当鼠标掠过时的class
   pathClass:   'overideThisToUse', // 激活的菜单项的class
   pathLevels:  1,    // 菜单级数
   delay:     800,    // 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
   animation:   {opacity:'show'}, // 动画效果，参考Jquery的动画jQuery's .animate()
   speed:     'normal',  // 动画速度， 参考Jquery的动画jQuery's .animate()
   dropShadows:  true,   // 阴影效果，关闭用‘false'
   onInit:    function(){},  // 初始化的回调函数
   onBeforeShow: function(){}, // 子菜单显示前回调函数
   onShow:    function(){}, // 子菜单显示时回调函数
   onHide:    function(){}  // 子菜单隐藏时回调函数
 });
});

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。