基于jquery的大众点评，分类导航实现代码

简单 轻盈 快速 高效！

html结构：

1. <div id="menu">
   
2. <ul id="G_chan-panel" class="pop-panel pp_channels Fix" style="position: absolute; visibility: visible; z-index: 1001; top: 175px; left: 189px; ">
   
3. <li class="root-item "> <a href="#" class="root-name"><span>餐饮</span></a>
   
4. <ul class="pop-panel Fix sub-list">
   
5. <li class="main-cate"><a href="#">餐饮频道</a></li>
   
6. <li><a href="#">粤菜</a></li>
   
7. ...
   
8. </ul>
   
9. </li>
   
10. <li class="root-item"> <a href="#" class="root-name"><span>购物</span></a>
    
11. <ul class="pop-panel Fix sub-list">
    
12. <li class="main-cate"><a href="#">购物频道</a></li>
    
13. <li><a href="#">超市/便利店</a></li>
    
14. ...
    
15. <li><a href="#">其他</a></li>
    
16. </ul>
    
17. </li>
    
18. </ul>
    
19. </div>

复制代码

jquery代码：

1. <script type="text/javascript">
   
2. $(function () {
   
3. $('#G_chan-panel').delegate("li", "mouseenter", function () { $(this).addClass("active") });
   
4. $('#G_chan-panel').delegate("li", "mouseleave", function () { $(this).removeClass("active") });
   
5. });
   
6. </script>

复制代码

css样式：

1. BODY {
   
2. background-color:#fff;
   
3. color:#555;
   
4. font: 9pt/14px Tahoma, "宋体", Arial, Helvetica, Sans-Serif;
   
5. letter-spacing: 0;
   
6. margin: 0;
   
7. }
   
8. html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe, object, pre, code, legend, blockquote {
   
9. border: 0 none;
   
10. margin: 0;
    
11. outline: 0 none;
    
12. padding: 0;
    
13. }
    
14. h1, h2, h3, h4, h5, h6 {
    
15. font-size: 100%;
    
16. font-weight: normal;
    
17. }
    
18. UL, LI {
    
19. list-style: none outside none;
    
20. margin: 0;
    
21. padding: 0;
    
22. }
    
23. IMG {
    
24. border: medium none;
    
25. margin: 0;
    
26. padding: 0;
    
27. cursor:pointer;
    
28. }
    
29. input, img, select {
    
30. vertical-align: middle;
    
31. }
    
32. A {
    
33. color: #666666;
    
34. }
    
35. A:link {
    
36. color: #666666;
    
37. text-decoration: none;
    
38. }
    
39. A:visited {
    
40. color: #666666;
    
41. text-decoration: none;
    
42. }
    
43. A:hover {
    
44. color: #C90809;
    
45. text-decoration: none;
    
46. }
    
47. /*导航*/
    
48. .pp_channels .root-item, .pp_channels .root-name, .pp_channels .root-name span, .pp_channels .sub-list li a {
    
49. background-image: url("bg.png");
    
50. background-repeat: no-repeat;
    
51. }
    
52. .G_chan-panel {
    
53. position: absolute;
    
54. z-index: 1000;
    
55. top: 120px;
    
56. left: 199px;
    
57. visibility: hidden;
    
58. }
    
59. .pp_channels {
    
60. width: 138px;
    
61. padding: 0;
    
62. border-width: 0 0 2px 1px;
    
63. border-radius: 5px;
    
64. -webkit-border-radius: 5px;
    
65. -moz-border-radius: 5px;
    
66. -moz-box-shadow: -1px 1px 1px #ccc;
    
67. -webkit-box-shadow: 0 1px 5px #ccc;
    
68. box-shadow: 0 1px 5px #ccc;
    
69. }
    
70. .pp_channels .root-item {
    
71. zoom: 1;
    
72. position: relative;
    
73. width: 139px;
    
74. height: 34px;
    
75. background-position: -13px -373px;
    
76. overflow: visible;
    
77. vertical-align: middle;
    
78. }
    
79. .pp_channels .root-name {
    
80. display: block;
    
81. z-index: 1001;
    
82. position: relative;
    
83. border-top:1px solid #B9F5D2;
    
84. padding-left: 10px;
    
85. background-position: -10px -358px;
    
86. cursor: pointer;
    
87. }
    
88. .pp_channels .root-name span {
    
89. display: block;
    
90. border-right: 1px solid #B9F5D2;
    
91. padding-left: 9px;
    
92. height: 34px;
    
93. font-size: 1.2em;
    
94. line-height: 34px;
    
95. color: #000;
    
96. background-position: -167px -358px;
    
97. }
    
98. .pp_channels .active .root-name {
    
99. background: #fff;
    
100. }
     
101. .pp_channels .active .root-name span {
     
102. color: #C00;
     
103. border-color: #fff;
     
104. }
     
105. .pp_channels .no-sub .root-name span {
     
106. border-color: #fff;
     
107. background-position: 20px -358px;
     
108. }
     
109. .pp_channels .sub-list {
     
110. left: 138px;
     
111. top: -34px;
     
112. padding: 5px 2px 5px 16px;
     
113. width: 200px;
     
114. overflow: hidden;
     
115. _top: -35px;
     
116. -moz-box-shadow: -1px 1px 1px #ccc;
     
117. -webkit-box-shadow: 0 1px 5px #ccc;
     
118. box-shadow: 0 1px 5px #ccc;
     
119. }
     
120. .pp_channels .active .sub-list {
     
121. visibility: visible;
     
122. }
     
123. .pp_channels .sub-list li {
     
124. float: left;
     
125. width: 83px;
     
126. margin: 0 10px 5px 0;
     
127. }
     
128. .pp_channels .sub-list .main-cate {
     
129. width: 200px;
     
130. margin-right: -10px;
     
131. font-weight: bold;
     
132. }
     
133. .pp_channels .sub-list a {
     
134. padding-left: 3px;
     
135. line-height: 21px;
     
136. background-position: -169px -418px;
     
137. *background-position: -169px -420px;
     
138. }
     
139. .pp_channels .sub-list a: hover {
     
140. background-position: -169px -438px;
     
141. *background-position: -169px -440px;
     
142. }
     
143. .pop-panel {
     
144. z-index: 1000;
     
145. position: absolute;
     
146. visibility: hidden;
     
147. border: 1px solid #B9F5D2;
     
148. padding: 5px 9px;
     
149. background: #fff;
     
150. color: #61646E;
     
151. #margin-left:-0px;
     
152. _margin-left:-0px;
     
153. }
     
154. .pop-panel a {
     
155. color: #61646E;
     
156. }
     
157. .pop-panel a: hover {
     
158. text-decoration:none;
     
159. color: #C00;
     
160. }

复制代码

其他一些应用：

1. //定位
   
2. var X = $('#G_chan').offset().top;
   
3. var Y = $('#G_chan').offset().left;
   
4. $("#G_chan-panel").offset({ top: X + 36, left: Y - 5 });
   
5. //鼠标经过 动画效果 防点击链接跳转
   
6. $("#G_chan").hover(function (event) {
   
7. event || event.stopPropagation(); $("#G_chan-panel").slideDown().mouseleave(function () {
   
8. $(this).slideUp()
   
9. });
   
10. });
    
11. //点击 城市列表 下拉动画 防冒泡
    
12. $("#G_loc").click(function (event) { event.preventDefault(); $("#G_loc-panel").slideToggle("slow"); });作者：曾祥展

复制代码