css로 구성된 수평메뉴바 사용하기

이전에 알려드린 수평메뉴바는 자바스크립트를 이용합니다. 하지만 이번에 소개하는 수평메뉴는 제가 현재 달고 있는메뉴인데요. ie6도 지원합니다. 지금 제가 이것 저것 만지면서 손을 잘못 본거 같은데요. 다른거와 다른게 이건 좀 햇깔립니다^^; 해보시면 압니다.ㅎㅎㅎㅎ


다른 좋은것들도 있습니다. 우선 데모화면을 우선 보시고 그중에 적용하고 싶은것이 있으면 적용하세요.
미리보기 => http://www.lwis.net/free-css-drop-down-menu/

스샷추가


제가 대략보니 그중에서 MTV 에서 사용하는 수평메뉴가 가장 나은거 같습니다. 현재 그걸 적용해보겠습니다.

간단하게 적용하는 방법을 알려드리겠습니다.
우선 익스플로러도 적용을 하려면 jquery 파일도 같이 사용해야합니다.

아래의 파일을 다운로드해서 스킨편집창에서 업로드하세요.

jquery.dropdown.js
jquery.js


다음 <head> 와 </head> 사이에 아래의 코드를 넣어주세요. 익스플로러를 위한 주석입니다.


<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
ie에서 정상적으로 글씨가 안나와서 파일을 첨부합니다.
menu_head.txt

여기까지는 IE 를 위한 조치입니다.정상적이면 이런거 필요없는데요.^^;

다음 아래의 코드를 다운로드해서 에디터로 열어서 html 편집창에서 붙여넣기해서 사용하세요.


그다음 아래의 css 파일을 그대로 css창에 붙여넣기 합니다.


menu.css


그럼 다 된겁니다. 이제 원본과 비교해가면서 어디에 사용할건지 정하고 링크등을 수정해서 사용하시기 바랍니다.

혹시 몰라 원본파일을 올려드릴게요. 위에의 링크에서도 다운로드 할수있습니다. 혹시 몰라 전부 올려드립니다.

free-css-drop-down-menu_v1.1.zip

파일을 보시면 링크가 다 걸려있기때문에 정상적으로 메뉴가 작동이 될겁니다. 폴더안에 mtv.com.html 가 현재 적용하려는 파일입니다.

현재 제가 사용하고 있는건데요. 글씨가 왼쪽으로 정렬이 안되고 추천글/스킨/배포 라고 적인곳만 제대로 표시가 되네요.


참고팁.

위의 html 파일을 보시면 ul 부터 시작이 될겁니다. 이걸 저처럼 메뉴가 한가운데 오도록 사용하고 싶으시다면 div 를 하나 추가해서 가운데 정렬을 하시면 됩니다.

예를들어.

그다음 css 부분에 아래의 한부분을 추가해줍니다. 위의 div 를 사용할수있도록 수정한다면 아래처럼 하면 됩니다.

#menu{width:사용하고자 하는 너비;margin:0 auto;}

이렇게 사용하시면 너비만큼 사용할수있고, 메뉴를 가운데 정렬을 할수 있습니다. 
개    개