아코디언(accordion) 메뉴를 적용해 보자.

한쪽이 줄어들면 다른 쪽은 늘어나는 형태의 메뉴이다.

개인에 따라서 수정을 해야 되는 부분도 있지만 쉽게(?) 적용이 가능하다.

 

1. jQuery를 이용하기 때문에 js 파일을 넣는다.위치는 html 문서 처음을 보면 head 라는 곳이 있다 이곳에 넣으면 된다.

2. css 에 대한 설정을 넣는다.   새로운 파일을 만들어서 넣거나 기존의 CSS에 추가합니다.

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion { 	background:#333 url(h3.png) 0 0; 	width: 300px; 	border:1px solid #333;	 	-background:#666; }
/* accordion header */
#accordion h2 { 	background:#ccc url(h31.png); 	margin:0; 	padding:5px 15px; 	font-size:14px; 	font-weight:normal; 	border:1px solid #fff; 	border-bottom:1px solid #ddd; 	cursor:pointer;		 }
/* currently active header */
#accordion h2.current { 	cursor:default; 	background-color:#fff; }
/* accordion pane */
#accordion .pane { 	border:1px solid #fff; 	border-width:0 2px; 	display:none; 	height:180px; 	padding:15px; 	color:#fff; 	font-size:12px; }
/* a title inside pane */
#accordion .pane h3 { 	font-weight:normal; 	margin:0 0 -5px 0; 	font-size:16px; 	color:#999; }

3. script를 문서에 추가합니다.

$(function() {  $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null}); }); 

4. 아코디언을 적용할 부분을 설정합니다.div의 id에 accordion을 넣으면 그 구간에 효과가 주어지게 됩니다.h2 에 들어가는 것은 아코디언의 메뉴 제목입니다.div class="pane" 에는 메뉴를 선택하였을때 나타날 내용을 넣어주면 됩니다.

메뉴 1번

아코디언 메뉴를 테스트 하고 있습니다.

비가 많이 오고 있습니다.

두번째 메뉴

전두환 추징금은 어떻게 될것인가

이십몇만원 있다고 하더니 탈탈 털어줬으면 좋겠습니다.

세번째 메뉴

개인의 취향에 맞추어 잘 꾸미면 됩니다.

 

 

5. 적용이 되었다면 2번에 있는 CSS를 개인 취향에 맞게 수정을 하면 됩니다.
원본 글 http://www.htmldrive.net/items/show/45/Making-Accordions-with-the-Tabsjquery데모 사이트 보기 http://www.htmldrive.net/items/demo/45/Making-Accordions-with-the-Tabsjquery

 

파일 다운로드 http://www.htmldrive.net/items/download/45