부스카의 ComFunny

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

Drop-down Menu Bar

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

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

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

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

블로그 사이드바용 드롭다운 메뉴 바 코드:
<div class="widget-content"><br /><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 160px;" name="menu" size="1"><option selected="selected" value="0"> This is your Title <br /><option value="http://hotwidgets.blogspot.com">Hot Widgets<option value="http://widgetsforfree.blogspot.com">The Best Widgets<br /><option value="http://jpamorgan.com/">jpamorgan<br /><option value="http://http://http://hotwidgets.blogspot.com/2008/02/hot-blogger-templates.html/">Hot Blogger Templates<br /><option value="http://hotwidgets.blogspot.com/2008/02/gmail-toolbox-60-tools-and-resources.html">Gmail tools and Resources<br /><option value=" http://widgetsforfree.blogspot.com/2008/03/drop-down-menu-bar.html">Get this widget</select></div>



- 출처: Best Widgets for free