http://digiko.egloos.com/viewer/5685734

다른 것도 공부하시려면 구글에서 jQuery 퀵메뉴로 검색하시면 됩니다.

js 파일은 검색하셔서 필요하신 버전으로 다운받으셔서 레이아웃이 있는 곳에 업로드해서 링크 거시면 됩니다. 번거로우시면 CDN을 이용하는 방법도 있습니다.

최소화  버전 주소는

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

풀버전은

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

CDN주소를 사용하는 경우는 아래처럼 한번 해 보시죠. 해당 레이아웃 원하시는 부분에 아래와 같이 한번 붙여보시구요.

안되면 또 말씀을 해 주십시오. 저도 테스트는 하지 못했습니다.

<style>부분의 margin-left 값은 레이아웃에 따라서 수치를 조금 조정하셔야 할 겁니다.

<div id="quick">
  <ul>
    <li>사이드배너 1</li>
    <li>사이드배너 1</li>
    <li>사이드배너 1</li>
    <li>사이드배너 1</li>
  </ul>     
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
                    var quick_menu = $('#quick');
                    var quick_top = 100 ;      
                    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>
<style>
  #quick{position:absolute; z-index:99999; top:0; left:50%; margin-left:491px; width:100px; padding:5px 0px 25px 0px; overflow:auto; display:block}
</style>