Dianping based on jquery, category navigation implementation code_jquery

Simple, light, fast and efficient!

html structure:

Copy code The code is as follows:

• Catering
  
  
  
  
  
  • Cantonese Cuisine
  
  ...
  
  
  


• Shopping
  
  
  
  • Shopping Channel
  
  
  • Supermarket/Convenience Store
  
  ...
  
  • Others
  
  
  
  

jquery code:

Copy code The code is as follows:

css style:

Copy code The code is as follows:

BODY {
background-color:#fff;
color:#555;
font: 9pt/14px Tahoma, "宋体", Arial, Helvetica, Sans-Serif;
letter-spacing: 0;
margin: 0;
}
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 {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
UL, LI {
list-style: none outside none;
margin: 0;
padding: 0;
}
IMG {
border: medium none;
margin: 0;
padding: 0;
cursor:pointer;
}
input, img, select {
vertical-align: middle;
}
A {
color: #666666;
}
A:link {
color: #666666;
text-decoration: none;
}
A:visited {
color: #666666;
text-decoration: none;
}
A:hover {
color: #C90809;
text-decoration: none;
}
/*导航*/
.pp_channels .root-item, .pp_channels .root-name, .pp_channels .root-name span, .pp_channels .sub-list li a {
background-image: url("bg.png");
background-repeat: no-repeat;
}
.G_chan-panel {
position: absolute;
z-index: 1000;
top: 120px;
left: 199px;
visibility: hidden;
}
.pp_channels {
width: 138px;
padding: 0;
border-width: 0 0 2px 1px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
box-shadow: 0 1px 5px #ccc;
}
.pp_channels .root-item {
zoom: 1;
position: relative;
width: 139px;
height: 34px;
background-position: -13px -373px;
overflow: visible;
vertical-align: middle;
}
.pp_channels .root-name {
display: block;
z-index: 1001;
position: relative;
border-top:1px solid #B9F5D2;
padding-left: 10px;
background-position: -10px -358px;
cursor: pointer;
}
.pp_channels .root-name span {
display: block;
border-right: 1px solid #B9F5D2;
padding-left: 9px;
height: 34px;
font-size: 1.2em;
line-height: 34px;
color: #000;
background-position: -167px -358px;
}
.pp_channels .active .root-name {
background: #fff;
}
.pp_channels .active .root-name span {
color: #C00;
border-color: #fff;
}
.pp_channels .no-sub .root-name span {
border-color: #fff;
background-position: 20px -358px;
}
.pp_channels .sub-list {
left: 138px;
top: -34px;
padding: 5px 2px 5px 16px;
width: 200px;
overflow: hidden;
_top: -35px;
-moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
box-shadow: 0 1px 5px #ccc;
}
.pp_channels .active .sub-list {
visibility: visible;
}
.pp_channels .sub-list li {
float: left;
width: 83px;
margin: 0 10px 5px 0;
}
.pp_channels .sub-list .main-cate {
width: 200px;
margin-right: -10px;
font-weight: bold;
}
.pp_channels .sub-list a {
padding-left: 3px;
line-height: 21px;
background-position: -169px -418px;
*background-position: -169px -420px;
}
.pp_channels .sub-list a: hover {
background-position: -169px -438px;
*background-position: -169px -440px;
}
.pop-panel {
z-index: 1000;
position: absolute;
visibility: hidden;
border: 1px solid #B9F5D2;
padding: 5px 9px;
background: #fff;
color: #61646E;
#margin-left:-0px;
_margin-left:-0px;
}
.pop-panel a {
color: #61646E;
}
.pop-panel a: hover {
text-decoration:none;
color: #C00;
}

其他一些应用：

复制代码 代码如下:

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