제가 이전에 배포한 에드센스 스킨에 이미지 없는 css3 의 네비게이션을 적용하는 방법을 모른다고 해서 이 포스팅을 합니다.
보시면 누구나 수정이 가능할겁니다. 

일단 에드센스 스킨은 자바스크립트로 네비게이션 부분을 꾸밈니다. 그래서 이것으로 수정할경우 더 가볍게 사용할수 있죠.
먼저 html 부분부터 수정해보겠습니다.

html 수정.


 menu 부분을 삭제합니다.



하위에 자바스크립트 두줄도 같이 삭제합니다.
 


menu 부분에 제가 작성한 형태로 html 부분을 채웁니다. 대충 테스트형식으로 저는 아래처럼 채웠습니다.

<ul id="menu">
    <li class="tab_bloghome"><a href="[#\#_blog_link_##]">HOME</a></li>
    <li class="tab_taglog"><a href="[#\#_taglog_link_##]">TAG LOG</a></li>
    <li class="tab_media"><a href="[#\#_blog_link_##]media">MEDIA LOG</a></li>
    <li class="tab_guestbook"><a href="[#\#_guestbook_link_##]">GUESTBOOK</a>
        <ul>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 1</a>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 2</a></li>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 3</a></li>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 4</a></li>
        </ul>
    </li>
</ul><!-- //menu close // -->


이미지없는 네비게이션 메뉴를 잘보시고 따라하세요.

이제 css 를 수정해보겠습니다.

css 수정.

마찬가지로 menu 부분을 찾아서 삭제합니다. 아래 이미지처럼 menu 부분부터 lava lamp 에 해당하는 코드모두 삭제합니다.

그런다음 이미지없는 네비게이션 menu 부분의 css 코드를 붙여넣으면 됩니다.

전 딱 한부분만 수정해보니 잘 되었습니다.


#menu { 
	margin:20px auto; 
}



기존의 코드는 margin 이 60px 였지만 20만 해주면 딱 들어갑니다. 수정한 네비게이션을 잠시 두니까 한번 보세요.


신고

댓글

  1. 2011.12.09 13:38 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    대문님 하다보니 어떻게 되네요..ㅎㅎ 한가지 안되는게 있어서요..링크를 넣고 싶은데...그전에 쓰던것처럼요...어떻게 하는건가요?링크도 일일이 블로그 주소를 입력하는 건가요??

  2. 2011.12.09 16:07 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    허걱..그럼 링크는 포기..ㅎㅎ 한두분도 아니고...에효..ㅋㅋ

  3. 2012.06.09 10:11 신고 BlogIcon blvd  댓글주소  수정/삭제  댓글쓰기

    수평으로 된 주메뉴에 마우스를 갖다대면
    부메뉴(서브메뉴)가 아래로 펼쳐지는 것을 설명하신 것인지요 ?

    이대로만 하면 제 블로그(티스토리 스킨이름 Gallery (White) 메뉴에도 동일하게 적용이 되는지요?