스크롤 메뉴 jQuery 적용 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

스크롤 메뉴 jQuery 적용 정보

스크롤 메뉴 jQuery 적용

본문

팁란 찾아보고 안보이길래 적어봅니다.

먼저
http://webnoon.net/entry/jQuery-%EA%B0%95%EC%A2%8C3-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B0%94-%EB%94%B0%EB%9D%BC%EB%8B%A4%EB%8B%88%EB%8A%94-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A9%94%EB%89%B4
웹눈이야기님 블로그 팁 보고 그누보드에 적용시켰습니다.

1. head.sub.php 파일에 jquery 파일 추가
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.4.2.min.js"></script>

2. 스타일 적용 - 해당 사이트에 맞게끔 수정하셔야 됩니다.
저같은 경우는 전체 div나 main div 에 position:relative; 속성 추가후 아래처럼 사용합니다.
<style type="text/css">
/* 서브페이지 우측 스크롤메뉴 */
#quickmenu_sub{position:absolute; right:-70px; top:10px; width:67px; height:120px; z-index:1}
#quickmenu_sub a img{vertical-align:middle;}
</style>

3. 적용하고 싶은 파일에 아래 코드 추가
<!-- ## right quick menu ##  -->
<div id="quickmenu_sub">
스크롤 배너(메뉴) 내용
</div>

<!-- jquery use -->
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = parseInt($("#quickmenu_sub").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$("#quickmenu_sub").stop().animate({"top":position+currentPosition+"px"},1000);
});
});
</script>
<!-- ## right quick menu ##  -->

jQuery 적용하니 간단하고 좋네요~ㅎㅎ
파이어폭스, 크롬, ie8 정상 작동합니다.
추천
2

댓글 9개

html 코드를 어떻게 작성하셨는지에 따라 틀립니다.
저같은 경우는
<body style="text-align:center;"><!-- ie가운데 정렬 -->
<div style="width:990px; margin:0 auto; text-align:left; position:relative;">
사이트 레이아웃 및 컨텐츠
    <div id="quickmenu_sub">내용</div>
    jquery 스크립트
</div>
</body>
주로 위와 같이 작성하구요.

#quickmenu_sub{position:absolute; right:-70px; top:10px; z-index:1} 은
상위div 기준으로 오른쪽에서 -70px 상단에서 10px 자리에 위치하게 됩니다.
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT