首页
所有分类
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 相关文章推荐
javascript 学习笔记（六）浏览器类型及版本信息检测代码
Apr 08 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
javascript实现倒计时关闭广告
Feb 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
Tkinter(4) sortInts(1) Pool(1) GUI(2) feDisplacementMap(1) agg(1) Hudi(1) 数据处理(2) apply(1) WebSockets(3)
You might like
再说下636单管机
2021/03/02 无线电
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python实现各进制转换的总结大全
2017/06/18 Python
python多进程控制学习小结
2018/10/31 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python networkx包的实现
2020/02/14 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
世界第一曲奇连锁店：Mrs. Fields Cookies
2017/02/04 全球购物
迪卡侬印尼体育用品商店：Decathlon印尼
2020/03/11 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
房屋授权委托书范本
2014/10/07 职场文书
毕业生评语大全
2015/01/04 职场文书
车辆管理制度范本
2015/08/05 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android