模板无忧
网页特效
每日更新
|
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"> <title>滑出式菜单</title> <style> <!-- #ssm2 A { color:black; text-decoration:none; font-size:12px; font-family:verdana; } #ssm2 A:hover { color:red; } --> </style> </head> <body> <script language="JavaScript"> function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } function highlight(x){ document.forms[x].elements[0].focus() document.forms[x].elements[0].select() } function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } var NS IE=document.all; NS=document.layers; hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#666666"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=60; staticYOffset=20; menuBGColor="black"; menuIsStatic="no"; menuHeader="源码下载" menuWidth=150; // Must be a multiple of 5! staticMode="advanced" barBGColor="#1298fd"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="网站导航"; function moveOut() { if (window.cancel) { cancel=""; } if (window.moving2) { clearTimeout(moving2); moving2=""; } if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) { if (IE) {ssm2.style.pixelLeft += (5%menuWidth); } if (NS) { document.ssm2.left += (5%menuWidth); } moving1 = setTimeout('moveOut()', 5) } else { clearTimeout(moving1) } }; function moveBack() { cancel = moveBack1() } function moveBack1() { if (window.moving1) { clearTimeout(moving1) } if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); } if (NS) { document.ssm2.left -= (5%menuWidth); } moving2 = setTimeout('moveBack1()', 5)} else { clearTimeout(moving2) } }; lastY = 0; function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style } if (NS) {winY = window.pageYOffset;var NM=document.ssm2 } if (mode=="smooth") { if ((IE||NS) && winY!=lastY) { smooth = .2 * (winY - lastY); if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; } setTimeout('makeStatic("smooth")', 1) } else if (mode=="advanced") { if ((IE||NS) && winY>YOffset-staticYOffset) { if (IE) {NM.pixelTop=winY+staticYOffset } if (NS) {NM.top=winY+staticYOffset } } else { if (IE) {NM.pixelTop=YOffset } if (NS) {NM.top=YOffset-7 } } setTimeout('makeStatic("advanced")', 1) } } function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible" } else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show" } else { alert('Choose either the "smooth" or "advanced" static modes!') } } function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } </script> <script language="JavaScript"> if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></p></TD></tr>') function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></td></tr>')} addItem(' ASP.NET', '#', '_blank'); addItem(' VB.NET', '#', '_blank'); addItem(' VC.NET', '#', '_blank'); addItem(' PHP', '#', '_blank'); addItem(' DELPHI', '#', '_blank'); addItem(' JAVA', '#', '_blank'); addHdr('技术文章'); addItem(' ASP', '#', '_blank'); addItem(' ASP.NET', '#', '_blank'); addItem(' CSHARP', '#', '_blank'); addItem(' VB.NET', '#', '_blank'); addItem(' JAVA', '#', '_blank'); addItem(' JSP', '#', '_blank'); document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </td></TR></table>') if (IE) {document.write('</DIV>')} if (NS) {document.write('</LAYER>')} if ((IE||NS) && (menuIsStatic=="yes" && staticMode)) {makeStatic(staticMode);} </script> <script> window.onload=init </script> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
用图片美化的漂亮CSS菜单
很酷的菜单
CSS之漂亮区域链接构成的菜单
一个简洁二级导航菜单雏形
简约风格很多人会喜欢的纯CSS导航栏
JS+CSS多个滑动门重复调用封闭类
韩国风格的CSS菜单导航条
一个较酷的层叠式下拉菜单
超酷仿GOOGLE首页导航菜单效果
CSS+JS三级滑动菜单
猜你也喜欢看这些
让IE6不出现图像工具栏
JS横向图片滚动代码,带停顿,滚滚停停
XML时钟
JS打造立体旋转的图片特效
一行代码解决图片放大小图的功能
无缝垂直图片滚动的JS代码
清爽简洁的图片交替导航效果
可以点击控制的手机图片滚动切换
模糊图片
点小图弹出放大图片的JavaScript效果
相关链接:
复制本页链接
|
搜索从页面左侧滑出的导航菜单
特效说明:
菜单导航模板
-
从页面左侧滑出的导航菜单
。