jquery实现多级下拉菜单

最新推荐文章于 2022-09-12 01:08:12 发布

xiaozhen0610

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量1k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjc0aj2a01ab.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

支持多种浏览器，体验效果：
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>

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

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

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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.
复制链接

扫一扫