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

JavaScript实现带箭头标识的多级下拉菜单效果

Posted in Javascript onAugust 27, 2015

本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果。分享给大家供大家参考。具体如下：

这是一个支持多级显示的JS菜单，鼠标移向带有小三角的菜单项，可下拉出二级子菜单项，在该主菜单的上方会显示标记，指引当前的位置，本菜单代码使用了一个JS类，可根据代码地址自行下载，这个菜单未在网上测试，用在自己的网站里可能要修改代码。

运行效果截图如下：

JavaScript实现带箭头标识的多级下拉菜单效果

在线演示地址如下：

具体代码如下：

<!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/sample3_main_arrow.gif); width:7px; height:5px; left:-7px; 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/sample3_main_arrow.gif); background-repeat:no-repeat;background-position:top left;}
 #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(images/sample3_sub_arrow.gif); width:5px; height:7px; left:-5px; 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/sample3_sub_arrow.gif); background-repeat:no-repeat;background-position:top left;}
 #imouter0 {background-color:#ffffff; border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; }
 #imenus0 li ul {background-color:#efefef; border-style:solid; border-color:#cccccc; border-width:1px; padding:5px; margin:4px 0px 0px; }
 #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:solid; border-color:#dddddd; border-width:1px; padding:2px 8px; }
 #imenus0 li:hover>a {background-color:#efefef; text-decoration:underline; }
 #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#efefef; text-decoration:underline; }
 #imenus0 li a.iactive {}
 #imenus0 ul a, #imenus0 .imsubc li .imctitle {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; }
 #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:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a>
 <div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;"><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><a href="#">Press Center</a></li>
 <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a>
  <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><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></div></div></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:-23px;left:132px;"><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><a href="#">Customers</a></li>
 </ul></div></div></li>
<li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a>
 <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><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></div></div></li>
<li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a>
 <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><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:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a>
 <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><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/ocscript.js" type="text/javascript"></script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript实现带箭头标识的多级下拉菜单效果

- Author -

企鹅

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

Javascript 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
教你如何用Node实现API的转发（某音乐）
Sep 20 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本（打字特效）
Aug 27 #Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
哥伦比亚购物网站(5) 泰国购物网站(30) 奥地利购物网站(28) 阿联酋购物网站(26) 新西兰购物网站(42) 波兰购物网站(52) 土耳其购物网站(10) 斯洛伐克购物网站(7) 智利购物网站(5) 沙特阿拉伯购物网站(9)
You might like
在DC的漫画和电影中，蝙蝠侠的宿敌，小丑的真名是什么？
2020/04/09 欧美动漫
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
英国手机零售商：Metrofone
2019/03/18 全球购物
澳大利亚最早和最古老的巨型游戏专家：Yardgames
2020/02/20 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
五分钟演讲稿
2014/04/30 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书