스크롤을 따라다니는 플로팅 메뉴(floating menu)
- 퍼블리셔/jQuery
- 2011. 2. 27. 06:00
스클롤을 따라다니는 플로팅 메뉴는 검색을 해보시면 많이 있는것을 알수 있을겁니다.
아래의 파일을 스킨편집메뉴에서 파일올리기로 업로드 해주세요.
이제 사용할 준비가 끝났습니다.
코드를 보시면 position 속성이 가장 중요합니다. 이것이 다른것을 바뀔경우 이상하게 보일수 있습니다.
이제 끝입니다.
각자의 환경에 맞쳐서 사용하시면 됩니다.
제가 소개하는 floating menu 는 jquery 를 사용하는 메뉴입니다.
참고로 jquery 를 사용하면 정말 많은 효과를 줄수 있습니다.
그리고 소개하는 플로팅 메뉴는 크로스 브라우징 환경에 있어 모든 브라우져에서 정상작동합니다.
예제 페이지를 참고하세요.
스크롤을 내렸다 올렸다 해보세요.
제 블로그에 적용되어 있는것입니다. 현재 우측에 따라다니는 메뉴가 보이지요?
이제 적용하는 법을 알려드리겠습니다.
플로팅메뉴(floating menu) 적용하는 법
jquery_mini.js
그다음 아래의 코드를 <head> 와 </head> 사이에 넣으세요.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<script src="./images/jquery_mini.js" type="text/javascript"></script>
<script src="./images/jquery.dimensions.js" type="text/javascript"></script>
<!-- 스크롤 -->
<script type="text/javascript">
// <![CDATA[
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
// ]]>
</script>
아래 html 코드를 아무곳에나 넣으시면 됩니다.
참고로 이 코드는 페이지가 모두 로딩 된다음에 로딩이 되어도 상관이 없기때문에 html 순서상 아래쪽에 삽입하는것이 좋습니다.
저의 경우 맨 아래 footer 바로위에 삽입하였습니다.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<!-- floating menu -->
<div id="floatMenu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>
<!-- //floatMenu -->
마지막 css 설정만 남았습니다.
다른것은 적절이 수정하시면 되나 아래 알려드리는것은 많이 수정하시면 안됩니다.
/* #floatMenu */
#floatMenu{
text-align:left;
position:absolute;
width:40px;
top:200px;
right:10px;
padding:0;
margin:0;
z-index:1000;
}
그 다음은 a 에 해당하는 설정입니다.
#floatMenu a{
text-decoration:none;
display:block;
}
적절하게 a 에 해당하는 부분에 padding(여백) 이나 color(글자색) 등을 설정해서 사용하시면 됩니다.
저처럼 위로이동, 아래로이동과 함께 링크를 추가하고 싶으신분은 아래 링크를 참고해주세요.