jquery实现多级下拉菜单

支持多种浏览器,体验效果:
http://keleyi.com/keleyi/phtml/jqmenu/4.htm

多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>jquery实现多级下拉菜单-柯乐义</title>
  5 <style>
  6 /* navigation style */
  7 #keleyi-com-nav{
  8 height: 39px;
  9 font: 12px Geneva, Arial, Helvetica, sans-serif;
 10 background: #2D2D2D;
 11 border: 1px solid #323232;    
 12 border-radius: 3px;
 13 min-width:500px;
 14 margin-left: 0px;
 15 padding-left: 0px;
 16 }    
 17 
 18 #keleyi-com-nav li{
 19 list-style: none;
 20 display: block;
 21 float: left;
 22 height: 40px;
 23 position: relative;
 24 border-right: 1px solid #323232;
 25 }
 26 
 27 #keleyi-com-nav li a{
 28 padding: 0px 10px 0px 30px;
 29 margin: 0px 0;
 30 line-height: 40px;
 31 text-decoration: none;
 32 border-right: 1px solid #636161;
 33 height: 40px;
 34 color: #FFF;
 35 text-shadow: 1px 1px 1px #66696B;
 36 }
 37 
 38 #keleyi-com-nav ul{
 39 background: #f2f5f6; 
 40 padding: 0px;
 41 border-bottom: 1px solid #DDDDDD;
 42 border-right: 1px solid #DDDDDD;
 43 border-left:1px solid #DDDDDD;
 44 border-radius: 0px 0px 3px 3px;
 45 box-shadow: 2px 2px 3px #ECECEC;
 46 -webkit-box-shadow: 2px 2px 3px #ECECEC;
 47 -moz-box-shadow:2px 2px 3px #ECECEC;
 48 width:170px;
 49 }
 50 #keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{
 51 padding-left: 10px;
 52 padding-right: 10px;
 53 color: #FFF;
 54 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px;
 55 width: 160px;
 56 }
 57 #keleyi-com-nav .site-name a{
 58 width: 129px;
 59 overflow:hidden;
 60 }
 61 #keleyi-com-nav li.facebook{
 62 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px;
 63 }
 64 #keleyi-com-nav li.facebook:hover {
 65 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101;
 66 }
 67 #keleyi-com-nav li.yahoo{
 68 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px;
 69 }
 70 #keleyi-com-nav li.yahoo:hover {
 71 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101;
 72 }
 73 
 74 
 75 #keleyi-com-nav li:hover{
 76 background: #010101;
 77 }
 78 #keleyi-com-nav li a{
 79 display: block;
 80 }
 81 #keleyi-com-nav ul li {
 82 border-right:none;
 83 border-bottom:1px solid #DDDDDD;
 84 width:170px;
 85 height:39px;
 86 }
 87 #keleyi-com-nav ul li a {
 88 border-right: none;
 89 color:#6791AD;
 90 text-shadow: 1px 1px 1px #FFF;
 91 border-bottom:1px solid #FFFFFF;
 92 }
 93 #keleyi-com-nav ul li:hover{background:#DFEEF0;}
 94 #keleyi-com-nav ul li:last-child { border-bottom: none;}
 95 #keleyi-com-nav ul li:last-child a{ border-bottom: none;}
 96 /* Sub menus */
 97 #keleyi-com-nav ul{
 98 display: none;
 99 visibility:hidden;
