站长学院通行证
搜索引擎
学院
当前位置 → 中国站长学院 → 设计在线 → 网页设计 → 网页特效 → 菜单特效 → 浏览正文
TAG： 网页特效 JS 脚本
所有栏目
作者：中国站长学院(整理) 来源：互联网转载 点击数： 更新时间：2008年01月01日
【字体：大 中 小】 【背景色 】 【收藏本文】 【打印】
<span id="ContentArea"><style type="text/css"> .menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default;border-width:1px;border-style:outset;color:yellow;background:#0099cc} .menu{position:absolute;top:30px;width:140px;display:none;border-width:2px;border-style:outset;border-color:white sliver sliver white;background:yellow;padding:15px} .menu A{text-decoration:none;color:blue} .menu A:hover{color:#00ffff} </style> <script language="javascript"> function menuControl(show) { window.event.cancelBubble=true; var objID=event.srcElement.id; var index=objID.indexOf("_"); var mainID=objID.substring(0,index); var numID=objID.substring(index+1,objID.length); if(mainID=="menubar") { if(show==1) { eval("showMenu("+"menu_"+numID+")"); } else { eval("hideMenu("+"menu_"+numID+")"); } } } var nbottom=0,speed=1; function displayMenu(obj) { obj.style.clip="rect(0 100% "+nbottom+"% 0)"; nbottom+=speed; if(nbottom<=100) { timerID=setTimeout("displayMenu("+obj.id+"),70"); } else clearTimeout(timerID); } function showMenu(obj) { obj.style.display="block"; obj.style.clip="rect(0 0 0 0)"; nbottom=5; displayMenu(obj); } function hideMenu(obj) { nbottom=0; obj.style.display="none"; } function keepMenu(obj) { obj.style.display="block"; } </script> </head> <body> <table border="0" width="400" cellspacing="0" cellpadding="0" style="font-size:15px"> <tr> <td width="20%"> <div align="center"id="menubar_1" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 教育网站 </div> </td> <td width="20%"> <div align="center"id="menubar_2" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 电脑网站 </div> </td> <td width="20%"> <div align="center"id="menubar_3" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 免费邮件 </div> </td> <td width="20%"> <div align="center"id="menubar_4" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)"> 其它网站 </div> </td> </tr> <tr> <td width="20%"> <div align="left"id="menu_1" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a href="http://www.cqcas.edu.cn">重庆民政学校</a><br> <a href="http://www.cqu.edu.cn">重庆大学</a><br> <a href="http://www.cquc.edu.cn">重庆交通学院</a> </div> </td> <td width="20%"> <div align="left"id="menu_2" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a href="http://www.yesky.com">天极网</a><br> <a href="http://www.cfan.cn.net">电脑爱好者</a><br> <a href="http://www.intoweb.com.cn">上网杂志</a> </div> </td> <td width="20%"> <div align="left"id="menu_3" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a href="http://www.163.com">163电子邮件</a><br> <a href="http://freemail.263.net">首都在线</a><br> <a href="http://www.21cn.com">21CN电子邮件</a><br> <a href="http://www.chinese.com">炎皇在线</a> </div> </td> <td width="20%"> <div align="left"id="menu_4" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"> <a href="http://www.sohu.com.cn">搜狐</a><br> <a href="http://www.yahoo.com">雅虎</a><br> <a href="http://www.cseek.com">搜索客</a><br> <a href="http://www.sina.com">新浪网</a><br> <a href="httP;//www.cqcas.edu.cn/user/sailing">远航网站</a> </div> </td> </tr> </table></span>
责任编辑：忧郁的秋天
注册投稿
收藏本文到 >>>
上一篇：超酷五角形菜单,点击后展开
下一篇：多功能的多级菜单,WEB2.0风格
相关特效
推荐导读
热门资讯
资讯快报
论坛新贴
返回首页
关于我们 - 帮助(？) - 广告服务 - 诚征英才 - 友情链接 - 网站地图 - 站长BLOG
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
返回首页