模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
在网页右上角隐藏的滑出菜单_菜单导航特效
查看演示效果
特效Tag:
滑出菜单
右上角
添加
在网页右上角隐躲的滑出菜单,鼠标移过往,菜单自然出现,移开自动隐躲,可以用作副菜单。
<html> <head> <title>右上角隐躲的滑出菜单</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> </head> <body> <style type="text/css"> <!-- #menuBar {position: absolute;left: -200px; width: 300px; top: 0px; clip: rect( )} #glider {position: absolute;left: 200px;top: 0px; width: 80px}/* www.mb5u.com */ .glideText {font-size: 18px;color: #E2E2E2;text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif} a:link { color: #D7D7D7; text-decoration: none} a:visited { color: #E0E0E0; text-decoration: none} a:active { color: #333333; text-decoration: none} a:hover { color: #333333} .mentd { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; background-color: #999999; background-image: url(graygrid2.gif)} td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333} h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF} --> </style> <script language="JavaScript"> <!-- var pee = -200 var drec = 40; var speed = 20; var l = pee; function Proj7GlideBack () {l += drec; if (document.layers) { document.menuBar.left = l; } else if (document.all) {document.all.menuBar.style.pixelLeft = l; } else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px'; } if (l < 0) setTimeout('Proj7GlideBack()', speed); else { if (document.layers) { var html = ''; html += '<A HREF="javascript:;"'; html += 'onClick="Proj7GlideOut(); return false;"'; html += 'Class="glideText"'; html += 'close'+ '<br>'; html += 'close'+ '<Br>'; html += '<\/A>'; var a = window.document.menuBar.document.glider; a.document.open(); a.document.write(html); a.document.close(); } else if (document.all) {document.all.glidetextLink.innerHTML = 'close'; document.all.glidetextLink.onclick = moveIn; } else if (document.getElementById) { document.getElementById('glidetextLink').firstChild.nodeValue ='close'; document.getElementById('glidetextLink').onclick = moveIn; } } } function Proj7GlideOut () {l -= drec; if (document.layers) {document.menuBar.left = l; } else if (document.all) {document.all.menuBar.style.pixelLeft = l; } else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px'; } if (l > pee) setTimeout('Proj7GlideOut()', speed); else { if (document.layers) { var html = ''; html += '<A HREF="javascript:;"'; html += 'onclick="Proj7GlideBack(); return false;"'; html += 'Class="glideText"'; html += 'menu'+ '<Br>'; html += 'menu'+ '<Br>'; html += '<\/A>'; var a = window.document.menuBar.document.glider; a.document.open(); a.document.write(html); a.document.close(); } else if (document.all) {document.all.glidetextLink.innerHTML = 'Menu'; document.all.glidetextLink.onclick = moveOut; } else if (document.getElementById) { document.getElementById('glidetextLink').firstChild.nodeValue = 'Menu'; document.getElementById('glidetextLink').onclick = moveOut; } } } function moveIn () {Proj7GlideOut();return false; } function moveOut() {Proj7GlideBack();return false; } <!--NNresizeFix Reloads the page to workaround a Netscape Bug--> if (document.layers) { origWidth = innerWidth; origHeight = innerHeight;} function reDo() { if (innerWidth != origWidth || innerHeight != origHeight) location.reload();} if (document.layers) onresize = redo; //--> </script> <div ID="menuBar" style=""> <table width="272" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333"> <tr> <td> <table width="100%" border="0" cellpadding="8" cellspacing="1"> <tr> <td bgcolor="#FF9900" valign="top" class="mentd"> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">网页殊效</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">网站开发</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">电子书籍</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">站长工具</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">网页殊效</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">论坛系统</a> </td> <td width="72" bgcolor="#CC0000"> </td> </tr> </table> </td> </tr> </table> <span ID="glider" style=""> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td><a id="glidetextLink" href="javascript:;" class="glideText" onClick="Proj7GlideBack(); return false" onFocus="if(this.blur)this.blur()">Menu</a></td> </tr> </table></span> </div> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2012-11-01
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
带缺口的CSS导航栏
酷似FLASH的竖向菜单
四个角都为弧形的纯CSS圆角导航栏
超级漂亮的CSS多级透明展开菜单
隐藏菜单效果
悬浮在网页顶部可关闭的工具条(浮动层)
一般用作排行的CSS侧边列表滑动门
UL、LI 无序列表实现纯CSS网站导航菜单
不使用图片的CSS圆角垂直菜单
简单漂亮的导航条
猜你也喜欢看这些
来自新浪的一款简洁JS焦点图切换代码
图象淡入淡出 Script
鼠标接触或者离开图片时,图片大小会相应变化
JS图片切换学习版,没有过多修饰
JavaScript 生成弹性透明的图片放大代码
JavaScript真正的鼠标放上动画加载大图的代码
图像映射
图片渐渐出现脚本
在图片上单击获取图片原始大小
Js版淘宝图片切换,类似相册播放效果
相关链接:
复制本页链接
|
搜索在网页右上角隐藏的滑出菜单
特效说明:
菜单导航模板
-
在网页右上角隐藏的滑出菜单
。