首页
所有分类
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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
javascript实现表单提交后，提交按钮不可用的方法
Apr 18 Javascript
ECMA5数组的新增方法有哪些及forEach（）模仿实现
Nov 03 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
vue中英文切换实例代码
Jan 21 Javascript
Vue实现简单计算器案例
Feb 25 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
DHCP(2) Repository接口(3) 主题(1) JAVA(88) 线程池(1) Android(19) Spring Data JPA(4) Ubuntu Server(6) 池化技术(1) systemctl(1)
You might like
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
实例讲解JavaScript预编译流程
2019/01/24 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python3实现mysql导出excel的方法
2019/07/31 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
马来西亚奢侈品牌购物商城：Valiram 247
2020/09/29 全球购物
Linux机考试题
2015/10/16 面试题
采购主管岗位职责
2014/02/01 职场文书
工程材料采购方案
2014/05/18 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2015年元旦文艺晚会总结（学院）
2014/11/28 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
Hive日期格式转换方法总结
2022/06/25 数据库
volatile保证可见性及重排序方法
2022/08/05 Java/Android