16 號雪莉 ~**

關於部落格
* 16 號雪莉 ~**_FC2分店! * 繪文字01 02 * 素材使用規則*Guest Book * RSS *想品嚐自由發酵的味道... Best view 1024X768 IE
  • 1896

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

製作漂亮的下拉式選單!!

使用限制

-此語法來自網路上,因為好用而且美觀所以介紹給大家用,但是雪莉會的語法有限,只能幫大家解決一些小錯誤,各位請見諒.
-目前只在樂多做過測試,請體諒雪莉只用樂多空間,不要再問我別的部落可不可以用!拜託!因為每一間部落格自訂欄位的方式都不同~請自行設定測試...
-複製語法請自行修改,不要斷行,在<>與<>間也不要有留任何空白,樂多可在自由欄位選擇”不自動斷行”即可!

語法複製

<SCRIPT language="JavaScript">
function fmenu1(){
if( menu1.style.display == "none")
menu1.style.display = "block";
else
menu1.style.display = "none";}

function fmenu2(){
if( menu2.style.display == "none")
menu2.style.display = "block";
else
menu2.style.display = "none";}

function fmenu3(){
if( menu3.style.display == "none")
menu3.style.display = "block";
else
menu3.style.display = "none";}

</SCRIPT>

<DIV onmousedown="fmenu1()" style="cursor:hand;"><img src="xxxxxx.xxx" width="10" height="10">分類項目A(請改成自己的文字)</DIV>
<TABLE id=menu1 style="display:none" border="0">
<TR>
<TD>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目A-1(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目A-2(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目A-3(請改成自己的文字)</a><BR>
</TD>
</TR>
</TABLE>
<DIV onmousedown="fmenu2()" style="cursor:hand;"><img src="img src="xxxxxx.xxx" width="10" height="10">分類項目B(請改成自己的文字)</DIV>
<TABLE id=menu2 style="display:none" border="0">
<TR>
<TD>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目B-1(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目B-1(請改成自己的文字)</a><BR>
</TD>
</TR>
</TABLE>
<DIV onmousedown="fmenu3()" style="cursor:hand;"><img src="xxxxxx.xxx" width="10" height="10">分類項目B(請改成自己的文字)</DIV>
<TABLE id=menu3 style="display:none" border="0">
<TR>
<TD>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目C-1(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目C-2(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目C-3(請改成自己的文字)</a><BR>
</TD>
</TR>
</TABLE>


語法解析

雪莉建議大家先把上面框框裡語法複製到WORD或筆記本等軟體再一邊看這篇文章比較容易懂~ ^^,上面的語法雪莉已經幫你們做了好幾層的選單~所以語法看起來很長很難,其實只是2部分在重複而已,你們可以看完文章在修改或增減成你們需要的部分,複製完語法後我們來邊看文章邊對照吧!!

1-第一部分

function fmenu1(){
if( menu1.style.display == "none")
menu1.style.display = "block";
else
menu1.style.display = "none";}

這裡是第一個重點部份,主要是控制選單的開啟關閉,雪莉提供的只有3層項目選單,所以這部分複製了3遍,如果要繼續增加,就複製繼續貼在後面,但要記得要貼在<SCRIPT></SCRIPT>標籤之間喔!;反白的數字也要依序更改(看你複製幾層就編到幾號)

2-第二部分

<DIV onmousedown="fmenu1()" style="cursor:hand;"><img src="xxxxxx.xxx" width="10" height="10">分類項目A(請改成自己的文字)</DIV>
<TABLE id=menu1 style="display:none" border="0">
<TR>
<TD>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目A-1(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目A-2(請改成自己的文字)</a><BR>
<img src="xxxxxx.xxx" width="10" height="10"><a href="HTTP://xxxx.xxx.xxx.xx" target="_blank">子項目A-3(請改成自己的文字)</a><BR>
</TD>
</TR>
</TABLE>

這裡是第二個重點部份,有很長一斷語法都是這部分不斷重複,所以看起來很多...
<DIV></DIV>之間的語法控制的是分類項目,如下圖(黃框部分),像雪莉選單的"樂多改造大補帖"或是"MERO同好樂園"等...
<TABLE></TABLE>之間的語法則是控制子項目(藍框部分),要點開才看的到



我提供的語法是3個分類項目,分別有3個ˋ2個ˋ3個子選單,如果要繼續增加分類;就複製第二部分”全部”語法繼續貼在後面反白的數字也要依序更改(看你複製幾層就編到幾號),如果要增加每個類別的子項目,只要複製每個分類"底線部分"繼續貼在那個分類的<TD></TD>之間即可

細項修改
˙ style="cursor:hand;" 連結的滑鼠樣式(需要的話可以去一些網頁製作教學網站找)
˙  img src="xxxxxx.xxx" xxxxxx.xxx改成你連結圖片網址,不一定要像雪莉都放一樣的,可以換
˙  width="10" height="10" 圖片的寬ˋ高
˙ a href="HTTP://xxxx.xxx.xxx.xx" 次選單要連結的網址
˙  "子項目A-1" 這裡可改成你要的文字,譬如連過去BLOG的名字
˙  target="_blank" 連結開啟的方式,目前設定是另開一個視窗,需要的話可以去一些網頁製作教學網站找


呼~一次打完好累,
這篇文章很久以前就起了個頭,
卻一直沒有打完,
昨天剛剛整理完, Sharon就發問啦!! 真是太巧了~ ^^
希望能幫到需要的人啦!!
另外眼尖的人可能發現雪莉的下拉選單有捲軸
由於那是另一部分語法
所以有時間在另外介紹囉!!
完畢!

 

相簿設定
標籤設定
相簿狀態