設為首頁收藏本站
開啟輔助訪問 切換到寬版

TShopping

 找回密碼
 註冊
NetYea 響應式網頁
RWD 新竹網頁設計		 MyPresent.net
聯盟行銷賺分紅 		綠能購物網 手工藝品、客製化商品 管乾淨 專業 清洗水管
搜索
TShopping»討論區 › 電腦3C › 網頁設計 › DHTML特效選單
返回列表 發新帖
查看: 2309|回復: 3
打印 上一主題 下一主題

[教學] DHTML特效選單

[複製鏈接]
woff
跳轉到指定樓層
1#
發表於 2008-9-23 20:39:04 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
 
Push to Facebook
步驟一、將原始碼複製到<HEAD></HEAD>標籤之間
  1. <!--語法在網頁插入的開始-->
  2. <script language="javascript1.2">
  3. //Contents for menu 1
  4. var menu1=new Array()
  5. menu1[0]='<a href="http://www.hinet.net">中華電信</a><br>'
  6. menu1[1]='<a href="http://www.hinet.net">中華電信</a><br>'
  7. menu1[2]='<a href="http://www.hinet.net">中華電信</a><br>'
  8. //Contents for menu 2
  9. var menu2=new Array()
  10. menu2[0]='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
  11. menu2[1]='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
  12. menu2[2]='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
  13. //Contents for menu 3
  14. var menu3=new Array()
  15. menu3[0]='<a href="http://www.pchome.com.tw">PC Home</a><br>'
  16. menu3[1]='<a href="http://www.pchome.com.tw">PC Home</a><br>'
  17. menu3[2]='<a href="http://www.pchome.com.tw">PC Home</a><br>'

  19. </script>
  20. <style type="text/css">
  21. <!--
  22. .iewrap1{
  23. position:relative;
  24. height:30px;
  25. }
  26. .iewrap2{
  27. position:absolute;
  28. }
  29. #dropmenu0, #dropmenu1, #dropmenu2{
  30. visibility:hide;
  31. z-index:100;
  32. }
  33. -->
  34. </style>
  35. <!--語法在網頁插入的結束-->

  37. 步驟二、將原始碼複製到<BODY></BODY>標籤之間

  39. <!--語法在網頁插入的開始-->
  40. <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">
  41. <script language="javascript1.2">
  42. if (document.all)
  43. dropmenu0.style.padding="4px"
  44. for (i=0;i<menu1.length;i++)
  45. document.write(menu1[i])
  46. </script>
  47. </div>
  48. <script language="javascript1.2">
  49. if (document.layers){
  50. document.dropmenu0.captureEvents(Event.CLICK)
  51. document.dropmenu0.onclick=hidemenu2
  52. }
  53. </script>

  55. <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">
  56. <script language="javascript1.2">
  57. if (document.all)
  58. dropmenu1.style.padding="4px"
  59. for (i=0;i<menu2.length;i++)
  60. document.write(menu2[i])
  61. </script>
  62. </div>
  63. <script language="javascript1.2">
  64. if (document.layers){
  65. document.dropmenu1.captureEvents(Event.CLICK)
  66. document.dropmenu1.onclick=hidemenu2
  67. }
  68. </script>

  70. <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">
  71. <script language="javascript1.2">
  72. if (document.all)
  73. dropmenu2.style.padding="4px"
  74. for (i=0;i<menu3.length;i++)
  75. document.write(menu3[i])
  76. </script>
  77. </div>
  78. <script language="javascript1.2">
  79. if (document.layers){
  80. document.dropmenu2.captureEvents(Event.CLICK)
  81. document.dropmenu2.onclick=hidemenu2
  82. }
  83. </script>
  84. <!--語法在網頁插入的結束-->
複製代碼

