IT 이야기/IT Tech

블로그에 스크롤 메뉴를 달아봅시다

필넷 2009. 9. 4. 09:39
반응형

가끔 이웃블로그를 방문할때 스크롤 메뉴가 달려있다면 곧잘 이용하곤 합니다.
스크롤 메뉴는 말 그대로 마우스를 위아래도 스크롤할 수고를 덜어주고 한번의 클릭으로 공간이동(?)을 합니다.

한번 이용해보면 정말 편리하다는 생각을 하죠. 그래서 전 오래전부터 화면의 왼쪽에 보이는 스크롤메뉴를 사용하고 있습니다.

스크롤메뉴 왜 필요할까요?


블로그의 방문자는 크게 두가지 부류로 나눌 수가 있는 것 같습니다.

첫번째는, 무작위로 검색을 통해 유입되는 방문자입니다. 이런 방문자들은 어떤 뚜렷한 주제가 목적을 가지고 해당 블로그를 방문합니다. 따라서 검색으로 찾은 포스트를 다 읽은 뒤에도 블로그의 카테고리 목록을 찾고 비슷한 주제의 포스트를 찾고자 합니다.
일반적으로 블로그의 카테고리들이 상단에 위치하고 있기때문에 마우스를 스크롤하게 됩니다. 이와같은 상황을 고려한다면 자신의 블로그에 검색유입을 통해 들어오는 방문자가 많다면 카테고리 메뉴가 하단에 있는 1단 스킨도 고려해볼만 합니다.

두번째는, 주기적으로 교류하는 블로그 이웃이나 구독자들의 방문입니다. 이렇게 방문하는 블로거들은 주로 댓글을 통한 교류가 비교적 활발합니다. 하지만 댓글을 달기위해서 기나긴 댓글 목록을 아래로 스크롤해야 하는 불편함이 있습니다. 때로는 포스트를 중간 정도만 읽고 바로 댓글창으로 가서 방문의 흔적만 남기고 가기도 합니다. 따라서 이런 방문자들에게는 댓글달기 창으로 바로갈 수 있는 스크롤 메뉴는 아주 편리합니다.


필넷의 블로그라이프에 사용된 스크롤 메뉴는?


seevaa님의 스크롤 따라 움직이는 메뉴를 참고하였습니다. 제 블로그의 스킨과 어울리게 디자인만 수정했습니다. 자세한 내용은 seevaa님의 블로그에서 확인하시면 되겠습니다. ^^

skin.html

[code] 필넷의 블로그라이프 :: 블로그에 스크롤 메뉴를 달아봅시다... [/code] scrollmenu.js 가 스크롤 메뉴를 구현하는 자바스크립트입니다. seevaa님이 공개한 소스와 동일합니다.

style.css

[code]#STATICMENU { padding:0; margin:0; position:absolute; z-index:1; background-color:#25251d; width:80px; } #STATICMENU a { display:block; float:left; padding:10px 15px; color:#FFF; font:12px Trebuchet MS; } #STATICMENU a:hover { background-color:#cc0000; text-decoration:underline; }[/code]
반응형