JavaScript实现向右伸出的多级网页菜单效果

本文实例讲述了Java脚本语言实现向右伸出的多级网页菜单效果。分享给大家供大家参考。具体如下：

这里使用Java脚本语言实现向右伸出的多级网页菜单效果，鼠标放在左侧的主菜单上，右侧就伸展出二级菜单，基本没有美化，新手所写，欢迎指正，需要完善的地方还挺多。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-right-show-web-menu-codes/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML lang=' EN ' hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题向右伸出的多级菜单/title style type=' text/CSS ' * { padd :0；margin:0} Li {列表式：无；}ul{background:rgb(200，13，34)；宽度宽度：250 pxfloat 3360 leftb { display : block宽度宽度：500像素高度：40 px背景：rgb(24，122，173)；} ul Li { height :32 px } ul Li :悬停{ height :32 px背景：橙色；} # nav 1 { position : absolute } # nav 3 { position : relative eleft :0背景：绿色；可见性：隐藏；}/style/head body div id=' nav 1 ' ul id=' nav 2 ' Li文学/li li艺术/li li摄影/Li/ul ul ul id=' nav 3 ' li1-1/Li Li 2-1/Li Li-1/Li/ul/div脚本类型=' text/JavaScript ' var focus=false；var showdiv=文档。getelementbyid(' nav 3 ')；展示区。onmouseover=function(){ focus=true；这个。风格。可见性='可见'；} showdiv。onmouseout=function(){ focus=false；this.style.visibility="隐藏";}函数绑定切换(索引，标志){ var showdiv=document。GetElementByID(' nav 3 ')；var delayshow=function(){ if(flag==1){ show div。风格。可见性='可见'；展示区。风格。top=index * 32 ' px}else { if(！焦点){ showdiv。风格。可见性='隐藏'；} } } return function(){ setTimeout(延迟显示，150)；} } var menu=document。getelementbyid(' nav 2 ').childNodesvar索引=0;for(var I=0；长度；i ){ if(1==menu[i]).nodeType){ 0菜单[i].onmouseover=bindToggle.call(菜单[i]，索引，1);菜单[i].onmouseout=bindToggle.call(菜单[i]，索引，0);指数；} }/脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。