Tad 教材網 - 線上書籍

:::

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

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9901/02.zip)

### 一、Superfish 下拉選單（[http://users.tpg.com.au/j\_birch/plugins/superfish](http://users.tpg.com.au/j_birch/plugins/superfish)）

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

<span style="color: rgb(51, 102, 255);"><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></span>

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

### ![](http://tad0616.net/uploads/tad_book3/image/pic_s.png)  
 三、直式選單

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>

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

<span style="color: rgb(51, 102, 255);">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;  
 }</span>

:::