멀티 드롭다운 메뉴 달기(Vertical CSS Menus)

현재 제 블로그에는 Horizontal CSS Menus 가 적용이 되어있습니다. 
스킨이 변경되었으니 현재는 없군요. 이전글이라는것을 참고하세요.

이번에는 제가 이전에 달아보았던 Vertical CSS Menus를 다는 방법을 알려드리겠습니다.
Horizontal 은 수평메뉴라고 보면 되고, Vertical 은 수직메뉴라고 보면 되겠습니다.


아래 사이트에 가시면 드롭다운 메뉴코드를 얻을수 있습니다. 그리고 예제도 볼수 있습니다.
http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

 대충보시면 알겠지만 몇가지 수정사항이 있습니다. 이걸 알아야 본인의 블로그로 적용이 가능합니다.
코드를 올리면서 수정사항에 대해서 알려드리겠습니다.

1. 자바스크립트 삽입


html 편집창에서 아래의 코드를 추가해주세요. 되도록이면 수정없이 삽입해주시기 바랍니다.
<head> 와 </head> 사이에 추가해주시면 됩니다.

2. html 코드삽입


 두번째 html 코드는 본인이 원하시는 대로 하세요. 일단 기본적인 html 코드를 올려드리겠습니다. 사이드바에 올릴경우를 대비해서 s_sidebar_element 를 삽입했습니다. 필요없으면 삭제해도 무방합니다.
html 코드는 본인이 알아서 수정하세요. 얼마든지 확장 가능하고 3단계(1-2-1)까지 확인했습니다.


저의 경우 둥근네모박스안에 넣었기 때문에 h3 와 div calss="borderBottom" 이라는 클래스를 추가해서 넣었습니다. 그리고 전체적인 레이아웃을 잡기위해 div id=sidebarmenu" 라는 코드를 삽입했습니다. 이대로 해도 무방하고 하는것이 관리하기에 좋습니다.

3. css 수정


다음에 css 부분에 대한 겁니다. css 부분에 대한 것은 텍스트 파일로 일단 올려드리겠습니다
css.txt

이제 본인의 블로그 스킨에 맞게 수정해야할 부분에 대해서 알려드리겠습니다.


위처럼 오른쪽으로 확장할경우 right.gif 를 업로드하시고 예제처럼 왼쪽으로 하실경우는 left.gif 를 업로드하시고 수정하시면 됩니다.
이미지파일을 업로드합니다. 아래 이미지를 마우스 우측버튼으로 다른이름으로 저장을 선택하시고 저장하세요.
다음 html 편집창에서 업로드합니다.

left.gif

right.gif


텍스트파일에 아래는 추가수정한 부분은 저처럼 둥근 네모박스가 아니면 삭제하셔도 됩니다. 예제로 올려드린겁니다.
이것 저것 해보시고 배경색이나 글자색등을 본인의 블로그에 맞게 수정해보세요.
중요한것은 너비부분과 배경이미지 삽입, 그리고 오른쪽인지 왼쪽인지만 수정하시면 됩니다.

다음에 시간이 나면 제 블로그에 사용되는 Horizontal CSS Menus 에 대해서도 삽입하는 방법을 알려드리겠습니다.
개    개