Jquery 기반 Dianping, 카테고리 탐색 구현 code_jquery

간단하고, 가볍고, 빠르고 효율적입니다!

html 구조:

코드 복사 코드는 다음과 같습니다.

• 케이터링< ;/ 범위>
  
  
  
  
  
  • 광둥 요리
  
  ...
  
  
  


• 쇼핑
  
  
  
  • 쇼핑 채널
  
  
  • 슈퍼마켓/편의점
  ..
  
  • 기타
  
  
  
  
/ul>

jquery 코드:

코드 복사 코드는 다음과 같습니다:

css 스타일:

코드 복사 코드는 다음과 같습니다.

BODY {
배경색:#fff;
색상:#555;
글꼴: 9pt/14px Tahoma, "宋体", Arial, Helvetica, Sans-Serif;
문자 간격: 0;
여백: 0;
}
html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe , 객체, 사전, 코드, 범례, 인용문 {
경계: 0 없음;
여백: 0;
개요: 0 없음;
패딩: 0;
}
h1, h2, h3, h4, h5, h6 {
글꼴 크기: 100%;
글꼴 두께: 보통;
}
UL, LI {
목록 스타일: none 외부 없음;
여백: 0;
패딩: 0;
}
IMG {
테두리: 중간 없음;
여백: 0;
패딩: 0;
커서:포인터;
}
input, img, select {
vertical-align: middle;
}
A {
색상: #666666;
}
A:링크 {
색상: #666666;
텍스트 장식: 없음;
}
A:방문함 {
색상: #666666;
텍스트 장식: 없음;
}
A:hover {
색상: #C90809;
텍스트 장식: 없음;
}
/*导航*/
.pp_channels .root-item, .pp_channels .root-name, .pp_channels .root-name 범위, .pp_channels .sub-list li a {
배경 -이미지: url("bg.png");
백그라운드 반복: 반복하지 않음;
}
.G_chan-panel {
위치: 절대;
z-색인: 1000;
상단: 120px;
왼쪽: 199px;
가시성: 숨김;
}
.pp_channels {
너비: 138px;
패딩: 0;
테두리 너비: 0 0 2px 1px;
테두리 반경: 5px;
-webkit-border-radius: 5px;
-moz-국경-반경: 5px;
-moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
상자 그림자: 0 1px 5px #ccc;
}
.pp_channels .root-item {
줌: 1;
위치: 친척;
너비: 139px;
높이: 34px;
배경 위치: -13px -373px;
오버플로: 표시됨;
세로 정렬: 가운데;
}
.pp_channels .root-name {
디스플레이: 블록;
z-색인: 1001;
위치: 친척;
테두리 상단:1px 솔리드 #B9F5D2;
왼쪽 여백: 10px;
배경 위치: -10px -358px;
커서: 포인터;
}
.pp_channels .root-name span {
디스플레이: 블록;
테두리 오른쪽: 1px 단색 #B9F5D2;
왼쪽 여백: 9px;
높이: 34px;
글꼴 크기: 1.2em;
줄 높이: 34px;
색상: #000;
배경 위치: -167px -358px;
}
.pp_channels .active .root-name {
배경: #fff;
}
.pp_channels .active .root-name span {
color: #C00;
테두리 색상: #fff;
}
.pp_channels .no-sub .root-name span {
border-color: #fff;
배경 위치: 20px -358px;
}
.pp_channels .sub-list {
왼쪽: 138px;
상단: -34px;
패딩: 5px 2px 5px 16px;
너비: 200px;
오버플로: 숨김;
_top: -35px;
-moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
상자 그림자: 0 1px 5px #ccc;
}
.pp_channels .active .sub-list {
가시성: 표시;
}
.pp_channels .sub-list li {
float: 왼쪽;
너비: 83px;
여백: 0 10px 5px 0;
}
.pp_channels .sub-list .main-cate {
너비: 200px;
여백 오른쪽: -10px;
글꼴 두께: 굵게;
}
.pp_channels .sub-list a {
padding-left: 3px;
줄 높이: 21px;
배경 위치: -169px -418px;
*배경 위치: -169px -420px;
}
.pp_channels .sub-list a: hover {
배경 위치: -169px -438px;
*배경 위치: -169px -440px;
}
.pop-panel {
z-index: 1000;
위치: 절대;
가시성: 숨김;
테두리: 1px 단색 #B9F5D2;
패딩: 5px 9px;
배경: #fff;
색상: #61646E;
#margin-left:-0px;
_margin-left:-0px;
}
.pop-panel a {
색상: #61646E;
}
.pop-panel a: hover {
텍스트 장식:없음;
색상: #C00;
}

其他一些应용：

复代码 代码如下:

//정수
var X = $('#G_chan').offset().top;
var Y = $('#G_chan').offset().left;
$("#G_chan-panel").offset({ 위쪽: X 36, 왼쪽: Y - 5 });
//鼠标经过 动画效果 防点击链接跳转
$("#G_chan").hover(function (event) {
event || event.stopPropagation(); $("#G_chan- panel").slideDown().mouseleave(function () {
$(this).slideUp()
});
});
//点击 citycity列表 ​​下拉动画 防冒泡
$("#G_loc").click(function (event) { event.preventDefault(); $("#G_loc-panel").slideToggle(" 느림"); });작성자：曾祥展