首页
所有分类
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 使用个人心得
Feb 26 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
ES6新特性一： let和const命令详解
Apr 20 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
EJB面试题(46) MySQL面试题(19) UNIX面试题(27) Javascript面试题(44) C#面试题(90) PYTHON面试题(27) Oracle面试题(81) 软件测试工程师面试题(53) 软件工程师面试题(40) LINUX面试题(83)
You might like
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python条件和循环的使用方法
2013/11/01 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python字典排序的方法
2019/10/12 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
基于matplotlib xticks用法详解
2020/04/16 Python
浅析Python requests 模块
2020/10/09 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
Fashion Eyewear美国：英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
英国最大的宠物商店：Pets at Home
2019/04/17 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
中秋节主题班会
2015/08/14 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL