Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › 基于jquery的大众点评，分类导航实现代码
返回列表 发新帖

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

[复制链接]
authicon dly 发表于 2011-9-10 21:05:25 | 显示全部楼层 |阅读模式
简单 轻盈 快速 高效！

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"); });作者：曾祥展
复制代码
导航, 大众点评, jquery

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x



上一篇：PHP-5.2下PHP.ini 中文版配置说明
下一篇：一些有用的JavaScript和jQuery的片段分享

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2024-5-18 17:06

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表