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

js实现向右横向滑出的二级菜单效果

Posted in Javascript onAugust 27, 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]--><!--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;}
 /* --[[ Sub Expand Icons ]]-- */
 #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程序设计有所帮助。

js实现向右横向滑出的二级菜单效果

- Author -

企鹅

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

Javascript 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
javascript整除实现代码
Nov 23 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
Vue响应式原理详解
Apr 18 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 #Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 #Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
接收函(23) 方案(1080) 感言(394) 制度(225) 答谢词(97) 教学反思(909) 证明书(326) 广播稿(323) 计划书(118) 寄语(276)
You might like
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
javascript制作2048游戏
2015/03/30 Javascript
vue.js入门（3）——详解组件通信
2016/12/02 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
js实现简单模态框实例
2018/11/16 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[02:07]DOTA2超级联赛专访BBC：难忘网吧超神经历
2013/06/09 DOTA
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
外包公司软件测试工程师
2014/11/01 面试题
教师找工作推荐信
2013/11/23 职场文书
关于人生的感言
2014/01/17 职场文书
税务会计岗位职责
2014/02/18 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
优秀家长事迹材料（2016推荐版）
2016/02/29 职场文书