2. Superfish下拉選單

一、Superfish 下拉選單（http://users.tpg.com.au/j_birch/plugins/superfish）

支援IE6，有延遲出現功能，無限子選項，有淡出淡入特效，支援Tab鍵，可透過hoverIntent 外掛來設定滑鼠敏感度，可自訂是否要出現箭頭，具陰影功能，有導覽模式（雙層選單）。

<link rel="stylesheet" type="text/css" href="superfish-1.4.8/css/superfish.css" media="screen">
<script type="text/javascript" src="superfish-1.4.8/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="superfish-1.4.8/js/superfish.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

二、第一層選單結構（<li><a href="網址">項目</a>{下層選單}</li>）

三、直式選單

1.加入：<link rel="stylesheet" type="text/css" media="screen" href="superfish-1.4.8/css/superfish-vertical.css" />
2.改為：$('ul.sf-menu sf-vertical').superfish();

四、子項目彈性寬度設定

1.加入：<script type="text/javascript" src="superfish-1.4.8/js/ supersubs.js"></script>
2.改為：$('ul.sf-menu').supersubs({minWidth: 8, maxWidth: 27, extraWidth: 1}).superfish();

五、導覽模式（不可和supersubs合用）

1.加入：<link rel="stylesheet" type="text/css" media="screen" href="superfish-1.4.8/css/superfish-navbar.css" />
2.改為：$('ul.sf-menu').superfish({pathClass:  'current'});
3.在要預設秀出的選項中加入 class="current"，例如：<li class="current">XXX</li>

六、遞迴函數（用來取得所有階層項目）

function mk_menu($ofsn="0"){
    $sql="select sn,title,url from menu where ofsn='$ofsn'";
    $result=mysql_query($sql);
    $opt="";
    while(list($sn,$title,$url)=mysql_fetch_row($result)){
        $sub=mk_menu($sn);
        $opt.="<li><a href='$url'>$title</a>{$sub}</li>";
    }
    if(empty($opt)){
        $data="";
    }else{
        $class=(empty($ofsn))?"class='sf-menu'":"";
        $data="<ul $class>$opt</ul>";
    }
    return $data;
}