웹반응형 스킨 'skeleton' 상단메뉴 버튼(드롭다운) 만들기

이번 시간에는 웹반응형 스킨 'skeleton'의 최상단 부분에 메뉴버튼을 넣는 방법에 대해서 알아보도록 하겠습니다. 그냥 메뉴버튼은 아니구요..'드롭다운'기능이 적용된 형태에요~

 

초기의 skeleton 웹반응형 스킨(이 블로그의 스킨은 spider's web 입니다.)의 경우는 이 메뉴버튼이 있긴하지만 '드롭다운'기능이 적용되어 있지 않습니다.

 

 

웹반응형 스킨의 특징이 모바일처럼 화면이 작아지게 되면 사이드바에 있던 카테고리 목록이나 최근글 리스트가 전부 하단부로 내려가거나 사라지게 되죠(특정 소스 적용시).

 

그래서 상단 메뉴버튼에 '드롭다운'기능을 적용해놓으면 보다 효과적일수도 있으니 참고하세요^^

 

많은 분들이 댓글로 문의를 하시더군요~ 소스 하나하나에 대해서 상세히는 모르지만 아는 부분만 알려드릴께요~

 

이 블로그의 제일 윗부분을 보면 home,category,구독,menu,guest..이렇게 5가지의 메뉴버튼을 볼 수 있습니다.

 

자세히 보면 카테고리,구독,메뉴 버튼에만 아래쪽 화살표시가 되어 있는데..이 버튼들만 '드롭다운'기능이 적용되어 있는 것이죠^^

 

카테고리 버튼을 눌러보면 위와 같이 '전체글 보기'에서 부터 '생활정보센스'라는 메뉴까지 주루룩 나타나는 모습을 확인할 수 있습니다.

 

구독 버튼이나 메뉴버튼도 마찬가지로 위 캡쳐화면처럼 클릭해주면 바로 밑에 메뉴들이 나타나게 됩니다.

 

이 소스를 적용하는 방법만 이해하게 되면 자신의 블로그에 맞게끔 편집해서..보다 편리하게 웹반응형 스킨을 사용할 수 있게 되겠죠.

 

먼저 이런 버튼들이 있는 위치를 티스토리 관리자 메뉴의 skin.html에서 찾아보면 <div class="container skeleton-nav">라는 곳에 있습니다.

 

웹반응형 스킨 'skeleton' 상단메뉴 버튼(드롭다운) 만들기

 

바로 찾으려면 단축키 CTRL + F 로 'skeleton-nav'를 검색하시면 되요^^ skin.html에는 딱 하나뿐이에요~

 

skeleton 웹반응형 스킨의 상단메뉴 버튼의 구조를 설명하고자 메모장으로 해당 소스를 복사해보았습니다.

 

위 캡쳐화면을 자세히 보시면 상단메뉴 버튼이 어떤 구조로 되어 있는지..초보자라도 어느 정도는 구별할 수 있을듯 하네요.

 

container가 전체를 감싸고 있는데..그 내부에 홈버튼, 카테고리,구독,메뉴,방명록 버튼이 들어있습니다.

 

사실 저도 왜 이런 소스가 사용되었는지는 전문가가 아니라서 잘모르지만..이런 구조만 알면 자신이 원하는대로 편집이 가능하겠더라구요.

 

드롭다운 기능이 적용되어 있는 버튼들의 소스를 자세히 보면.. <li class="dropdown></li>라는 부분이 보입니다.

 

바로 이 소스 내부에 최상위 버튼 이름을 포함해서..하위 메뉴까지 넣어주면 드롭다운 기능의 버튼이 완성되는 것이죠^^

 

드롭다운 버튼의 하위 메뉴소스의 구조까지 살펴보면 위와 같습니다.

 

이부분은 '카테고리'버튼인데요..빨간색 줄이 그어진 곳은 실제로 화면상에 나타나게 되는 메뉴의 이름이고 바로 왼쪽에 있는 것이 블로그내부 주소입니다.

 

자신의 카테고리 내부 주소와 이름으로 바꿔주기만 하면 쉬워요^^

 

그리고 노란색 부분은 각 메뉴들 사이의 경계선 표시입니다..필요없다면 지워도 무방하지만..조금 보기 좋게 구분하고자 한다면 중간중간에 삽입해주면 좋겠죠.

 

이번에는 구독,메뉴 버튼의 드롭다운 메뉴 소스입니다.. 다른 부분은 크게 손댈 필요는 없구요...빨간색 부분만 자신의 블로그 주소로 바꿔주기만 하면 됩니다.

 

그외에 추가하고 싶은 부분이 있다면 해당 주소를 넣고 이름만 넣어주면 된다는^^

 

직접 일일히 써야하는 번거로움이 있기때문에..편의를 위해서 아래에 웹반응형 스킨 'skeleton' 상단메뉴(드롭다운) 소스를 첨부합니다. 도움이 되셨으면 좋겠네요.

 

웹반응형 스킨 상단메뉴 버튼 소스.txt

다운로드

 

✅웹반응형 스킨 skeleton 'footer'정보 수정하기

웹반응형 스킨 skeleton 'footer'정보 수정하기

✅티스토리 웹반응형 스킨 'fastboot' 다운로드와 적용기

티스토리 웹반응형 스킨 'fastboot' 다운로드와 적용기

✅블로그 스킨 백업은 꼭 하세요! 까불다가 날려먹은 사연

블로그 스킨 백업은 꼭 하세요! 까불다가 날려먹은 사연

✅skeleton 웹반응형 스킨 사이드바 '최신글 목록' 수정하기

skeleton 웹반응형 스킨 사이드바 '최신글 목록' 수정하기