首页
所有分类
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数组长度循环数组内所有元素
Dec 27 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
Angular2学习笔记——详解路由器模型（Router）
Dec 02 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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
DE1103(2) SONY600GR(1) DE1105(1) DE1107(3) R9700(1) WR-800F(1) 239军机(1) DE1102(1) 胆机(1) 根德5570(1)
You might like
曾在DC漫画界反派角色扮演的演员，谁才是你心目中的小丑之王？
2020/04/09 欧美动漫
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
AngularJS 避繁就简的路由
2016/07/01 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现扫描局域网活动ip（扫描在线电脑）
2015/04/28 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
使用python接入微信聊天机器人
2020/03/31 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
HTML5 拖放（Drag 和 Drop）详解与实例代码
2017/09/14 HTML / CSS
英国珠宝和手表专家：Pleasance & Harper
2020/10/21 全球购物
个人授权委托书格式
2014/08/30 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
横店影视城导游词
2015/02/06 职场文书
营运督导岗位职责
2015/04/10 职场文书
唐山大地震的观后感
2015/06/05 职场文书
红色经典观后感
2015/06/18 职场文书