0


歡迎光臨!! 救國團台中學苑 社會教育研習中心 電腦班隊研習營【網頁設計課程】


目錄選單語法




跳出式浮動選單
 

將原始碼複製到<HEAD></HEAD>標籤之間

<!--語法在網頁插入的開始-->
<style>
.barItem { cursor: hand; color: black; font-size: 12 }
<!--更改標頭顏色及字型大小-->
.barItem:hover { cursor: hand; color: red; font-size: 12 }
<!--更改連結顏色及字型大小-->
a. { cursor: hand; font-size: 12; color: navy; text-decoration: none }
a:active { cursor: hand; color: navy }
a.cc:hover { cursor: hand; color: red; text-decoration: underline }
.box { position: absolute ; background:#DEE7EF}
</style>
<!--↑編修文字大小.連結色變化.表格內色-->
<!--語法在網頁插入的結束-->

 

將原始碼複製到網頁中欲呈現特效的位置

<!--語法在網頁插入的開始-->
<table border="0" cellpadding="0" cellspacing="0" width="50%" bgcolor="lightblue" align=center>
<tr>

<td align="left" nowrap width=25%>
|<a id="item1" class=barItem >主目錄1</a>|<br>

<table id="item1box" class=box style='display:none' >
<tr><td><a href='01.htm' class="cc" target=_blank>連結網站 1</a></td></tr>
<tr><td><a href='02.htm' class="cc" target=_blank>連結網站 2</a></td></tr>
<tr><td><a href='03.htm' class="cc" >連結網頁 3</a></td></tr>
<tr><td><a href='04.htm' class="cc" >連結網頁 4</a></td></tr>
</td></table>

<td align="left" nowrap width=25%>
|<a id="item2" class=barItem >主目錄2</a>|<br>

<table id="item2box" class=box style='display:none' >
<tr><td><a href='page1.htm' class="cc" >連結網頁 1</a></td></tr>
<tr><td><a href='page2.htm' class="cc" >連結網頁 2</a></td></tr>
<tr><td><a href='page3.htm' class="cc" >連結網頁 3</a></td></tr>
</td></table>

<td align="left" nowrap width=25%>
|<a id="item3" class=barItem >主目錄3</a>|<br>

<table id="item3box" class=box style='display:none' >
<tr><td><a href='page1.htm' class="cc" >連結網頁 1</a></td></tr>
<tr><td><a href='page2.htm' class="cc" >連結網頁 2</a></td></tr>
<tr><td><a href='page3.htm' class="cc" >連結網頁 3</a></td></tr>
<tr><td><a href='page4.htm' class="cc" >連結網頁 4</a></td></tr>
<tr><td><a href='page5.htm' class="cc" >連結網頁 5</a></td></tr>
</td></table>

<td align="left" nowrap width=25%>
|<a id="item4" class=barItem>主目錄4</a>|<br>

<table id="item4box" class=box style='display:none' >
<tr><td><a href='page1.htm' target="_top" class="cc" >連結網頁 1</a></td></tr>
<tr><td><a href='page2.htm' target="_top" class="cc" >連結網頁 2</a></td></tr>
<tr><td><a href='page3.htm' target="_top" class="cc" >連結網頁 3</a></td></tr>
<tr><td><a href='page4.htm' target="_top" class="cc" >連結網頁 4</a></td></tr>
</td></table>

</tr></table>

<script language="JavaScript">
document.onmouseover = openIt

function openIt() {
var items = 4 ;
currEl = window.event.toElement
if (currEl.className == "barItem") {
newId = currEl.id + "box"
showBox = document.all(newId)
showBox.style.display = "block"
}

for (i=1; i<=items; i++) {
openItem="item" + i + "box"
elOpen = document.all(openItem)
if ((elOpen.style.display == "block")&&(elOpen != showBox))
elOpen.style.display = "none"

if (currEl.className == "closeIt") { elOpen.style.display = "none" }
}
}
</script>
<!--語法在網頁插入的結束-->

 

 


上一頁下一頁 │                                      │ 回首頁 回特效語法  │