首页
所有分类
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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
详解小程序毫秒级倒计时（适用于拼团秒杀功能）
May 05 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
REST(1) openEuler(1) Switch(1) Spring JPA(1) EditText(1) Spring Bean(1) 慢日志(1) 远程桌面(2) exists(2) cmd(1)
You might like
PHP中关键字interface和implements详解
2017/06/14 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript和JQuery实用代码片段（一）
2010/04/07 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
JavaScript常用工具函数汇总（浏览器环境）
2020/09/17 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python字符串匹配算法KMP实例
2015/07/18 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python实现点对点聊天程序
2018/07/28 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python利用ORM控制MongoDB（MongoEngine）的步骤全纪录
2018/09/13 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
毕业自荐书
2013/12/09 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
个人买房协议书范本
2014/10/06 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年库房工作总结
2015/04/30 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
监守自盗观后感
2015/06/10 职场文书
导游带团欢迎词
2015/09/30 职场文书
纪律委员竞选稿
2015/11/19 职场文书