教程集 > 脚本编程 > javascript > 正文滑出式菜单

滑出式菜单

发布时间：2016-12-01 编辑：jiaochengji.com

教程集为您提供滑出式菜单等资源，欢迎您收藏本站，我们将为您提供最新的滑出式菜单资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>滑出式菜单</title> <style> </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="大类菜单1" 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) "' menuHeader '</td><td align="center" rowspan="100" width="16" bgcolor="' barBGColor '">

<B>' tempBar '</B>

</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 '"> ' text '</FONT></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="' hdrBGColor '" WIDTH="140"> ' text '</td></tr>')} //Only edit the script between HERE addItem(' 小类菜单1', '#', '_blank'); addItem(' 小类菜单2', '#', '_blank'); addItem(' 小类菜单3', '#', '_blank'); addItem(' 小类菜单4', '#', '_blank'); addItem(' 小类菜单5', '#', '_blank'); addItem(' 小类菜单6', '#', '_blank'); addHdr('大类菜单2'); addItem(' 小类菜单1', '#', '_blank'); addItem(' 小类菜单2', '#', '_blank'); addItem(' 小类菜单3', '#', '_blank'); addItem(' 小类菜单4', '#', '_blank'); addItem(' 小类菜单5', '#', '_blank'); addItem(' 小类菜单6', '#', '_blank'); // and HERE! No more! document.write('<tr><td bgcolor="' hdrBGColor '"> </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></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
7款风格新颖的jQuery/CSS3菜单导航分享
 jQuery水平下拉菜单 jMenu
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 利用JQuery动画制作滑动菜单项效果实现步骤及代码
 jQuery卷帘菜单插件 HoverAccordion
对css滑动门技术的一些总结和归纳
 滑出式菜单
 jQuery 打造动态下滑菜单实现说明
 jQuery菜单插件 Smooth Navigational Menu
jquery弹性滑动导航菜单

上一篇：带Form框说明的导航说明的导航下一篇：非常不错js弹出层效果代码

[关闭]

滑出式菜单

最近更新

浏览排行