100 position: absolute;
101 top: 40px;
102 }
103 
104 /* Third-level menus */
105 #keleyi-com-nav ul ul{
106 top: 0px;
107 left:170px;
108 display: none;
109 visibility:hidden;
110 border: 1px solid #DDDDDD;
111 }
112 /* Fourth-level menus */
113 #keleyi-com-nav ul ul ul{
114 top: 0px;
115 left:170px;
116 display: none;
117 visibility:hidden;
118 border: 1px solid #DDDDDD;
119 }
120 
121 #keleyi-com-nav ul li{
122 display: block;
123 visibility:visible;
124 }
125 #keleyi-com-nav li:hover > ul{
126 display: block;
127 visibility:visible;
128 }
129 </style>
130 <!--[if IE 7]>
131 <style>
132 #keleyi-com-nav{
133 margin-left:0px
134 }
135 #keleyi-com-nav ul{
136 left:-40px;
137 }
138 #keleyi-com-nav ul ul{
139 left:130px;
140 }
141 #keleyi-com-nav ul ul ul{
142 left:130px;
143 }
144 </style>
145 <![endif]-->
146 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
147 <script type="text/javascript">
148 $(document).ready(function () {
149 $("#kel"+"eyi-com-nav li").hover(
150 function () {
151 $(this).children('ul').hide();
152 $(this).children('ul').slideDown('fast');
153 },
154 function () {
155 $('ul', this).slideUp('fast');
156 });
157 });
158 </script>
159 </head>
160 <body>
161 <ul id="keleyi-com-nav">
162 <li class="site-name"><a href="http://keleyi.com">&nbsp;</a></li>
163 <li class="yahoo"><a href="http://keleyi.com">导航菜单</a>
164 <ul>
165 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">导航菜单二级分类 &raquo;</a> 
166 <ul>
167 <li><a href="http://keleyi.com">1</a></li>
168 <li><a href="http://keleyi.com/a/bjac/r55i6646.htm">2</a></li>
169 <li><a href="http://keleyi.com">3</a></li>
170 <li><a href="http://keleyi.com">导航菜单三 &raquo;</a>
171 <ul>
172 <li><a href="http://keleyi.com">导航菜单4</a></li>
173 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm">1</a></li>
174 </ul>
175 </li>
176 </ul>
177 </li>
178 <li><a href="http://keleyi.com">1</a></li>
179 <li><a href="http://keleyi.com">2</a></li>
180 </ul>
181 </li> 
182 <li class="facebook"><a href="http://keleyi.com">翻页</a>
183 <ul>
184 <li><a href="http://keleyi.com">1</a></li>
185 <li><a href="http://keleyi.com">2</a></li>
186 </ul>
187 </li>
188 </ul>
189 </body>
190 </html>

更多菜单:http://keleyi.com/a/bjac/veugsmw9.htm

Web前端资源汇总:http://www.cnblogs.com/jihua/p/webfront.html

原文:http://keleyi.com/a/bjac/qe60secm.htm

转载于:https://www.cnblogs.com/jihua/p/jquerymenu.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

listActivity和ExpandableListActivity的简单用法

今天自己简单的总结了listActivity和ExpandableListActivity二者的简单用法。 首先&#xff0c;先说一下listActivity的用法&#xff1a; ListActivity是一个绑定到一个数据源&#xff0c;并且用来显示这一串数据的Activity。ListActivity拥有一个listview对象来实现数据源的绑…

搭建git for windows服务器(100%可以成功)【转】

转自&#xff1a;http://blog.csdn.net/code_style/article/details/38764203 既然Git在linux下面非常好用&#xff0c;为什么还要搭建git windows的服务器&#xff0c;因为不是所有的用户都需要在linux下面做开发&#xff0c;对吧&#xff0c;还有很多用户选择使用windows做开…

eclipser认java源码_java相关:Eclipse查看开发包jar里源代码的方法

java相关&#xff1a;Eclipse查看开发包jar里源代码的方法发布于 2020-5-21|复制链接摘记: Eclipse查看开发包jar里源代码的方法前言&#xff1a;最近我打算学习一下谷歌的类库Guava&#xff0c;下载了Guava-r09.jar包及其源码&#xff0c;为了可以方面的看其源码&#xff0c;我…

php归档函数(按时间)实现

今日开发本站需要用到按时间归档文章的功能&#xff0c;即按文档发布时间将文章文类&#xff0c;以实现检索和统计功能&#xff0c;于是自己写了一个&#xff0c; 现分享给大家&#xff0c;相信大家工作和学习中有可能会用到&#xff0c;实现原理很简单&#xff0c;即取出文章发…

【转】高性能WEB开发系列之重绘与回流

原文转载&#xff1a;http://www.cnblogs.com/wangzhichao/archive/2011/05/16/2047633.html页面呈现流程 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解&#xff0c;页面是怎么把html结合css等显示到浏览器上的&#xff0c;下面的流程图显示了浏览器对页面的呈现的…

java字符串颠倒位置_java字符串第一个字符与最后一个字符颠倒位置测试

最近做了一个需求&#xff0c;就是 通过OA 连接到我们系统&#xff0c;然后request里 带有base64加密后的字符串&#xff0c;并且第一个与最后一个位置颠倒了&#xff0c;所以需要先恢复正常的加密串&#xff0c;然后在解密。所以首先工作是 先测试还原加密串&#xff0c;就是第…

C#自定义特性实例

元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释. 1、什么是特性 &#xff08;1&#xff09;属性与特性的区别 属性(Property)&#xff1a;属性是面向对象思想里所说的封装在类里面的数据字段&#xff0c;Get&#xff0c;Set方法。 特性(Attribute): …

UVA 10054 the necklace 欧拉回路

