[해상도와 상관없이 브라우저 한쪽에 붙어서 따라다니는 플로팅메뉴 만드는 방법]
예전 몇번의 포스팅을 통해서 플로팅배너, 플로팅버튼 등에 대해 설명을 했었답니다.
이번 글에서는 플로팅버튼의 위치에 대한 응용으로 해상도와 전혀 상관없이 브라우저의 일정한 위치에 붙어다니는 플로팅메뉴에 대해 소개할까 합니다.
이번 포스팅의 발단
이번 플로팅버튼 응용포스팅을 하게된 계기는 한 방문자의 댓글이었습니다.
질문의 내용은 가로형 플로팅 테이블에 간단한 링크를 넣어서 사용하고 싶다는 것이었습니다.
물론 추가 댓글을 통해 질문의 내용을 대략적으로 알게 되었구요.
이번 포스팅의 내용은?
위 질문에 대한 해결과 동시에 가끔 제 블로그에서 방명록을 찾지못해 헤매는 분들을 위해서 내비게이션 테이블을 만들어 보기로 했습니다.
내비게이션 테이블에 들어갈 메뉴는 홈, 방명록, 페이스북, 트위터 이렇게 네가지로 구성했습니다.
1. 테이블 구성
가로형 1X4 테이블이며 이미지를 이용한 하이퍼링크만을 넣은 간단한 구성.
- 1X4는 1행 4열(참고 포스트:[블로그팁]테이블(표)을 티스토리에서 활용하자! - 1. 행과 열이란?)
2. 사용된 태그소스
소스를 전체 캡쳐해서 보여드리고 중요한 부분만 따로 설명을 드리겠습니다.
3. 소스의 삽입 위치
위치는 크게 상관없지만 되도록이면 <body>의 내부에 넣으실 것을 권합니다.
추천 구독 플로팅버튼과의 위치 비교
그럼 플로팅메뉴의 위치를 살펴볼까요?
그럼 해상도가 낮아졌다는 가정하에 브라우저의 크기를 줄여봤습니다.
그리고 만약 오른쪽으로 위치를 잡고 싶다면 left -> right로 변경하시면 간단하게 위치를 변경할 수 있습니다.
오늘의 팁 어떠셨나요?
사실 포스팅을 준비하면서 브라우저에 붙어다니는 메뉴의 소스를 검색을 통해 알아보려고 했었답니다.
그러다가 알고 있는 소스를 조금 수정해서 적용하다보니 완벽하진 않지만 어느정도 원하는 결과를 얻을 수 있었습니다.
스킨을 수정하려면 겁부터 나시나요? 사실 저도 아직까진 그렇습니다...^^;;
하지만 신중하게 하나씩 살펴보고 수정한다면 우연찮게 원하는 결과를 얻을 수도 있다는 것 잊지마세요~
사실 포스팅을 준비하면서 브라우저에 붙어다니는 메뉴의 소스를 검색을 통해 알아보려고 했었답니다.
그러다가 알고 있는 소스를 조금 수정해서 적용하다보니 완벽하진 않지만 어느정도 원하는 결과를 얻을 수 있었습니다.
스킨을 수정하려면 겁부터 나시나요? 사실 저도 아직까진 그렇습니다...^^;;
하지만 신중하게 하나씩 살펴보고 수정한다면 우연찮게 원하는 결과를 얻을 수도 있다는 것 잊지마세요~
