본문 바로가기

Web Progreming

[ jQuery ] 퀵메뉴 슬라이딩 스크립트

jQuery 스크립트로 퀵메뉴를 간단히 구현할 수 있다.

일반적인 스크립트로는 웹표준을 지키기가 많이 힘든점이 있기 때문에 jQuery 사용을 권장한다.

아래 소스를 긁어 복사한 다음 자신의 웹페이지에 맞게 소스를 수정해 사용하면 된다.

//퀵메뉴 레이어

<div id='quick' style='position:absolute;z-index:2;top:0;left:0;width:100px;'>
퀵메뉴 레이어
</div>

//jQuery 로드

<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
 

//스크립트 정의

<script type="text/javascript">
var quick_menu = $('#quick');
var quick_top = 80;

/* quick menu initialization */
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 500 );
$(window).scroll(function(){
quick_menu.stop();
quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 1000 );
});
});
</script>