核心产品
帮助中心
时间：2021-05-26
本文实例讲述了js实现向右横向滑出的二级菜单效果。分享给大家供大家参考。具体如下：
这是一个网页上的横向滑出二级菜单，菜单是竖向排列的，但二级子菜单项是向右横向滑出的，引入了一个JS封装库文件，这个菜单兼容性方面也做的挺好，只是觉得，菜单中有些代码不便于修改，有兴趣的自己看看吧。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-web-right-show-out-2l-menu-codes/
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>横向滑出的二级菜单</title><!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --><style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*/.imcm .imea{visibility:hidden;}</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--><!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --><style type="text/css"> #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(images/light_arrow_right.gif); width:6px; height:9px; left:-6px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(images/light_arrow_right.gif); background-repeat:no-repeat;background-position:top left;} #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(images/medium_purple_right.gif); width:6px; height:9px; left:-6px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(images/medium_purple_right.gif); background-repeat:no-repeat;background-position:top left;} #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } #imenus0 li ul {background-color:#d3d2df; border-style:solid; border-color:#333333; border-width:1px; padding:5px; margin:4px 0px 0px; } #imenus0 li a, #imenus0 .imctitle {height:20px; background-color:#585575; color:#dddddd; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; border-style:none; border-color:#ffffff; border-width:1px; padding:2px 8px; margin:0px 0px 2px; } #imenus0 li:hover>a {text-decoration:underline; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; } #imenus0 li a.iactive {} #imenus0 ul a, #imenus0 .imsubc li .imctitle {height:auto; background-color:transparent; color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; margin:0px; } #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } #imenus0 ul li a.iactive {background-color:#ffffff; }</style><!--end--></head><body><div class="imrcmain0 imgl" style="width:149px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"><li class="imatm" style="width:100%;"><a class="" href="#"><span class="imea imeam"><span></span></span>我是谁</a> <div class="imsc"><div class="imsubc" style="width:145px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">成龙</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">周华健</a></li> <li><a href="#">Management</a></li> <li><a href="#">学友</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>世界好大</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:138px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">美国</a></li> <li><a href="#">晋州</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">海州</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>海归之乡</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:138px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">故乡有云</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">回来吧</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">自定义</a></li> </ul></div></div></li><li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">预览项目</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">政府部门</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li><li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li><li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li></ul><div class="imclear"> </div></div></div><script language="JavaScript" src="images/ocscriptmain.js" type="text/javascript"></script></body></html>希望本文所述对大家的javascript程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下：这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，
本文实例为大家分享了vue.js实现二级菜单效果的具体代码，供大家参考，具体内容如下主要是对二级菜单和当前点击的处理：点击导航时，如果有二级菜单，就切换二级菜单
本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码。分享给大家供大家参考。具体如下：这里需要鼠标点击激活的网页左上角菜单，不点击不会滑出来，可以改造成二级菜单
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：这是一款CSS配合JavaScript实现二级下拉导航菜单，好像CSS
先给大家看一看最终的效果图：下面就是js实现二级菜单渐隐显示的代码：导航菜单二级菜单滑动渐隐显示{margin:0;padding:0;list-style-t
