웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
.js 에 아래를 추가합니다.
images 폴더에 아래 이미지를 첨부 (해당이미지의 저작권은 저니님에게 있습니다.)
저니님의 업 다운 퀵메뉴 적용하기
2010.09.05 05:08
처음으로 팁 올려봅니다 ^^;
저니님(http://jowrney.com) 께서 배포하시는 레이아웃에 포함된 업다운 퀵메뉴 버튼을 적용하는 팁입니다.
layout.html 에 아래를 추가합니다.
.css 에 아래를 추가합니다.
left:965px; top:250px; 퀵메뉴 버튼의 위치입니다.<div id="slideWrap"><!--저니님의 업다운 퀵메뉴 시작--> <div class="slideArea"> <div class="slideMenu"> <div class="up"><a href="javascript:window.scrollTo(0,0"><span>UP</span></a></div> <div class="down"><a href="javascript:window.scrollTo(0,50000"><span>DOWN</span></a></div> </div> </div> </div><!--저니님의 업다운 퀵메뉴 끝-->
.css 에 아래를 추가합니다.
/* ----- Quick Menu ----- */ #slideWrap { width:940px; margin:0px auto;} #slideWrap .slideArea {position: relative; display:inline; z-index:2} /* #slideWrap .slideArea .slideMenu{position:absolute;width:27px;height:57px; left:222px;top:220px;} */ #slideWrap .slideArea .slideMenu{background: url(../images/default/quick_bg.gif) no-repeat; position:absolute;width:27px;height:57px; left:965px;top:250px;} .slideMenu .up {width:27px; height:14px; margin-top:15px} .slideMenu .up a {display:block; background: url(../images/default/quick_up.gif) no-repeat; width:27px; height:14px} .slideMenu .up a:hover {background-position: 0px -14px;} .slideMenu .up a span {display: none} .slideMenu .down {width:27px; height:14px} .slideMenu .down a {display: block;background: url(../images/default/quick_down.gif) no-repeat; width:27px; height:14px} .slideMenu .down a:hover {background-position: 0px -14px;} .slideMenu .down a span {display:none}background: url(../images/quick_bg.gif) 자신이 이미지를 올린 경로를 적어주세요.
/** * XE엔진에서 다른 Javascript 라이브러리와의 충돌을 방지하기 위해 막아 놓은 것으로 * $()로의 접근 대신 jQuery() 로 변경 처리함, 자세한 사항은 아래의 URL에서 확인가능. * http://docs.jquery.com/Core/jQuery.noConflict * http://www.xpressengine.com/18448963 * by Jowrney */ jQuery(document).ready(function () { /** * 플로팅 메뉴, 페이지의 최상단과 최하단 이동을 편리하게 한다. * by Jowrney */ var currentPosition = parseInt(jQuery(".slideMenu").css("top")); jQuery(window).scroll(function() { var position = jQuery(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다. var sum = position + currentPosition+"px"; jQuery(".slideMenu").stop().animate({top:sum},500); }); });
images 폴더에 아래 이미지를 첨부 (해당이미지의 저작권은 저니님에게 있습니다.)
![quick_up.gif](https://xe1.xpressengine.com/files/attach/images/121/479/111/019/quick_up.gif)
![quick_down.gif](https://xe1.xpressengine.com/files/attach/images/121/479/111/019/quick_down.gif)
![quick_bg.gif](https://xe1.xpressengine.com/files/attach/images/121/479/111/019/quick_bg.gif)
댓글 4
제목 | 글쓴이 | 날짜 |
---|---|---|
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치
[31]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
[27]
![]() | @kihwa | 2003.07.26 |
이미지2장으로 홈페이지만들기 [5] | Conz | 2003.08.01 |
이미지2장으로 홈페이지만들기 2탄 [3] | Conz | 2003.08.01 |
<TD>에 스크롤바 생성하기!! [12] | millth | 2003.08.04 |
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] | 김병희 | 2003.08.06 |
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] | 마이템플릿 | 2003.08.13 |
테이블의 세로정렬 [4] | clo | 2003.08.20 |
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] | 윤혜성 | 2003.12.26 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1)
[31]
![]() | 토끼군 | 2003.08.20 |
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] | 행복한고니 | 2003.08.22 |
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] | 비행소년™ | 2003.08.27 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때...
[9]
![]() | PHASE | 2003.09.08 |
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] | 비행소년™ | 2003.09.16 |
마우스 커서에 대해서...
[16]
![]() | impre | 2003.09.20 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] | 김형준 | 2003.10.04 |
IFRAME 삽입 [20] | 박종익 | 2003.10.10 |
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] | siche | 2003.11.26 |
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] | Juny. | 2003.12.12 |
스크롤바 색상을 아름답게.
[17]
![]() | 해리포터포에버 | 2003.12.16 |