이전글에 티스토리의 블로그 메뉴를 드롭다운으로 이용하는 방법을 알아보았습니다.
사실 이 부분도 같이 해결을 할려고 같이 제가 제작한 부분입니다.

티스토리 치환자 카테고리 알아보기.
우선 카테고리 부분을 좀 알아보겠습니다.

티스토리에서 카테고리 치환자는 두가지 형태입니다.
하나는 접고 펼수 있는 형태와 목록이 쭉 펼쳐지는 리스트 형태가 존재합니다.

접고 펴는 형식의 카테고리

<div id="categoryMenu">
	[#\#_category_##]
</div>

리스트 형식의 카테고리

<div id="categoryMenu">
	[#\#_category_list_##]
</div>
이렇게 치환자가 다릅니다.
카테고리가 길 경우에는 접고 펴는 형식이 사용하기에는 좋지만 디자인적으로 별로 좋지 않고, 수정이 어려운 점 때문에 저는 접고 펴는 형식은 잘 안씁니다.

제가 하는 방법은 리스트 형식의 카테고리를 사용합니다.

목표.
카테고리를 메인메뉴에서 사용함.
제일 먼저 나오는 "분류 전체보기" 는 사용할 필요가 없어 안보이게 합니다.
두번째 부터 나오는 카테고리 메뉴를 메인메뉴로 사용합니다.
하위 메뉴가 있는것은 드롭다운 메뉴로 보여집니다.

이런 부분을 적용한 부분을 동영상으로 참고하시기 바랍니다.



전체적인 코드는 아래와 같습니다.
내용이 길어 더보기를 사용합니다.

더보기


이미지가 하나 포함되어 있습니다.
category.html 과 같이 옆에 두고 떠블클릭해서 브라우져로 열어보면 동영상과 같이 보일겁니다.

category.html


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


다른 드롭다운 메뉴

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


신고

댓글

  1. 2013.04.21 23:55 신고 BlogIcon Eyeopener  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.위의 메뉴 잘 사용하고 있습니다.궁금한 점이 있어서 질문드립니다.

    질문1. 서브메뉴가 영상 밑(안)으로 들어가서 보이지 않는 문제

    저는 영상 위주로 포스팅을 하는데요, 서브메뉴가 드롭되어 펼쳐졌을때 영상 밑으로 들어가서 안보입니다.
    그래서 메뉴부분과 본문 사이 간격<br> 벌리다 보니까 그 여백이 넓어서 보기가 좋지 않네요.
    jpg, gif 등 이미지에는 위로 펼쳐지는데, 영상만 그렇네요. 해결방법이 있나요?


    질문2. 위 드롭다운 메뉴의 "전체 너비" 확장 문제

    제가 사용하고 있는 스킨이 1단이고, "본문"의 너비가 width=960px 인데요, 위의 드롭다운 메뉴는 아마도 width=944px정도 ㅎㅎ 따라서 주메뉴를 full로 채워도 양쪽 끝에 공백이 생기네요.
    메뉴 전체너비를 width=960px로 확장할 수는 없겠는지요? 오늘 하루내내 해봤는데 안되네요.
    (위 본문 더보기에 있는 소스 몇번째 줄 어디어디를 어떻게 해라'는 식으로 알려주시면 감사하겠습니다)


    • BlogIcon 대문 demun 2013.04.23 08:23 신고  댓글주소  수정/삭제

      일단 너비를 꽉차게 사용하는 법.
      #categoryMenu ul { padding:0; }
      을 추가해보세요. 제가 해보니 꽉차게 나옵니다.

      영상위로 겹치는 문제
      그것은 z-index 의 문제입니다.
      요건 좀 긴데....

      일단 #categoryMenu 와 본문 #content 와 인덱스를 조절해줘야 합니다.#content보다 높게 줘야죠.

      #categoryMenu { z-index:100; }
      #content { z-index:1; }

      만약 위의것이 말을 듯지 않는다면 그 하위 자식들한테도 지정해주세요.

      #categoryMenu li a { z-index:100; }
      #content div { z-index:1; }
      이런식으로요.

    • BlogIcon Eyeopener 2013.04.24 10:48 신고  댓글주소  수정/삭제

      바쁘신데, 답변해 주셔서 감사합니다.

      너비 꽉차게 사용하는 법은 대문님 말씀대로 했더니 바로 해결 되었네요ㅎㅎ 저렇게 간단한데ㅠㅠ 나름 혼자 해보겠다고 낑낑거린걸 생각하면 지금도 머리가 지끈지끈 합니다.

      그런데 영상위로 겹치는 문제는 저의 능력부족으로 해결 못 했습니다.
      그래도 z-index란 개념을 안 것 만으로도 만족 합니다.

      다시한번 감사드려요~

    • BlogIcon Eyeopener 2013.04.25 21:25 신고  댓글주소  수정/삭제

      드롭다운메뉴가 영상 밑으로 숨는 문제 해결 했습니다 ㅎㅎ
      검색을 통해서 z-index 공부 많이 했네요.

      결국 z-index로는 해결 못 했는데, 문득 생각난게 이미지에는 위로 펼쳐지는데.. 영상에만 밑으로 숨는걸가????? z-index문제라면 이미지에도 밑으로 숨어야 하는 것이 아닌가???
      이런 의문을 가지고 플래쉬와 z-index 관계를 알아 봤습니다.

      해답은 영상 embed태그 내 wmode속성에 있었습니다.

      wmode="direct"로 되어 있으면 z-index가 적용이 안되고,
      wmode="Opaque"로 설정해야 embed된 동영상이 어떤 div등 html태그 보다 하위에 위치하도록 설정된다는군요.
      Opaque로 바꿨더니 메뉴가 영상 위로 펼쳐지네요.

      z-index의 개념 조차도 몰랐었는데 이번 기회에 개념 정도 알게되었습니다.



    • BlogIcon 대문 demun 2013.04.25 22:43 신고  댓글주소  수정/삭제

      wmode="Opaque"로 설정해야 embed된 동영상이 어떤 div등 html태그 보다 하위에 위치하도록 설정된다는것은 저도 몰랐네요....

      확인을 안해봤으니....
      단순이 z-index 만 생각했는데....

      저도 배웠네요...