来自 系统操作 2019-09-04 19:50 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

js实现带圆角的多级下拉菜单效果,js实现带圆角

正文实例呈报了js完成带圆角的两级导航菜单功能代码。分享给大家供大家参照他事他说加以考察。具体如下:

本文实例呈报了js达成带圆角的再而三串下拉菜单效果。分享给我们供大家参考。具体如下:

这是一款应用JS做的圆角菜单,帮助两级菜单呈现,本身相比欣赏的作风,修改使用方便,菜鸟也能上心灵。使用有几张圆角图片来修饰了菜单,喜欢的爱人能够下载代码留作收藏使用。真心不错大巴林蓝导航条代码。

这是一款酷黑的圆角多级下滑菜单,可支撑三级,鼠标放上后可知到滑出的菜谱,调用了贰个JS封装库,代码有个别复杂,风乐趣的可钻探。

运营效果截图如下:

运作效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

切切实实代码如下:

现实代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圆角蓝色横向二级菜单代码,鼠标经过显示子菜单</title>
<script> 
function MM_reloadPage(init) {
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
 obj.visibility=v; }
}
</script> 
<style type="text/css">
body {font-family:5B8B4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}
li{list-style-type:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.topmenu{width:980px;height:42px; margin:0 auto;position: relative;left:0px; top:0px;background:url('images/nav_li_bg.gif') repeat-x right center;}
.topmenu .nav_content{padding-left:25px;background:url('images/nav_li_left.gif') no-repeat;float:left;}
.topmenu .nav_content li{width:126px;height:42px;float:left;line-height:42px;background:url('images/nav_li_line.gif') no-repeat right;text-align:center;font-weight:bold;}
.topmenu .nav_content li a{color:#fff;width:126px;height:42px;display:block;}
.topmenu .nav_content li.current a{width:126px;height:42px;line-height:42px;display:block;color:#fff;}
.topmenu .nav_content li.current a:hover{line-height:42px;}
.topmenu .nav_content li a:hover{line-height:42px;text-decoration:none;background:url('images/nav_li_hover.gif') no-repeat;color:#000;}
.topmenu .nav_content li.end{background: none;}
.topmenu .nav_content li.right{padding-left:47px;width:26px;background:url('images/nav_li_right.gif') no-repeat right top;height:42px;}
.submenu{visibility: hidden;position:absolute;top:42px;left:0;background:url('images/sub_li_bg.gif') repeat-x right top;}
.submenu .subnav{padding-left:33px;background:url('images/sub_li_left.gif') no-repeat;float:left;}
.submenu .subnav li{height40px;float:left;background:url('images/arrow.gif') no-repeat left 15px;}
.submenu .subnav li a{color:#333;display:block;padding:0 12px;line-height:40px; text-decoration:none;}
.submenu .subnav li a:hover{color:#0a4aaa;text-decoration:none;}
.submenu .subnav li.subright{width:33px;background:url('images/sub_li_right.gif') no-repeat right top;height:40px;}
#Layer1{left:30px;}
#Layer2{left:80px;}
#Layer3{left:280px;}
#Layer4{left:400px;}
#Layer5{left:auto;right:80px;}
</style>
</head>
<body>
<div style="height:70px;"></div>
<div class="topmenu">
<div class="nav_content">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">网页特效</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">电子商务</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')">导航条</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')">网络广告</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')">搜索引擎</a></li>
<li><a href="#" >关于我们</a></li>
<li class="right"></li>
</ul>
</div>
<div id="Layer1" class="submenu" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">源码下载</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">电子商务</a></li>
  <li><a href="">营销外包</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer2" class="submenu" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">编程书籍</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">商务人才</a></li>
  <li><a href="">网络外包</a></li>
  <li><a href="">电子商务</a></li>
  <li><a href="">导航条代码</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer3" class="submenu" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">论坛社区</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">电子商务人才</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer4" class="submenu" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">教程文章</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">网站分类</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer5" class="submenu" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">最新更新</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">分类信息网</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
</div>
</body>
</html>
<!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]--><!-- ****** Infinite Menus Rounded Corners Add-On ****** -->
<script language="JavaScript" type="text/javascript">
 ulm_round_corner_size_main = 2;
 ulm_round_corner_size_sub = 2;
</script>
<div id="ssimrc" style="position:absolute;visibility:hidden;"><style type="text/css">.imgl .imrc{font-size:1px;line-height:0px;height:1px;border-width:0px;border-style:solid;border-right-width:1px;border-left-width:1px;}.imgl .imbrc{border-width:0px;border-bottom-width:1px;height:0px;}</style></div><!--[if lte IE 6]><style type="text/css">.imgl .imrc{overflow:hidden;}.imgl .imroundcorner{height:1px;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imgl .imroundcorner{zoom:1;}</style><![endif]--><script language="JavaScript" type="text/javascript">;function im_round_corners(tb,ms,isget,inner){var size=window["ulm_round_corner_size_"+ms];var pos=0;var wv="";if(!inner)wv+='<div class="imroundcorner" imrctype="'+tb+'" imrcgroup="'+ms+'">';if(tb=="top"){wv+=im_rcs(size,1," imtopspace");for(var i=size-1;i>=0;i--)wv+=im_rcs(i);}else {for(var i=0;i<size;i++)wv+=im_rcs(i);wv+=im_rcs(size,1,"");}if(!inner)wv+='</div>';if(isget)return wv;else document.write(wv);};function im_rcs(pos,is_cap,topclass){if(is_cap)return '<div class="imrbcolor imrc imbrc'+topclass+'" style="margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';else return '<div class="imrbcolor imrcolor imrc" style="vertical-align:top;margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';}</script>
<!--end-->
<!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. -->
<style type="text/css">
 /* --[[ Main Expand Icons ]]-- */
 #imenus0 .imeam span,#imenus0 .imeamj span {width:9px; height:9px; left:-10px; top:5px; background-repeat:no-repeat;background-position:top left;}
 #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-repeat:no-repeat;background-position:top left;}
 /* --[[ Sub Expand Icons ]]-- */
 #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(images/small_red_pointer.gif); width:7px; height:8px; left:-8px; 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/small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;}
 /* --[[ Main Container ]]-- */
 #imouter0 {background-color:#546347; border-style:solid; border-color:#000000; border-width:0px 1px; padding:0px 2px; margin:0px; }
  /* [Rounded Corner Styles] */
  .imrcmain0 .imrcolor {background-color:#546347; }
  .imrcmain0 .imrbcolor {border-color:#444444; }
  .imrcmain0 .imtopspace {height:0px; }
 /* --[[ Sub Container ]]-- */
 #imenus0 li ul {background-color:#cce7bc; border-style:solid; border-color:#a2a2a2; border-width:0px 1px; padding:5px 7px; }
  /* [Rounded Corner Styles] */
  #imenus0 .imrcolor {background-color:#cce7bc; }
  #imenus0 .imrbcolor {border-color:#a2a2a2; }
  #imenus0 .imtopspace {height:6px; }
 /* --[[ Main Items ]]-- */
 #imenus0 li a, #imenus0 .imctitle {color:#ffffff; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:2px 5px 2px 12px; }
  /* [hover] - These settings must be duplicated for IE compatibility.*/
  #imenus0 li:hover>a {background-color:#cce7bc; color:#546347; }
  #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#cce7bc; color:#546347; }
  /* [active] */
  #imenus0 li a.iactive {}
 /* --[[ Sub Items ]]-- */
 #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; }
  /* [hover] - These settings must be duplicated for IE comptatibility.*/
  #imenus0 ul li:hover>a {background-color:transparent; color:#cc0000; }
  #imenus0 ul li a.ihover {background-color:transparent; color:#cc0000; }
  /* [active] */
  #imenus0 ul li a.iactive {background-color:#ffffff; }
  /* [Dividers] */
  #imenus0 .dvs {border-bottom-width:1px; border-style:dotted; border-color:#546347; padding-bottom:4px; margin-bottom:4px; }
</style><!--end-->
</head>
 <body>
<!--|**START IMENUS**|imenus0,inline-->
<!-- ****** Infinite Menus Structure & Links ***** -->
<div class="imrcmain0 imgl" style="width:538px;z-index:999999;position:relative;"><script language="JavaScript" type="text/javascript">im_round_corners("top","main");</script><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm" style="width:140px;"><a class="" href="#">Who We Are</a>
<div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style="">
 <li><a href="#">Overview</a></li>
 <li><a href="#">Mission & Goals</a></li>
 <li><a href="#">History</a></li>
 <li><a href="#">Management</a></li>
 <li><a href="#">Working at Tyco</a></li>
 <li class="dvs"><a href="#">Press Center</a></li>
 <li><a href="#">Board of Directors</a>
  <div class="imsc"><div class="imsubc" style="width:140px;top:-26px;left:127px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><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><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
 <li class="dvs"><a href="#">Worldwide</a>
  <div class="imsc"><div class="imsubc" style="width:140px;top:-26px;left:127px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style="">
  <li><a href="#">Europe</a></li>
  <li><a href="#">Asia</a></li>
  <li><a href="#">US & Canada</a></li>
  <li><a href="#">Mexico</a></li>
  <li><a href="#">Australia</a></li>
  <li><a href="#">Middle East</a></li>
  </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
 <li><a href="#">Customers</a></li>
 </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
<li class="imatm" style="width:142px;"><a href="#">Our Commitment</a>
<div class="imsc"><div class="imsubc" style="width:142px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style="">
 <li><a href="#">Overview</a></li>
 <li><a href="#">People & Values</a></li>
 <li><a href="#">Governance</a></li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Environmental</a></li>
 </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
<li class="imatm" style="width:125px;"><a href="#">Our Business</a>
<div class="imsc"><div class="imsubc" style="width:125px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><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</a></li>
 <li><a href="#">Engineered Producs</a></li>
 <li><a href="#">Tyco Worldwide</a></li>
 </ul>
<script language="JavaScript" type="text/javascript">
im_round_corners("bottom","sub");
</script>
</div></div></li>
<li class="imatm" style="width:125px;"><a href="#">Investors</a>
<div class="imsc"><div class="imsubc" style="width:126px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style="">
 <li><a href="#">Overview</a></li>
 <li><a href="#">Stock Quotes</a></li>
 </ul><script language="JavaScript" type="text/javascript">
im_round_corners("bottom","sub");
</script>
</div></div></li>
</ul><div class="imclear"> </div></div><script language="JavaScript" type="text/javascript">im_round_corners("bottom","main");</script></div>
<script language="JavaScript" src="ocscript.js" type="text/javascript"></script>
</body>
</html>

愿意本文所述对大家的javascript程序设计有所支持。

目的在于本文所述对大家的javascript程序设计有着支持。

您也许感兴趣的篇章:

  • js达成带圆角的层层下拉菜单效果
  • JS+CSS实现自适应选项卡宽度的圆角滑动门效果
  • js+css实现的圆角边框TAB选项卡滑动门代码共享(2款)
  • JS+CSS完结可拖拽的优良圆角特效弹出层完整实例
  • JS完毕样式清新的排名下拉菜单效果
  • JS+CSS绝对定位实现的下拉菜单
  • js达成兼容性好的微软官方网站导航下拉菜单效果
  • js+css实现超简洁的二级下拉菜单效果代码
  • JS+CSS达成的经文圆角下拉菜单效果代码

你也许感兴趣的稿子:

  • js实现带圆角的两级导航菜单功效代码
  • JS+CSS达成自适应选项卡宽度的圆角滑动门效果
  • js+css达成的圆角边框TAB选项卡滑动门代码分享(2款)
  • JS+CSS完成可拖拽的神奇圆角特效弹出层完整实例
  • JS完结样式清新的排名下拉菜单效果
  • JS+CSS相对定位完成的下拉菜单
  • js落成包容性好的微软官方网址导航下拉菜单效果
  • js+css达成超简洁的二级下拉菜单效果代码
  • JS+CSS达成的经典圆角下拉菜单效果代码

本文由六合联盟网发布于系统操作,转载请注明出处:js实现带圆角的多级下拉菜单效果,js实现带圆角

关键词: