這個漂亮的伸展式選單
真的很漂亮看看我右邊的選單效果
在影像部份可以改自己想用的影像
應用在部落格上很不錯(我還加了一個秘密連結)

不會新增欄位裡連結一大堆落落長
不過就要先存一個htm網頁檔上傳到網頁空間
再用崁入網頁語法放到新增欄位
崁入網頁語法→http://blog.pixnet.net/haco/post/276150
 

1.藍色標示滑鼠點選選單下每個連結上下色
2.洋紅色標示滑鼠點選選單目錄的名稱上下色
3.橘色標示選單目錄的影像上層箭頭往上
4.綠色標示選單目錄的影像上層箭頭往下
5.紅色標示選單目錄每層的順序
6.紫色標示選單目錄每個展的高度
7.咖啡色標示目錄下連結前的影像檔及像素大小
8.淺綠色標示目錄下連結的網址和名稱
9.淺藍色標示選單目錄每層的名稱和儲存格寬度高度
10.粽色標示選單目錄下連結儲存格寬度
11.淡黃色底標示增加選單所需整個語法
12.淺粉紅色標示增加選單目錄每個連結的語法
13.葡萄紫色標示整個網頁背景色
14.深藍色標示每個連結的背景色
15.淺藍色標示第一個選單目錄要不要伸展下來的語法
overflow:hidden;
  不伸展display:none; 記得影像也要換

