DHTML特效選單
步驟一、將原始碼複製到<HEAD></HEAD>標籤之間 <!--語法在網頁插入的開始--><script language="javascript1.2">
//Contents for menu 1
var menu1=new Array()
menu1='<a href="http://www.hinet.net">中華電信</a><br>'
menu1='<a href="http://www.hinet.net">中華電信</a><br>'
menu1='<a href="http://www.hinet.net">中華電信</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
menu2='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
menu2='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
//Contents for menu 3
var menu3=new Array()
menu3='<a href="http://www.pchome.com.tw">PC Home</a><br>'
menu3='<a href="http://www.pchome.com.tw">PC Home</a><br>'
menu3='<a href="http://www.pchome.com.tw">PC Home</a><br>'
</script>
<style type="text/css">
<!--
.iewrap1{
position:relative;
height:30px;
}
.iewrap2{
position:absolute;
}
#dropmenu0, #dropmenu1, #dropmenu2{
visibility:hide;
z-index:100;
}
-->
</style>
<!--語法在網頁插入的結束-->
步驟二、將原始碼複製到<BODY></BODY>標籤之間
<!--語法在網頁插入的開始-->
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="javascript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1)
</script>
</div>
<script language="javascript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="javascript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2)
</script>
</div>
<script language="javascript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>
<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="javascript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3)
</script>
</div>
<script language="javascript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu2
}
</script>
<!--語法在網頁插入的結束-->
步驟二、將原始碼複製到<BODY></BODY>標籤之間 <!--語法在網頁插入的開始-->
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="javascript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1)
</script>
</div>
<script language="javascript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="javascript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2)
</script>
</div>
<script language="javascript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>
<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="javascript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3)
</script>
</div>
<script language="javascript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu2
}
</script>
<!--語法在網頁插入的結束-->
步驟三、將原始碼複製到網頁中欲呈現特效的位置 <!--語法在網頁插入的開始-->
<script language="javascript1.2">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}}}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}
function hidemenu2(){
themenu.visibility="hide"
}
if (document.all)
document.body.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer height=35px>
<layer visibility=show><span class=iewrap1 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">主目錄之一</a></b> |
</span>
</layer>
</ilayer>
<!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1 onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">主目錄之二</a></b> |
</span>
</layer>
</ilayer>
<!----------Menu 2 ends here---------->
<!----------Menu 3 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1 onClick="dropit2(dropmenu2);event.cancelBubble=true;return false"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu2')">主目錄之三</a></b>
</span>
</layer>
</ilayer>
<!----------Menu 3 ends here---------->
<!--語法在網頁插入的結束--> 說的不錯
頁:
[1]