步驟二、將原始碼複製到<BODY></BODY>標籤之間
  1. <!--語法在網頁插入的開始-->
  2. <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">
  3. <script language="javascript1.2">
  4. if (document.all)
  5. dropmenu0.style.padding="4px"
  6. for (i=0;i<menu1.length;i++)
  7. document.write(menu1[i])
  8. </script>
  9. </div>
  10. <script language="javascript1.2">
  11. if (document.layers){
  12. document.dropmenu0.captureEvents(Event.CLICK)
  13. document.dropmenu0.onclick=hidemenu2
  14. }
  15. </script>

  17. <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">
  18. <script language="javascript1.2">
  19. if (document.all)
  20. dropmenu1.style.padding="4px"
  21. for (i=0;i<menu2.length;i++)
  22. document.write(menu2[i])
  23. </script>
  24. </div>
  25. <script language="javascript1.2">
  26. if (document.layers){
  27. document.dropmenu1.captureEvents(Event.CLICK)
  28. document.dropmenu1.onclick=hidemenu2
  29. }
  30. </script>

  32. <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">
  33. <script language="javascript1.2">
  34. if (document.all)
  35. dropmenu2.style.padding="4px"
  36. for (i=0;i<menu3.length;i++)
  37. document.write(menu3[i])
  38. </script>
  39. </div>
  40. <script language="javascript1.2">
  41. if (document.layers){
  42. document.dropmenu2.captureEvents(Event.CLICK)
  43. document.dropmenu2.onclick=hidemenu2
  44. }
  45. </script>
  46. <!--語法在網頁插入的結束-->
複製代碼

步驟三、將原始碼複製到網頁中欲呈現特效的位置
  1. <!--語法在網頁插入的開始-->
  2. <script language="javascript1.2">
  3. //reusable/////////////////////////////
  4. var zindex=100
  5. function dropit2(whichone){
  6. if (window.themenu&&themenu.id!=whichone.id)
  7. themenu.style.visibility="hidden"
  8. themenu=whichone
  9. if (document.all){
  10. themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
  11. themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
  12. if (themenu.style.visibility=="hidden"){
  13. themenu.style.visibility="visible"
  14. themenu.style.zIndex=zindex++
  15. }
  16. else{
  17. hidemenu()
  18. }}}
  19. function dropit(e,whichone){
  20. if (window.themenu&&themenu.id!=eval(whichone).id)
  21. themenu.visibility="hide"
  22. themenu=eval(whichone)
  23. if (themenu.visibility=="hide")
  24. themenu.visibility="show"
  25. else
  26. themenu.visibility="hide"
  27. themenu.zIndex++
  28. themenu.left=e.pageX-e.layerX
  29. themenu.top=e.pageY-e.layerY+19
  30. return false
  31. }

  33. function hidemenu(whichone){
  34. if (window.themenu)
  35. themenu.style.visibility="hidden"
  36. }

  38. function hidemenu2(){
  39. themenu.visibility="hide"
  40. }

  42. if (document.all)
  43. document.body.onclick=hidemenu
  44. //reusable/////////////////////////////
  45. </script>

  47. <!----------Menu 1 starts here---------->

  49. <ilayer height=35px>
  50. <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> |     
  51. </span>   
  52. </layer>
  53. </ilayer>     
  54. <!----------Menu 1 ends here---------->   


  57. <!----------Menu 2 starts here---------->     

  59. <ilayer height=35px>     
  60. <layer visibility=show>     
  61. <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> |  
  62. </span>
  63. </layer>
  64. </ilayer>     
  65. <!----------Menu 2 ends here---------->   


  68. <!----------Menu 3 starts here---------->     

  70. <ilayer height=35px>     
  71. <layer visibility=show>     
  72. <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>   
  73. </span>
  74. </layer>
  75. </ilayer>
  76. <!----------Menu 3 ends here---------->
  77. <!--語法在網頁插入的結束-->
複製代碼

 

臉書網友討論
回復

使用道具 舉報

阿炮
2#
發表於 2011-7-10 00:54:55 | 只看該作者
說的不錯  

版主招募中

回復 支持 反對

使用道具 舉報

返回列表 發新帖
*滑块验证:
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-4-25 15:51 , Processed in 0.046156 second(s), 19 queries .

本論壇言論純屬發表者個人意見，與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表