線上書籍

Home

[991]PHP網站開發 進階應用技巧2

一、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;
}