弹出层的CSS

카테고리 전체보기

CSS Code

01	/* UI Object */

02	/* Common */

03	body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}

04	body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}

05	img,fieldset{border:0}

06	ul,ol{list-style:none}

07	em,address{font-style:normal}

08	a{text-decoration:none}

09	a:hover,a:active,a:focus{text-decoration:underline}

10

11	.cate_view_all{position:relative;width:605px;padding-top:3px;border-bottom:1px solid #c9c9c9;background:url(http://static.naver.com/kin/09renewal/bg_main_category.gif) repeat-x 0 0}

12	.cate_view_all h3{border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;font-size:11px}

13	.cate_view_all h3 a{display:block;position:relative;width:588px;height:24px;padding:15px 0 0 15px}

14	.cate_view_all h3 a span{display:block;position:absolute;top:12px;left:15px;width:103px;height:17px;background:url(http://static.naver.com/kin/09renewal/h_category_all.gif) no-repeat;cursor:pointer}

15	.cate_view_all .cate_list{display:none;padding-top:21px;padding-bottom:26px;border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9}

16	.cate_view_all .cate_list ul{overflow:hidden;clear:both;width:603px;background:url(http://static.naver.com/kin/09renewal/bg_main_cate_list.gif) repeat-y 150px 21px}

17	.cate_view_all .cate_list li{float:left;width:136px;padding-left:15px}

18	.cate_view_all .cate_list li h4{padding-bottom:14px}

19	.cate_view_all .cate_list li ul{width:100%;background:none}

20	.cate_view_all .cate_list li ul li{padding:0 0 6px}

21	.cate_view_all .cate_list li ul li a{color:#777}

22	.cate_view_all .cate_list li.right{width:135px}

23	.cate_view_all_open h3{border-bottom:1px solid #e0e0e0}

24	.cate_view_all_open h3 a span{background-position:0 -17px}

25	.cate_view_all_open .cate_list{display:block}

26	/* //UI Object */

HTML Code

01	<!-- UI Object -->

02	<!-- [D] 전체보기 열면  cate_view_all_open 클래스가 추가되어야 함 -->

03	<div class="cate_view_all">

04	<h3><a href="#">카테고리 전체보기<span></span></a></h3>

05	<div class="cate_list">

06

<ul>

07

<li>

08	<h4><img src="http://static.naver.com/kin/09renewal/h_cate_k_qna.gif" width="48" height="12" alt="지식 Q&amp;A"></h4>

09

<ul>

10	<li><a href="#">컴퓨터, 통신</a></li>

11	<li><a href="#">게임 </a></li>

12	<li><a href="#">엔터테인먼트, 예술 </a></li>

13	<li><a href="#">비즈니스, 경제 쇼핑 </a></li>

14	<li><a href="#">사회, 문화 </a></li>

15	<li><a href="#">건강, 의학</a></li>

16	<li><a href="#">가정, 생활</a></li>

17	<li><a href="#">여행, 레저</a></li>

18	<li><a href="#">스포츠</a></li>

19	<li><a href="#">교육, 학문 </a></li>

20

</ul>

21

</li>

22

<li>

23	<h4><img src="http://static.naver.com/kin/09renewal/h_cate_j_qna.gif" width="59" height="12" alt="쥬니버 Q&amp;A"></h4>

24

<ul>

25	<li><a href="#">국어</a></li>

26	<li><a href="#">수학</a></li>

27	<li><a href="#">영어</a></li>

28	<li><a href="#">과학</a></li>

29	<li><a href="#">사회</a></li>

30	<li><a href="#">역사</a></li>

31	<li><a href="#">예체능</a></li>

32	<li><a href="#">기타</a></li>

33	<li><a href="#">컴퓨터,인터넷</a></li>

34	<li><a href="#">게임</a></li>

35	<li><a href="#">상식백과</a></li>

36	<li><a href="#">연예, TV </a></li>

37	<li><a href="#">만화, 애니 </a></li>

38	<li><a href="#">학교생활</a></li>

39

</ul>

40

</li>

41

<li>

42	<h4><img src="http://static.naver.com/kin/09renewal/h_cate_l_qna.gif" width="48" height="12" alt="지역 Q&amp;A"></h4>

43

<ul>

44	<li><a href="#">서울특별시</a></li>

45	<li><a href="#">부산광역시</a></li>

46	<li><a href="#">대구광역시</a></li>

47	<li><a href="#">인천광역시</a></li>

48	<li><a href="#">광주광역시</a></li>

49	<li><a href="#">대전광역시</a></li>

50	<li><a href="#">울산광역시</a></li>

51	<li><a href="#">강원도</a></li>

52	<li><a href="#">경기도</a></li>

53	<li><a href="#">경상남도</a></li>

54	<li><a href="#">경상북도</a></li>

55	<li><a href="#">전라남도</a></li>

56	<li><a href="#">전라북도</a></li>

57	<li><a href="#">제주특별자치도</a></li>

58	<li><a href="#">충청남도</a></li>

59	<li><a href="#">충청북도</a></li>

60

</ul>

61

</li>

62	<li class="right">

63	<h4><img src="http://static.naver.com/kin/09renewal/h_cate_w_qna.gif" width="48" height="12" alt="고민 Q&amp;A"></h4>

64

<ul>

65	<li><a href="#">남과 여</a></li>

66	<li><a href="#">부부클리닉</a></li>

67	<li><a href="#">1318</a></li>

68	<li><a href="#">콤플렉스</a></li>

69	<li><a href="#">직딩비애</a></li>

70	<li><a href="#">여자만</a></li>

71	<li><a href="#">남자만</a></li>

72	<li><a href="#">사람과 사람</a></li>

73	<li><a href="#">진로, 취업</a></li>

74	<li><a href="#">가족</a></li>

75

</ul>

76

</li>

77

</ul>

78

</div>

79

</div>

80	<!-- //UI Object -->

JavaScript Code

1	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

2	<script type="text/javascript">

3	jQuery(function($){

4	$('h3>a').click(function(){

5	$('.cate_view_all').toggleClass('cate_view_all_open');

6

});

7

});

8

</script>