수평 드롭다운 메뉴바 달기(jquery이용) Horizontal CSS Menus

demun
퍼블리셔/jQuery
2010. 6. 11. 06:00

수평메뉴바는 일반적으로 스킨에 나오는 메뉴바 보다도 더욱 활용가치가 있습니다. 저의경우 현재는 카테고리도 메뉴바에 올려넣고, 보여주고 싶은 글도 넣었습니다.

링크는 얼마든지 마음껏 활용하세요. css 를 활용하면 얼마든지 수정도 가능합니다. 여기서는 일일이 수정하는것은 힘드니까 초보자도 사용할수 있도록 코드를 삽입하는것만으로도 사용이 가능하도록 글을 써보겠습니다.

원문은 아래 사이트입니다. 다양한것이 있으니 참고하시기 바랍니다.

원문출처 : http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

수직메뉴는 아래글 참고.

멀티 드롭다운 메뉴 달기(Vertical CSS Menus) => http://demun.tistory.com/1616

보시면 아시겠지만 게중에서 가장 점수가 높게 나온 스타일입니다.

자 일단 달아봅시다.

아래의 파일을 우선 원본 그대로 다운로드 받아서 스킨편집창에서 업로드를 해주세요.(단 css파일을 빼구요.티스토리에서는 업로드 안됩니다. 이미지두개와 js 파일을 업로드하세요.)

jqueryslidemenu.css

jqueryslidemenu.js

그다음 아래의 코드를 스킨편집창에서 <head>와 </head>사이에 넣어주세요.

<link rel="stylesheet" type="text/css" href="./images/jqueryslidemenu.css">
<!--[if lte IE 7]>
<style type="text/css">
	html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="./images/jqueryslidemenu.js"></script>

자 이제 기본적으로 js파일과 css 파일까지 업로드했으니 html 만 수정해주면 됩니다.

티스토리의 대부분의 스킨에는 메뉴가 있습니다. 홈, 공지사항, 방명록, 태그, 지역로그 등등....

이 밑에 우선 삽입해보고 잘 된경우 이 메뉴를 대체해도 되겠습니다.

메뉴아래에 넣은것을 가정하고 해보겠습니다. 메뉴가 header 안에 있는경우가 대부분이니 이 방법이 나을듯 합니다.

메뉴아래에 넣던지, 아니면 header 가 끝나기 전에 넣던지 .... 우선 넣어보고 미리보기를 통해서 수정을 하면 됩니다.

일단 메뉴부분을 찾아보세요. 아래의 지역로그 치환자를 검색해보면 대략 답이 나옵니다. html 편집창에서 Ctrl+F 를 클릭해서

[#\#_localog_link_##] 를 검색합니다.

를 검색합니다. # 과 # 사이의 공백은 없습니다.

그럼 대략 아래의 그림으로 나옵니다. 빨강색 부분이 바로 blogMenu 가 끝나는 부분입니다. 그리고 header 안에 있죠.<li class ..... 이런식의 글들이 많이 있죠.

위의 빨강색부분에 아래의 코드를 넣어봅니다.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left">
</div>

자 이제 다 끝났습니다. 미리보기를 통해서 정상적으로 나왔는지 보시고 세세한것은 수정을 하시기 바랍니다.

다듬기

첫번째.

html 을 자세히보시면 item 이 있고 folder 가 있습니다. 아이템은 그냥 한줄짜리 큰부류라고 생각하시고, 폴더는 하위메뉴로 내려가는거라고 생각하면 편합니다.

한가지 모두 a 링크태그로 해야 css 가 정상작동됩니다.

그러니 링크가 없는것은 <a href="#">큰부류</a> 이런식으로 하고 하위로 ul li 이런식으로 나가면 됩니다.

하위메뉴가 어디까지 가는지는 저도 테스트해보지 못했습니다. 대략 생각하건데 계속 나갈수 있을거 같습니다^^

두번째.

배경색이나 링크 색깔등 다양하게 변화를 주고 싶으시면 jqueryslidemenu.css 에서 수정하셔서 다시 업로드 하면 됩니다.

또하나의 방법으로는 jqueryslidemenu.css을 전부 복사해서 css 편집창에 붙여넣고 사용을 해도 됩니다. 이건 수정을 여러번 할경우에 하면 되고 ,,,, 그렇게 수정을 많이 하지 않는분은 그냥 업로드해서 사용하세요.

세번째.

jqueryslidemenu.js 파일을 열어서보시면 이미지주소가 있습니다. 그걸 본인의 블로그에 업로드한 이미지 주소로 대체해주세요. 현재는 저도 그걸 업로드했기 때문에 화살표 모양의 이미지가 잘 나올겁니다. 하지만 나중에 어떻게 될지 모르니 본인의 이미지 주소로 변경해주세요.

var arrowimages={down:['downarrowclass', 'http://cfs.tistory.com/custom/blog/5/53533/skin/images/down.gif', 23], right:['rightarrowclass', 'http://cfs.tistory.com/custom/blog/5/53533/skin/images/right.gif']}

한가지 줄인주소는 안되고 전부 적어주셔야 합니다. 모르시는 분을 위해 이미지주소 아는법.

html 편집창에서 이미지주소를 클릭하고 마우스 우측버튼으로 주소를 알수 있습니다.

그 주소를 위에 jqueryslidemenu.js 파일에 수정을 하시면 됩니다.

다른 드롭다운 메뉴

다른 드롭다운 메뉴 검색하서 모두 보기

jQuery 드롭다운메뉴 사용하는 방법-jquery.droppy.js => http://demun.tistory.com/2082

수평 드롭다운 메뉴 => http://demun.tistory.com/2145

CSS 3 드롭다운 에니메이션 메뉴 => http://demun.tistory.com/2161

티스토리 카테고리 메뉴를 드롭다운으로 이용하는 방법 => http://demun.tistory.com/2175

수평 드롭다운 메뉴바 달기(jquery이용) Horizontal CSS Menus => http://demun.tistory.com/1672

이미지가 필요없는 css 드롭다운 메뉴 Vertical css menu => http://demun.tistory.com/1613

티스토리 블로그메뉴를 드롭다운으로 이용하는 방법 => http://demun.tistory.com/2174

css 애니메인션 드롭다운 => http://demun.tistory.com/2310

개 개

demun(대문블로그)

수평 드롭다운 메뉴바 달기(jquery이용) Horizontal CSS Menus

다른 드롭다운 메뉴

티스토리툴바