使用按鈕下拉展開方式製作最愛連結 @ 狗貓的家！Xuite名稱的由來＆使用秘笈

2006-01-25 19:07 使用按鈕下拉展開方式製作最愛連結

之前寫過一篇http://blog.xuite.net/jeanson61/xuite/4833042，談有關利用文字編輯做成最愛連結的Side Bar自由欄位，個人覺得這應該是比較多人都會使用的方式。但是後來有Ocean問有關利用『另外想請問狗貓大大，像現在這樣連結可能變成一長串，那如果要將它變成像開關式的樹狀選單，也就是只顯示類別，按一下之後會出現該類別的所有連結...這...又該怎麼做呢？』真要弄都是做得到，但是這部份要用到Java語法，很怕有些瀏覽器看起來會怪怪的，甚至於不支援！不過既然有人問，還是也來寫一寫這些相關的語法！

我說相關的語法表示其實有非常多種可以做到的方式，今天先講一種，下次再來做另外一種像檔案管理那種樹枝狀的語法！

首先先看一下結果會長得什麼樣子↓

就是上圖所示，有分類標籤(標題)，然後點選展開後，才會顯示分類裡面的所有細項連結！

這個範例語法是↓

<style>

<!--

a:link { text-decoration: none ; } /* 未連結過-連結不加底線 */

a:visited { text-decoration: none ; } /* 連結過-連結不加底線 */

a:active { text-decoration: none ; } /* 按下連結-連結不加底線 */

a:link { color: #525050 ; } /* 未連結過的顏色 */

a:visited { color: #880000 ; } /* 連結過的顏色 */

.mm {font-size:10pt;}/* 母目錄標題類別-字型大小 */

.nn {font-size:9pt;} /* 子目錄最愛連結-字型大小 */

.sec{overflow:hidden;

background:#eeeeee; /* 子目錄-底色 */

}

-->

</style>

function menuShow(obj,maxh,obj2)

{

if(obj.style.pixelHeight<maxh)

{

obj.style.pixelHeight+=9;

obj.filters.alpha.opacity+=5;

obj2.background="http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/8.gif";

if(obj.style.pixelHeight==18)

obj.style.display='block';

myObj=obj;

myMaxh=maxh;

myObj2=obj2;

setTimeout('menuShow(myObj,myMaxh,myObj2)','5');

}

function menuHide(obj,maxh,obj2)

{

if(obj.style.pixelHeight>0)

{

if(obj.style.pixelHeight==9)

obj.style.display='none';

obj.style.pixelHeight-=9;

obj.filters.alpha.opacity-=5;

obj2.background="http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/7.gif";

myObj=obj;

myMaxh=maxh;

myObj2=obj2;

setTimeout('menuHide(myObj,myMaxh,myObj2)','5');

}

else

if(whichContinue)

whichContinue.click();

}

function menuChange(obj,maxh,obj2)

{

if(obj.style.pixelHeight)

{

menuHide(obj,maxh,obj2);

whichOpen='';

whichContinue='';

}

else

if(whichOpen)

{

whichContinue=obj2;

whichOpen.click();

}

else

{

menuShow(obj,maxh,obj2);

whichOpen=obj2;

whichContinue='';

}

</script>

var whichOpen=menuTitle0;

var whichContinue='';

</script>

Xuite服務

</td>

</tr>

<tr>

<td>

<img src="http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4889523/10.gif" border="0" /><a title="活動企畫天使喔" href="http://blog.xuite.net/event/angel" target="_blank">Xuite活動小天使</a>

</td></tr>

<a title="Xuite全站台的台長大人" href="http://blog.xuite.net/xuite/daily" target="_blank">Xuite台長日誌</a>

</td></tr>

<a title="有Mail bug有問題找他就對了" href="http://blog.xuite.net/mail/bug" target="_blank">Xuite郵件日誌</a>

</td></tr>

<a title="負責管理Blog的站長" href="http://blog.xuite.net/blog/baby" target="_blank">Xuite日誌站長</a>

</td></tr>

<a title="負責Photo的開發" href="http://blog.xuite.net/photo/developer" target="_blank">Xuite相簿版主</a>

</td></tr>

<a title="負責WebHD的開發啦" href="http://blog.xuite.net/webhd/journal" target="_blank">Xuite硬碟版主</a>

</td></tr>

<a title="負責My Xuite開發ㄡ" href="http://blog.xuite.net/myxuite/develop" target="_blank">Xuite的MyXuite版主</a>

</td></tr>

</table>

</div>

</td>

</tr>

</table>

其他推薦Blog日誌

</td>

</tr>

<tr>

<td>

<a title="不錯的旅遊記錄與生活雜記" href="http://blog.xuite.net/prudencechn/aboutme" target="_blank">AboutMe的旅遊日誌</a>

</td></tr>

</td></tr>

</td></tr>

</td></tr>

</table>

</div>

</td>

</tr>

</table>

上面的藍色文字是可以針對想要用的人自行做一些修改的部份！！

首先的這兩張圖是↓
obj2.background=http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/8.gif;
(寬x高為196x23)
obj2.background="http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/7.gif";
(寬x高為196x23)
用來做為標題的背景圖片，一個是縮小按鈕圖，一個是展開按鈕圖。你可以自行更改為自己喜歡的圖片。

接著是
<td height="23" background="http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/7.gif" id="menuTitle1" onclick="menuChange(menu1,18*8,menuTitle1);">
Xuite服務
</td>
這一段是第一標題部份的的設定，menu1, menuTitle1；第二標題部份請隨著調整為menu2, menuTitle2，然後依序為menu3, menuTitle3，menu4, menuTitle4，以此類推。然後Xuite服務是標題顯示的內容，看你這個連結分類要取什麼名字。就是下圖中的Xuite服務那個標題的位置↓

另外還是的是onclick="menuChange(menu1,18*8,menuTitle1);"裡面的18*8，這個8的意義在於展開後的項目有幾個連結，像這裡的範例是8個。

後面的
<tr><td>
<img src="http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4889523/10.gif" border="0" /><a title="活動企畫天使喔" href="http://blog.xuite.net/event/angel" target="_blank">Xuite活動小天使</a>
</td></tr>
其實是↓
<tr><td>
<a href="連結網址URL" target="_blank">最愛連結名稱</a>
</td></tr>
就是填入網址URL，以及你要顯示的最愛連結名稱。
或是弄複雜一點變成↓
<tr><td>
<a title="輔助說明" href="連結網址URL" target="_blank">最愛連結名稱</a>
</td></tr>
會多一個滑鼠移動過去時顯示輔助說明。
再再複雜一點，加個圖片↓
<tr><td>
<img src="圖片網址URL" /><a title="輔助說明" href="連結網址URL" target="_blank">最愛連結名稱</a>
</td></tr>

至於要多幾個標題區塊就多複製幾段↓

最愛連結分類標題三

</td>

</tr>

<tr>

<td>