사이드바에 확장되는 아코디언 메뉴(Accordion Menu)를 달자

이번에 블로그를 개편하면서, 주제별로 따로 만들었던 블로그를 하나로 통합하게 되었습니다. 그런데 문제는 역시 주제와 그에 따른 레이블(Label)이 너무 많아서 어떻게 메뉴를 구성할지 난감한 것이었습니다.

고민 끝에 생각해낸 방법은 대분류, 중분류, 소분류의 트리구조로 차례로 펼쳐졌다가 다시 닫히는 방식의 메뉴 였습니다. 이런 것을 영어로는 악기 아코디언을 닮았다 하여, 흔히 '아코디언 메뉴(Accordion Menu)'라고 부릅니다.

꼭 구글 블로거가 아니어도 사용할 수 있으니까 관심 있는 분들은 도전해 보시기 바랍니다. 어렵지는 않습니다. 단, 저처럼 레이블이 엄청 많으면 일일이 작성하는데 시간이 걸리겠습니다만...

아무튼 강좌 시작합니다.



1. 3단 아코디언 메뉴

이것은 제가 현재 이 곳에 사용하고 있는 소스 입니다.
CSS와 jQuery 를 사용합니다.

이 강좌를 따라서 만드시면 좌측 이미지와 같은 디자인이 됩니다만, 저는 디자인에 약간의 수정을 가했습니다. 기본바탕을 화이트로 바꾸고, 2단과 3단이 명확히 구분되도록 바탕색을 구분해서 적용했지요.

그런 디테일한 부분은 여러분이 원하는 대로 CSS를 수정하시면 되겠습니다.

우선 다음의 파일을 다운로드 하세요.

Download 1  or  Download 2

받아서 압축을 풀어 보시면 3개의 문서가 있습니다.

styles.css 문서를 여러분이 보유한 계정이 있으면 업로드해서 링크하시든지, 아니면 문서를 편집기로 열어서 그 안의 내용을 복사하여 여러분의 사이트나 블로그의 CSS 정의된 곳에 붙여넣으세요. 딱히 편집기가 없으면 메모장 같은 것으로 열어도 됩니다.

구글 블로거 사용자의 경우 로그인 하셔서 템플릿 > Edit HTML 창을 열어서 ]]></b:skin>
부분을 검색하여 그 앞에 붙여넣으시면 됩니다.
그 다음 script.js 파일 역시 마찬가지 입니다. 여러분이 업로드하고 링크할 계정이 있다면 그렇게 하셔도 되고, 아니면 여러분의 사이트나 블로그 적절한 곳에 내용을 붙여넣으시면 됩니다.

구글 블로거 사용자의 경우 Edit HTML 창에서 </head> 전의 적절한 곳에 붙여넣으세요.

아, 그리고 노파심에서 말씀드립니다만 스크립트 파일의 내용을 붙여넣으실 때에는 반드시 스크립트 태그 안에 넣어주세요. 내용 윗줄에는 <script type="text/javascript"> 라고 써주시고 내용 끝에는 </script>라고 써서 닫아주세요.

마지막으로 index.html 문서가 남았는데요. 열어보시면 <head></head> 사이에 정의된 내용은 마찬가지로 여러분의 사이트나 블로그의 <head></head> 사이에 적용해 주시고, <body> 태그 안에 있는 다음의 내용은 여러분이 아코디언 메뉴를 적용하기 원하는 곳에 넣어주시면 됩니다.

구글 블로거 사용자라면 사이드바에 가젯을 설치하여 붙여넣으시면 되겠지요?

<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active has-sub'><a href='#'>Products</a>
      <ul>
         <li class='has-sub'><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>


위 코드에서 빨간 글자는 여러분의 메뉴 버튼에 표시될 이름 입니다.
그리고 # 부분은 클릭했을 때 이동하게 될 주소를 적으시면 되구요.

위 코드에서 1단 메뉴는 Home, Product, About, Contact 입니다.
그런데 Product 앞에는 class='active has-sub' 라는 내용이 붙어 있지요? 서브메뉴가 있다는 뜻입니다. 즉 1단메뉴 Product 의 2단 메뉴는 Product 1, Product 2 가 되는 것이지요. 그런데 그 앞에도 class='has-sub' 라는게 붙어 있지요? 역시 서브메뉴를 갖고 있다는 것입니다. 그것이 3단 메뉴가 되겠지요? 어떻게 작성하면 되는지 이해가 가시는지요?

그 내용들을 모두 작성하셔서 원하는 곳에 붙여넣으시면 되겠습니다.






2. 3단 아코디언 메뉴


마찬가지로 3단 아코디언 메뉴인데, 조금 다른 디자인 입니다.
적용 방법은 위의 1번 강좌와 동일하며 파일은 다음 링크에서 받으시면 되겠습니다.

Download 1  or  Download 2

이것은 제가 사용해보지 않아서 오류가 없는지 어떤지 잘 모르겠습니다.







3. 3단 아코디언 메뉴


마찬가지로 3단 아코디언 메뉴 입니다. 적용 방법도 동일합니다.
다운로드는 다음 링크에서 하시면 됩니다.

Download 1  or  Download 2

아래로 뾰족하게 생긴 것은 원래 그런 것이 아니라, 클릭하여 활성화된 메뉴만 그렇게 변하는 것입니다.







4. 2단 아코디언 메뉴

이번 것은 2단 메뉴 입니다. 활성화 된 메뉴는 초록색으로 변하는군요.
이번 것은 이미지 파일이 포함되어 있습니다. 위 그림을 보시면 더하기 빼기 그림이 보이는데, 그것은 이미지 파일로 처리된 것입니다. 이미지파일을 업로드하여 제대로 링크해 주시기 바랍니다.

Download 1  or  Download 2

소스 파일은 위 링크에서 받으시면 되겠습니다.








5. 2단 아코디언 메뉴


이번에도 이미지 파일이 포함된 아코디언 메뉴 입니다. 디자인에 약간의 차이가 있는데, 이편이 깔끔하고 좋아 보이네요.

Download 1  or  Download 2

소스파일은 위 링크에서 받으시면 됩니다.



일단 오늘 강좌는 이쯤에서 마무리 하겠습니다.
도움이 되셨길 바랍니다.

No comments:

Post a Comment

Popular Posts