Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

仿蓝色理想网站的导航菜单

[复制链接]
popuppp 发表于 2008-10-25 14:12:35 | 显示全部楼层 |阅读模式
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>仿蓝色理想网站的导航菜单</title>
  5. </head>
  6. <style type="text/css">
  7. #dNavBar{
  8. background-color:#ffffff;
  9. }
  10. #dNavBar li{
  11. list-style-type:none;
  12. float:left;
  13. width:84px;
  14. height:28px;
  15. line-height:28px;
  16. font-size:12px;
  17. color:#FFFFFF;
  18. border:3px solid #ffffff;
  19. background-color:#86C2FF;
  20. text-align:center;
  21. display:block;
  22. cursor:pointer;
  23. }
  24. #subMenu{
  25. background-color:#0000FF;
  26. width:500px;
  27. border-left:3px solid #ffffff;
  28. border-right:3px solid #ffffff;
  29. height:29px;
  30. line-height:29px;
  31. color:#FFFFFF;
  32. font-size:12px;
  33. padding-left:10px;
  34. }
  35. body {
  36. margin-left: 0px;
  37. margin-top: 0px;
  38. margin-right: 0px;
  39. margin-bottom: 0px;
  40. }
  41. a:link {
  42. color: #FFFFFF;
  43. text-decoration: none;
  44. }
  45. a:hover{
  46. color: #FFFFFF;
  47. text-decoration: none;
  48. }
  49. a:visited{
  50. color: #FFFFFF;
  51. text-decoration: none;
  52. }
  53. </style>
  54. <script language="javascript">
  55. function ShowMenu()
  56. {
  57. var barCTT=document.getElementById("dNavBar")
  58. var liArr=barCTT.getElementsByTagName("li")
  59. var links=new Array()
  60. links[0]="<a href='#'>当前位置:首页"
  61. links[1]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a> | <a href='#'>项目四</a>"
  62. links[2]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a>"
  63. links[3]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a> | <a href='#'>项目四</a> | <a href='#'>项目五</a>"
  64. links[4]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  65. links[5]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a>"
  66. links[6]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  67. links[7]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  68. links[8]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  69. links[9]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  70. links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
  71. links[11]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  72. links[12]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"
  73. for (i=0;i<liArr.length;i++)
  74. {
  75. liArr[i].onclick=function()
  76. {
  77. selectThis(this,liArr,links)
  78. }
  79. }
  80. }
  81. function selectThis(indexObj,allLi,infoArr)
  82. {
  83. var index=0;
  84. for (i=0;i<allLi.length;i++)
  85. {
  86. allLi[i].style.border="3px solid #ffffff";
  87. allLi[i].style.backgroundColor="#86C2FF";
  88. allLi[i].style.height="28px";
  89. if (indexObj==allLi[i])
  90. {
  91. index=i;
  92. }
  93. }
  94. indexObj.style.borderBottom="0px solid #666688";
  95. indexObj.style.backgroundColor="#0000FF";
  96. indexObj.style.height="31px";
  97. document.getElementById("subMenu").innerHTML=infoArr[index];
  98. }
  99. </script>
  100. <body onLoad="ShowMenu()">
  101. <div id="dNavBar" style="float:none; width:560px;"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>
  102. </div>
  103. <div id="subMenu">站务公告</div>
  104. </body>
  105. </html>
复制代码
博爱小山 发表于 2008-10-25 14:13:37 | 显示全部楼层
我更想知道蓝色理想用的门户程序……
回复

使用道具 举报

 楼主| popuppp 发表于 2008-10-25 14:17:17 | 显示全部楼层
dedecms 用的这个
回复

使用道具 举报

inonce 发表于 2008-10-25 14:19:13 | 显示全部楼层
((mk03))

这效果不错~
回复

使用道具 举报

laffucom 发表于 2008-10-27 23:03:46 | 显示全部楼层
效果呢?怎么没看见效果。。。。。。。。。。。。
回复

使用道具 举报

 楼主| popuppp 发表于 2008-11-9 11:05:45 | 显示全部楼层
5# laffucom

你要自己去用一下就知道了
回复

使用道具 举报

bazj 发表于 2008-11-11 15:56:32 | 显示全部楼层

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

snsn 发表于 2008-11-11 16:10:29 | 显示全部楼层
回复

使用道具 举报

abcnic1 发表于 2008-11-11 16:13:12 | 显示全部楼层
很喜欢BLUEIDEA  谢了
回复

使用道具 举报

feng9dsh 发表于 2011-11-3 09:17:33 | 显示全部楼层
我只是来看看
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-18 18:47 , Processed in 0.026041 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表