제가 스킨을 제작하면서 조금 불만아닌 불만인 점이 블로그 메뉴와 카테고리 메뉴 입니다.
티스토리는 치환자라는 개념이 있어서 html 을 업로드하면 서버에서 치환자가 html 로 변환되어서 보여집니다.
이 부분에서 불필요하게 추가되는 부분이 있습니다.

그래서 기존과는 조금 다른 마크업이 되어서 사용하는데 어려움이 없지않아 좀 있습니다.
이 부분을 해결해보고자 합니다.

평소 블로그메뉴는 홈, 태그로그, 미디어로그, 지역로그, 방명록....등으로 나뉘고, 추가적으로 공지사항이나 관리자, 글쓰기 등을 만들기도 합니다.
근데 문제는 홈이나 방명록을 제외하고는 거의 사용하지 않습니다.
추가적으로 만드는 관리자나 글쓰기등은 그래도 종종 사용합니다.

그래서 제가 생각한것은 블로그 메뉴라고 하고 그 하위로 모든 메뉴가 펼쳐지는 것입니다.
사실 홈은 블로그 로고를 클릭하면 홈으로 이동합니다. 이것도 블로그메뉴에서는 그닥 많이 사용되지는 않습니다.
하지만 많은 스킨들이 이 부분을 그냥 메인 네비게이션으로 사용합니다.

불필요한 부분이 사용된다고 할 수 있죠.
이 블로그 메뉴에 해당하는 치환자를 스킨에 포함해서 업로드하고 그걸 그대로 사용하되 드롭다운으로 사용하는 방법을 알려드립니다.

블로그 메뉴의 마크업은 아래와 같습니다.

html - blogmenu

<div class="blogMenu">
	[#\#_blog_menu_##]
</div>
이것을 저는 이렇게 수정했습니다.

html

<ul class="blogMenu">
	<li>BlogMenu <span class="subIcon"></span>
		[#\#_blog_menu_##]
	</li>
</ul>
여하는 여기서 변경된 점은 그리 중요하지 않습니다.
div 를 사용하나 ul 을 사용하나 거기서 거기죠.

일단 ul 을 사용했다고 가정하고 진행합니다.
이걸 스킨편집에서 html 에 넣고 저장을 하면 브라우져에서는 대략 아래처럼 보여집니다.


즉 span 다음에 ul 로 시작하는 부분이 치환자가 변형되어서 보여지는 부분입니다.
드롭다운 메뉴가 어떻게 보여지는지 아래에서 제가 배포하는 html 에 어떤 부분이 포함되어 있는지 한번 동영상으로 확인하시기 바랍니다.



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

더보기


하위메뉴를 표시하기 위해 이미지하나가 포함되어 있습니다.
예제에서는 html 과 같이 이미지를 두고 떠블클릭해서 브라우져로 열어보시면 됩니다.

blogMenu.html


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


다른 드롭다운 메뉴

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


신고

댓글