有n个珠子&#xff0c;每颗珠子有左右两边两种颜色&#xff0c;颜色有1~50种&#xff0c;问你能不能把这些珠子按照相接的地方颜色相同串成一个环。 可以认为有50个点&#xff0c;用n条边它们相连&#xff0c;问你能不能找出包含所有边的欧拉回路 首先判断是否在一个联通分量中…

解决tsvncache.exe引起电脑慢的问题

如果你觉得SVN的cache程序使得你的机器反应很慢的话,那可以参考这个方案.不过可能要改变你以前使用习惯.这个方案有两部分,第一部分是关闭SVN的cache监视;第二部分是显示文件差异时,使用SVN的“check for modifications”显示差异。 1.关闭SVN的cache监视。即关闭tsvncache.exe…

重构-改善既有代码的设计(1)

1&#xff0c;建立可靠地测试环境 2,寻找要重构的代码&#xff08;函数或者类&#xff09; 一般为比较长的函数&#xff0c;或者逻辑混乱的类 3&#xff0c;重构后的函数要修改局部变量&#xff0c;增加程序的可读行 4&#xff0c;函数应该放在它所使用的数据的所属对象内&…

[数据结构与算法] 单链表的简单demo

Vc6之下编译通过。。 1 /*******************************************************2 * : Project: 单链表数据结构演示3 * : File: link_list.h4 * : Function&#xff1a; 提供单链表操作的数据结构定义及方法声明5 * : History: 2013-10-01 22:37:056 * : Auth…

c++ 17介绍

作者&#xff1a;hearts zh链接&#xff1a;https://www.zhihu.com/question/32222337/answer/55238928来源&#xff1a;知乎著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。其实现在的proposal很多很多&#xff0c;不出意外也会有相当一部分…

HTML5本地存储不完全指南

历史 在HTML5本地存储之前&#xff0c;如果我们想在客户端保存持久化数据&#xff0c;有这么几个选择&#xff1a; HTTP cookie。HTTP cookie的缺点很明显&#xff0c;最多只能存储4KB的数据&#xff0c;每个HTTP请求都会被传送回服务器&#xff0c;明文传输&#xff08;除非你…

php面向对象编程详解,PHP面向对象编程

3.3 类的定义和实例化date_default_timezone_set("PRC");/*** 1. 类的定义以class关键字开始&#xff0c;后面跟着这个类的名称。类的名称命名通常每个单词的第一个字母大写。* 2. 定义类的属性* 3. 定义类的方法* 4. 实例化类的对象* 5. 使用对象的属性和方法*/c…

[Postgres]Postgres复制表

在需要把含有分表的总表备份的时候想到的笨办法&#xff0c;如果有什么更先进的办法万望告知。 比如TableOld是由TableOld1,TableOld2,TableOld3组合而成&#xff0c;现在需要对TableOld进行备份。 复制表带数据 select * into TableNew from TableOld; 复制表结构 select * in…

“高考”机器人横空出世 2017年居然要考“大学”

文/辛东方&#xff0c;80后作家、专栏作者、专注互联网科技领域人工智能的发展&#xff0c;科学技术的全力配合&#xff0c;已经把人类的智慧实实在在的体现到了智能化设备上。按照目前的发展速度&#xff0c;人工智能要想真正突破技术难关&#xff0c;达到进一步的智能化&…

谁说菜鸟不会数据分析--数据分析那些事儿

一、数据分析是“神马” 1、 何谓数据分析 简单来说&#xff0c;数据分析就是对数据进行分析&#xff0c;较为专业的说法&#xff0c;数据分析是指用适当的统计分析方法对收集来的大量数据进行分析&#xff0c;将它们加以汇总、理解并消化&#xff0c;以求最大化地开发数据的功…

优集品 php,从细节处着眼 优集品打造成人世界的儿童节

在各大电商企业仍旧在史上最大规模的价格战中拼的不可开交之时&#xff0c;重视用户体验度&#xff0c;以商品传递生活理念而知名的全球优选设计百货--LivePort优集品(http://www.liveport.cn/)&#xff0c;已然细心的为眼下即将来临的六一儿童节策划了一餐盛宴&#xff0c;为追…

百万级并发 Node.js也能行

http://www.csdn.net/article/2012-08-21/2808861 转载于:https://www.cnblogs.com/myblog1314/p/3365157.html

云服务器与传统服务器的优势差异

云服务器对比传统服务器的优势 一&#xff0e;云服务器是云计算服务的重要组成部分&#xff0c;是面向各类互联网用户提供综合业务能力的 服务平台。平台整合了传统意义上的互联网应用三大核心要素&#xff1a;计算、存储、网络&#xff0c;面向用户提供公用化的互联网基础设施…