16.用記事本修改好存成XXX.htm上傳到網頁空間

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="aaaaa" content="">
<style type=text/css>
body { background:#FFFFFF; margin:0px; font:normal 12px 宋體; }
table { border:0px; }
td { font:normal 12px 宋體; }
img { vertical-align:bottom; border:0px; }
a { font:normal 12px 宋體; color:#000000; text-decoration:none; }
a:hover { color:#EE779B }
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#FFFFFF; }
.menu_title { }
.menu_title span { position:relative; top:3px; left:8px; color:#000000; font-weight:bold; }
.menu_title2 { }
.menu_title2 span { position:relative; top:3px; left:8px; color:#9A9A9A; font-weight:bold; }
</style>
<script language=javascript>
function menuShow(obj,maxh,obj2)
{
if(obj.style.pixelHeight<maxh)
{
obj.style.pixelHeight+=maxh/20;
obj.filters.alpha.opacity+=5;
obj2.background="http://1175107921.gif";
if(obj.style.pixelHeight==maxh/10)
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==maxh/20)
obj.style.display='none';
obj.style.pixelHeight-=maxh/20;
obj.filters.alpha.opacity-=5;
obj2.background="http://1175107680.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>
<base target=main>
</head>
<body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;">
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107921.gif id=menuTitle1 onclick="menuChange(menu1,80,menuTitle1);">
<span>  搜尋引擎</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://www.google.com onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
Google狐狗</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.baidu.com onfocus=this.blur();><img src=http://1175065145.gif width="16" height="15">
Baiidu百度</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.sogou.com onfocus=this.blur();><img src=http://1175065146.gif width="16" height="15">
Sogou搜狗</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language=javascript>
var whichOpen=menuTitle1;
var whichContinue='';
</script>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle2 onclick="menuChange(menu2,280,menuTitle2);">
<span>  認養資訊網站</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu2>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://forum.lovedog.org.tw onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
寶島動物園</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.doghome.org.tw onfocus=this.blur();><img src=http://1175065145.gif width="16" height="15">
流浪動物花園</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.13145057.com onfocus=this.blur();><img src=http://1175065146.gif width="16" height="15">
台北照顧生命協會</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://tyacad.org/ onfocus=this.blur();><img src=http://1175065147.gif width="16" height="15">
桃園縣推廣動物保護協會</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://myweb.hinet.net/ onfocus=this.blur();><img src=http://1175065148.gif width="16" height="15">
高雄市關懷流浪動物協會</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.meetpets.idv.tw/ onfocus=this.blur();><img src=http://1175065150.gif width="16" height="15">
台灣認養地圖</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://dog911.tw/ onfocus=this.blur();><img src=http://1175065151.gif width="16" height="15">
拯救落勢生命聯盟</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.savedogs.org/ onfocus=this.blur();><img src=http://1175065152.gif width="16" height="15"> 動物緊急救援小組</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://twcv.org.tw/tsgoddog/ onfocus=this.blur();><img src=http://1175065138.gif width="16" height="15">
古代同盟會</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.mixdog.org/ onfocus=this.blur();><img src=http://1175065139.gif width="16" height="15">
米克斯樂園</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.crazy4dog.com/home.html onfocus=this.blur();><img src=http://1175065137.gif width="16" height="15">
狗癡園地</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.pet.gov.tw/index.htm onfocus=this.blur();><img src=http://1175065141.gif width="16" height="15">
農委會寵物資訊網</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.tmiah.tcg.gov.tw/ onfocus=this.blur();><img src=http://1175065142.gif width="16" height="15">
北市動物衛生檢驗所</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle3 onclick="menuChange(menu3,80,menuTitle3);">
<span>  網上翻譯</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu3>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://tw.search.yahoo.com/language/ onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
Yahoo!奇摩搜尋</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://babelfish.altavista.com/ onfocus=this.blur();><img src=http://1175065145.gif width="16" height="15">
AltaVista</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.excite.co.jp/world/english/ onfocus=this.blur();><img src=http://1175065146.gif width="16" height="15">
Excite</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle4 onclick="menuChange(menu4,80,menuTitle4);">
<span>  Blog網頁工具</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu4>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://ghlp.igogo8.com/ghlp_more.html onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
Igoogle8愛狗狗吧</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.colordic.org/ onfocus=this.blur();><img src=http://1175065145.gif width="16" height="15">
日本原色大辭典</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.eplug-cg.com/city/files/setscroll.htm onfocus=this.blur();><img src=http://1175065146.gif width="16" height="15">
捲軸顏色生成器</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle5 onclick="menuChange(menu5,180,menuTitle5);">
<span>  台灣人俱樂部</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu5>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://tw.myblog.yahoo.com/jw!uSQuxCuICkYsLN62.y8z/ onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
玄音小棧-詩詞禪映</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://blog.pixnet.net/marcie0516 onfocus=this.blur();><img src=http://1175065145.gif width="16" height="15">
Marcie 自言自語</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.mingyan.idv.tw/ onfocus=this.blur();><img src=http://1175065146.gif width="16" height="15">
單翼天使缺了心</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://blog.sina.com.tw/davide/ onfocus=this.blur();><img src=http://1175065147.gif width="16" height="15">
桃花開出春風</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://tw.myblog.yahoo.com/jw!ii7jZkiBBxKDcwwM8tQPTt9RD1W6/ onfocus=this.blur();><img src=http://1175065148.gif width="16" height="15">
朵朵花語~</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://tw.myblog.yahoo.com/jang-chapter/ onfocus=this.blur();><img src=http://1175065149.gif width="16" height="15">
立早琳部落格</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.taiwan9.com/cforumaa/ onfocus=this.blur();><img src=http://1175065150.gif width="16" height="15">
taiwan9.com</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://news100.com.tw/modules/newbb/ onfocus=this.blur();><img src=http://1175065151.gif width="16" height="15">
南方快報</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle6 onclick="menuChange(menu6,40,menuTitle6);">
<span>  手繪新星網站</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu6>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://tw.myblog.yahoo.com/everybodycomeing-jaffshow onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
阿炮的大兵日記</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle7 onclick="menuChange(menu7,40,menuTitle7);">
<span>  Music音樂網</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu7>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://blog.roodo.com/ruru onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
Crazy World貧窮貴公子</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
&nbsp;
<table cellpadding=0 cellspacing=0 width=160 align=center>
<tr style="cursor:hand;">
<td height=23 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://1175107680.gif id=menuTitle8 onclick="menuChange(menu8,40,menuTitle8);">
<span>  影像教學論譚</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:160;height:0;filter:alpha(Opacity=0);display:none;" id=menu8>
<table cellpadding=0 cellspacing=0 align=center width=160 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://photomagic.freehostia.com/xoops2/index.php onfocus=this.blur();><img src=http://1175065140.gif width="16" height="15">
影像魔法世界</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
 

arrow
arrow
    全站熱搜

    haco 發表在 痞客邦 留言(1) 人氣()