<< 賺到好心情 | 回blog首頁 | 黑豆藥酒 >>

February 7,2007

月份彙整下拉式選單2

 

昨天發現，原先在樂多網誌編寫的月份彙整下拉式選單的連結失效。仔細檢查了該JAVA語法，連結仍是不行。只好換另一個JAVA語法了。


這個下拉式選單語法，同樣是JAVASCRIPT 加上一點點 CSS 的標籤。語法複製要分成兩個部分。

以樂多平台為例。

 登入---> 設定插入欄位 --> 追加新的欄位 --> 自由欄位 --> 貼上語法。

1. 在＜head＞ 貼上第一段語法位置　＜/head＞  (   ＜ ＞  請改成半型模式。)

複製第一段語法 (語法複製，不要斷行唷)
<style>
body,td,div  {font:12px }
label        {height:30px;padding:3px 0px 0px 4px}
.link_box    {text-align:left;cursor:default}
.link_head   {width:100%;height:30;border:2px inset}
.link_text   {background:#990000;color:#fff;padding-left:2px}
.link_arrow0 {font:14px marlett;text-align:center;width:22;height:100%;border:2px outset;background:buttonface}
.link_arrow1 {font:14px marlett;text-align:center;width:22;height:100%;border:1px solid buttonshadow;padding:2px 0px 0px 2px;background:buttonface}
.link_value  {position:absolute;visibility:hidden;border:1px solid;overflow:auto;overflow-x:hidden;filter:alpha(opacity:0)}
.link_record0{width:100%;height:25;border-top:1px solid #eee;background:#fff;color:#000;padding-left:2px}
.link_record1{width:100%;height:25;border-top:1px solid #047;background:#058;color:#fe0;padding-left:2px}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//選單淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//選單淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度顯示指標位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替換顯示內容
el.parentElement.parentElement.childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).innerHTML=el.innerHTML
}
document.onclick=dropdownHide
</script>

 


----------------------- * * *  ----------------------- 


2. 在＜body＞ 貼上第二段語法位置　＜/body＞  (   再次叮嚀，  ＜ ＞ 請改成半型模式。)

 

複製第二段語法  (語法複製，不要斷行唷)
<table  cellspacing=2 bgcolor=#000000><tr></tr>
<tr><td bgcolor=#e0e0e0 align=center>
</td>
<td bgcolor=#e0e0e0 align=center>
<!--// 月份範例  開始 //-->
<div class=link_box style="width:200px" onselectStart="return false">
<div class=link_head onclick="dropdown(value2)">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td><div class=link_text><img src="上傳圖片網址" align="absmiddle"><label> 顯示標題名稱</label></div></td>
<td width=22 align=right><div class=link_arrow0 onmousedown="this.className='link_arrow1'" onmouseup="this.className='link_arrow0'" onmouseout="this.className='link_arrow0'">6</div></td>
</tr></table>
</div>
<div id=value2 class=link_value style="width:100%;height:82px">
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://blog.roodo.com/你的帳號/archives/月份1.html')" TARGET="new"><img src="上傳圖片網址" align="absmiddle"><label> 月份1 </label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://blog.roodo.com/你的帳號/archives/月份2.html')" TARGET="new"><img src="上傳圖片網址" align="absmiddle"><label> 月份2  </label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://blog.roodo.com/你的帳號/archives/月份3.html')" TARGET="new"><img src="上傳圖片網址" align="absmiddle"><label> 月份3  </label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://blog.roodo.com/你的帳號/archives/月份4.html')" TARGET="new"><img src="上傳圖片網址" align="absmiddle"><label> 月份4 </label></div>
</div>
</div>
<!--// 範例 月份 結束 //-->
</td></tr>
</table>

----------------------- * * *  -----------------------

 

不自動換行  --> 儲存設定 --> 重整  --> 完成。

 

----------------------- * * *  -----------------------


範例如下圖，或觀看樂多站首頁右欄「時間洪流」 。


 

 

 

line112.gif 

本文瀏覽人氣: 次


Posted by helenna at 樂多Roodo! │19:20 │回應(8) │引用(0) │Blog練功房
樂多分類：網路/3C 工具：加入樂多書籤│編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/3077687
回應文章

改這個我最頭大了,
看看就好...
Posted by 小瓢蟲 at April 27,2007 15:38

dear 小瓢蟲
ㄏㄏ...是會改到眼睛脫窗啦︿︿
Posted by helenna at April 27,2007 15:38

你好像對blog很利害耶
婐為這很頭大的
Posted by Jeannie at April 27,2007 15:38

厲害阿....
我看到這些豆芽菜都會頭昏
哈哈!
除非是要做網頁的時候才去看...
Posted by A-Shun at April 27,2007 15:38

dear jeannie,
騙"口甲"騙"口甲"啦^^"


dear A-shun,
我也不喜歡豆芽菜
平時就叫它們別出來嚇人^^"



Posted by helenna at April 27,2007 15:38
下拉式選單我想要了好久
可是都沒辦法試成功
看到您熱心的提供程式碼
真感動ㄋㄟ...
從此我也可以擁有下拉式選單了
太感謝了!!
Posted by 銀弓 at June 11,2007 14:23
dear 銀弓
不客氣唷^^

這裡的彙整效果讓版面更加多元了些
Posted by helenna at June 11,2007 21:25
[URL=http://www.estatico.cn/xxx-com] xxx com [/URL] xxx com [URL=http://www.estatico.cn/data-warehouse] data warehouse [/URL] data warehouse [URL=http://www.estatico.cn/tatuaggio-lettera] tatuaggio lettera [/URL] tatuaggio lettera
Posted by Polly at June 9,2008 00:24


回最上方