최근에 JQuery를 배우면서 이런 탐색을 만들어 보았습니다.
다운로드: 코드
망원경 탐색
"navigator" >
-
탐색 카드 1
ul class= "nav1">
- 하위 프로젝트 1
- 하위 프로젝트 2
- 하위 프로젝트 3
- 하위 프로젝트 4
-
탐색 카드 2 /h3>
- 하위 프로젝트 4
-
탐색 카드 3
코드 복사
코드는 다음과 같습니다.
/**
* 작성자 LY 2013-11-11 22:30 **/ * { margin : 0; 패딩: 0; 글꼴 계열: "Microsoft Yahei","Arial"
}
.navigator {
너비: 180px
디스플레이: 블록
-상단: 30px;
여백-왼쪽: 30px;
테두리-상단: 10px 솔리드 #ddd;
테두리-하단: 10px 솔리드 #ddd;
테두리 오른쪽: 3px 솔리드 #ddd;
배경: #ddd
}
.tabs {
목록 스타일: 없음
}
.tabs li {
clear: 둘 다;
overflow: auto;
.tabs li h3 {
padding: 0
margin:0; 🎜>글꼴 크기: 14px;
높이: 40px;
텍스트 정렬:
폭: 180px; 배경: #07f;
색상: #fff;
테두리 하단: 1px 솔리드 #ccc;
.tabs li:last-child h3 {
테두리: 없음; >}
.tabs li h3.current {
배경: #6af;
}
.tabs li ul {
margin-left: auto
margin-right: auto;
너비: 160px;
높이: 0px;
목록 스타일: 없음;
오버플로: 숨김;
}
.tabs li ul li {
높이: 30px
줄 높이: 30px;
배경: #eee;
테두리 하단: 1px
커서: 포인터;
코드 복사
코드는 다음과 같습니다.
$(document ).ready (function(){
$(".nav1").css("height","160px");
$(".tabs li h3:first").addClass("current" );
$(".tabs li h3").click(function() {
$(".tabs li h3").removeClass("현재");
$(this).addClass ("현재 ");
$(".tabs li ul").animate({height:"0"},"fast");
$(this).next().animate({height:"160 "},"느림");
});
});