首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 28, 2015

本文实例讲述了js实现带圆角的多级下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款酷黑的圆角多级下滑菜单，可支持三级，鼠标放上后可见到滑出的菜单，调用了一个JS封装库，代码有些复杂，有兴趣的可研究。

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!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="#"><span class="imea imeam"><span></span></span>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="#"><span class="imea imeas"><span></span></span>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="#"><span class="imea imeas"><span></span></span>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="#"><span class="imea imeam"><span></span></span>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="#"><span class="imea imeam"><span></span></span>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="#"><span class="imea imeam"><span></span></span>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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript闭包的高级使用方法实例
Jul 04 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
仿京东快报向上滚动的实例
Dec 13 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
npm的lock机制解析
Jun 20 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 #Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 #Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 #Javascript
Angular Js文件上传之form-data
Aug 28 #Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 #Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
双人对弈(1) 2022年7月新番(1) 后端(1) SSH(3) 时钟(1) 算法(1) 人人对战(1) Parser(1) Vscode(3) tokenizer(1)
You might like
PHP数据过滤的方法
2013/10/30 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
django orm模块中的 is_delete用法
2020/05/20 Python
大学生就业自荐信
2013/10/26 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
学习决心书范文
2014/03/11 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
项目申请汇报材料
2014/08/16 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
转正申请报告格式
2015/05/15 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
建议书的格式及范文
2015/09/14 职场文书