SuperFish一款基於jQuery的級聯下拉菜單

Superfish的簡介:Superfish是Suckerfish菜單樣式的加強版。兩者都是基於jQuery,結合現有純CSS級聯下拉菜單,還增加了以下這些網站管理員急需的功能。

1.Superfish樣式在IE 6支持懸停(hover屬性),增加的默認類爲”sfHover”,你也可以改變類名。

2.鼠標移動的延時功能。爲了更方便解決鼠標存在問題的朋友,默認延時爲800毫秒,你也可以更改延時時間。

3.子菜單以動畫顯示。顯示是是淡入淡出效果。淡入淡出的效果(如速度)也是可以自己設定的。默認爲正常(normal)

4.菜單和子菜單可設定爲顯示或不顯示。

5.支持hoverIntent插件,Superfish自動查看是否含有hoverIntent插件,在有hoverIntent插件的情況下執 行hoverIntent而忽視淡入淡出效果。如果基於某種原因在你使用superfish時不想使用hoverIntent,將disableHI設置 爲“ true”。

6.顯示是否含有子菜單,可動過菜單添加一張小圖片,你也可用通過改變“autoArrows”值來設定是否自動彈出子菜單。

7.陰影效果,僅支持最新瀏覽器。在IE6下沒什麼效果。

8.可突出顯示當前所在頁

Superfish的用法

1.製作一個純CSS目錄

2.將下面內容添加到你的網站

//link to the CSS files for this menu type
<link rel=”stylesheet” type=”text/css” media=”screen” href=”superfish.css” />
 
// link to the JavaScript files (hoverIntent is optional)
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js“></script>
<script type=”text/javascript” src=”hoverIntent.js”></script>
<script type=”text/javascript” src=”superfish.js”></script>
 
// initialise Superfish
<script type=”text/javascript”>
 
    $(document).ready(function() {
        $(‘ul.sf-menu’).superfish({
            delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:’show’,height:’show’},  // fade-in and slide-down animation
            speed:       ‘fast’,                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: false                            // disable drop shadows
        });
    });
 
</script>

官方網址:http://users.tpg.com.au/j_birch/plugins/superfish/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章