JQueryプルダウンメニュープラグインSuperfish作成詳細(プレゼンテーション付き)

JQueryプルダウンメニュープラグインSuperfish作成詳細(プレゼンテーション付き) 
 
 
SuperfishはJqueryプラグインで、複雑なマルチドロップメニューを簡単に作ることができます.Superfishも非常に一般的です.Superfishを使って様々なメニュー効果を実現することができます.鷺設計室は強く勧めています.当設計室のブログナビゲーションメニューはSuperfishで実現します.
ダウンロード住所:http://plugins.jquery.com/project/Superfish
文書説明:http://users.tpg.com.au/j_birrch/plugins/superfish/菗getting-started
デモンストレーションアドレス:http://www.chhua.com/yanshi/superfish.htm
Superfishのいくつかの特徴と効果:

純Cssを使用して動的効果を実現し、ブラウザを跨ぎ、最悪のブラウザIE 6

をサポートする.

は、ドロップダウンメニューを設定してマウスが離れると自動的に時間を隠すことができます.デフォルトは800ミリ秒

です.

サポートフェードアウト動画

はキーボード応答

をサポートしています.

サブメニューを含むマスターメニューに自動的にヒントを追加する

.

は影の効果を支持しますが、良いブラウザのサポートが必要です.例えば、Firefox、chrome…最悪のブラウザIE 6は

を免除します.

オプションのコールバックjs関数

使用説明
SuperfishはJqueryプラグインで、複雑なマルチドロップメニューを簡単に作ることができます.Superfishも非常に一般的です.Superfishを使って様々なメニュー効果を実現することができます.鷺設計室は強く勧めています.当設計室のブログナビゲーションメニューはSuperfishで実現します. 
ダウンロード住所:http://plugins.jquery.com/project/Superfish
文書説明:http://users.tpg.com.au/j_birrch/plugins/superfish/菗getting-started
Superfishのいくつかの特徴と効果:

純Cssを使用して動的効果を実現し、ブラウザを跨ぎ、最悪のブラウザIE 6

をサポートする.

は、ドロップダウンメニューを設定してマウスが離れると自動的に時間を隠すことができます.デフォルトは800ミリ秒

です.

サポートフェードアウト動画

はキーボード応答

をサポートしています.

サブメニューを含むマスターメニューに自動的にヒントを追加する

.

は影の効果を支持しますが、良いブラウザのサポートが必要です.例えば、Firefox、chrome…最悪のブラウザIE 6は

を免除します.

オプションのコールバックjs関数

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

1
2

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

2、2.その次に、ul liでメニューの内容を作ります.

1
2
3
4
5
6
7
8
9
10
11

<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、最後に初期化メニューを作成し、効果を設定します.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

   $(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(){}   //           
    });
 });

自由転載、転載は明記してください.WEB開発ノート wwww.chhhua.comから転載します.