基于jquery的大众点评，分类导航实现代码
html结构：
代码如下:
餐饮
餐饮频道
粤菜
。
。。
购物
购物频道
超市/便利店
。。。
其他
jquery代码：
代码如下:
css样式：
代码如下:
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"); });作者：曾祥展。
答：详情>>
