Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 75903
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
CSS+div+js组合强大实现超酷菜单

分类： Html/Css

2014-09-12 10:52:08


点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title></title>
  5. <style>
  6. body{
  7. background-color:#B8B8A0;
  8. }
  9. #fbtn{
  10. display:none;
  11. overflow:hidden;
  12. border-style:solid;
  13. border-width:1px;
  14. border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
  15. padding:1 1 1 1;
  16. width:115px;
  17. height:30px;
  18. }
  19. #fbtn_txt{
  20. position:relative;
  21. }
  22. #fbtn_txt div{
  23. height:30px;
  24. padding-top:11px;
  25. font-size:9px;
  26. font-family:small fonts;
  27. color:#800080;
  28. text-align:center;
  29. cursor:hand;
  30. }
  31. #fbtn_txt div a{
  32. font-size:9px;
  33. font-family:small fonts;
  34. color:#800080;
  35. text-decoration:none;
  36. }
  37. #fbtn_mask{
  38. background-color:#ffffff;
  39. position:relative;
  40. width:100%;
  41. height:100%;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id=fbtn>
  47. <div id=fbtn_mask></div>
  48. <div id=fbtn_txt>
  49. <div><a href="">G1</a></div>
  50. <div><a href="">good morning</a></div>
  51. </div>
  52. </div>
  53. <div id=fbtn>
  54. <div id=fbtn_mask></div>
  55. <div id=fbtn_txt>
  56. <div><a href="">G2</a></div>
  57. <div><a href="">good evening</a></div>
  58. </div>
  59. </div>
  60. <div id=fbtn>
  61. <div id=fbtn_mask></div>
  62. <div id=fbtn_txt>
  63. <div><a href="">M1</a></div>
  64. <div><a href="">my name is fireyy</a></div>
  65. </div>
  66. </div>
  67. <div id=fbtn>
  68. <div id=fbtn_mask></div>
  69. <div id=fbtn_txt>
  70. <div><a href="">M2</a></div>
  71. <div><a href="">mm mm i love u</a></div>
  72. </div>
  73. </div>
  74. <div id=fbtn>
  75. <div id=fbtn_mask></div>
  76. <div id=fbtn_txt>
  77. <div><a href="">G1</a></div>
  78. <div><a href="/">good morning</a></div>
  79. </div>
  80. </div>
  81. <div id=fbtn>
  82. <div id=fbtn_mask></div>
  83. <div id=fbtn_txt>
  84. <div><a href="/">G2</a></div>
  85. <div><a href="/">good evening</a></div>
  86. </div>
  87. </div>
  88. <div id=fbtn>
  89. <div id=fbtn_mask></div>
  90. <div id=fbtn_txt>
  91. <div><a href="/">M1</a></div>
  92. <div><a href="/">my name is fireyy</a></div>
  93. </div>
  94. </div>
  95. <div id=fbtn>
  96. <div id=fbtn_mask></div>
  97. <div id=fbtn_txt>
  98. <div><a href="/">M2</a></div>
  99. <div><a href="/">mm mm i love u</a></div>
  100. </div>
  101. </div>
  102. <script>
  103. var current=null;
  104. var t=null;
  105. for(var i=0;i<fbtn.length;i++){
  106. fbtn_txt[i].style.posTop=-30;
  107. fbtn_mask[i].style.posTop=-30;
  108. fbtn[i].index=i;
  109. fbtn[i].style.display="block";
  110. fbtn[i].onmouseover=function(){
  111. if(!current){
  112. current=this;
  113. domove(this.index);
  114. }
  115. else if(current!=this){
  116. domove(current.index);
  117. domove(this.index);
  118. current=this;
  119. }
  120. }
  121. fbtn[i].onmouseout=function(){
  122. if(event.toElement==this.parentElement&t==this){
  123. domove(this.index);
  124. current=null;
  125. }
  126. }
  127. }
  128. function domove(num){
  129. var o=fbtn_txt[num];
  130. var m=fbtn_mask[num];
  131. if(o.style.posTop<-60){
  132. o.style.display="none";
  133. var t=o.children[1].innerHTML;
  134. o.children[1].innerHTML=o.children[0].innerHTML;
  135. o.children[0].innerHTML=t;
  136. o.style.posTop=-30;
  137. o.style.display="block";
  138. if(m.style.posTop>30)
  139. m.style.posTop=-30;
  140. else
  141. m.style.posTop=0;
  142. }
  143. else{
  144. m.style.posTop+=3;
  145. o.style.posTop-=3;
  146. setTimeout('domove('+num+')',15);
  147. }
  148. }
  149. </script>
  150. </body>
  151. </html>

阅读(394) | 评论(0) | 转发(0) |
0

上一篇：跳动的菜单特效

下一篇：横向二级导航菜单

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6