앞으로 블로그 꾸미기에 도움이 되는 팁과 테크, 혹은 도구 등도 가끔 포스트 하려고 생각 중입니다. 도구라 하면 대표적으로 블로그용 위젯이나 웹서비스 등이 있겠죠. 제가 아는 지식이 일천한 관계로 주로 소개가 될 것입니다.


Drop-down Menu Bar


이번에 소개해 드리는 깔끔한 메뉴 바는 블로그 사이드바에 적용하면 복잡한 사이드바 공간을 획기적으로 줄일 수 있습니다.

아래 예는 사이드바의 링크를 위젯을 이용하여 드롭-다운 메뉴로 바꾼 것입니다. 길게 늘어질 링크 목록이 단 2개의 메뉴 바로 대체되었습니다. 추가와 삭제가 자유로워서 관리도 쉽습니다. 꼭 링크뿐만 아니고, 카테고리 등 활용 방안은 생각하기에 따라 많겠죠.





  • 기본값으로 드롭다운 메뉴 바 내의 메뉴를 클릭했을 때 새 창에서 열리게 되어 있지만 현재 창에서 바로 열리도록 하고 싶다면,
    코드 중에 "window.open"이라는 부분을 "window.location.replace"로 대체
    하시면 됩니다. 코드를 복사하여 자신의 블로그 환경에 맞게 수정해서 사용하시면 됩니다.

  • 메뉴 바의 가로 폭을 변경하고 싶다면,
    style="width: 160px;"을 찾아서 숫자 160을 여러분의 블로그 사이드바 가로 폭에 맞게 변경
    해 주시면 됩니다. 참고로, 저의 티스토리 블로그 스킨의 가로 폭은 180입니다.



블로그 사이드바용 드롭다운 메뉴 바 코드:




- 출처: Best Widgets for free


+ Recent posts