模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
下滑菜单_菜单导航特效
查看演示效果
特效Tag：
菜单
添加
下滑菜单,您可以先修改部分代码再运行.
<html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <meta name="GENERATOR" mrc="Microsoft FrontPage 4.0"> <meta name="ProgId" mrc="FrontPage.Editor.Document"> <title>下滑菜单－模板无忧www.mb5u.com</title> <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> </body> </html> </script>
所属频道：
菜单导航特效
/
更新时间：2010-05-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
菜单项中间用斜线分开的CSS导航条
CSS实现的三级菜单代码
JS仿QQ的展开/折叠菜单
Js打造层拖动实例：网站菜单拖拽移位效果
纯CSS标准型下拉菜单
JS折叠菜单
windows XP左侧的菜单效果
类似门户网站的CSS双行导航菜单
仿淘宝支付宝网站的漂亮导航菜单
仿QQ导航菜单
猜你也喜欢看这些
JS实现鼠标悬停图片交换
在图片上单击获取图片原始大小
图片震动
礼花背景：深隧的天空不断爆出多彩的礼花
JavaScript 生成弹性透明的图片放大代码
腾讯QQ网站的Js图片切换
CSS+JavaScript仿FLASH的图片轮换效果
根据鼠标放上切换内容制作的图片导航
鼠标点击效果
很有意思的图片分裂复制效果
相关链接：
复制本页链接
|
搜索下滑菜单
特效说明：
菜单导航模板
-
下滑菜单
。
。