웹마스터 팁
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
-
직관적인 팁 감사합니다. 레이아웃 제작자이신 저니님의 친절한 주석도 감사합니다.
-
xemall
2010.09.30 13:46
감사합니다.잘 적용하겠습니다 ^^
-
노형종
2011.08.02 11:27
그대로 햇는대도 아무것도 창에 안나타난다는...ㅠ.ㅜ 모가 문제일가요???흐~~일주일째 고생중... -
nabul2
2011.08.15 02:45
layout.html 부분에서
코드 하이라이터로 등록하면서 굵은 글씨 부분이 변형되었습니다. ^^;;<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>
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 에디터 확장 컴퍼넌트 중 원하는 항목을 밖에다가 버튼화 [3] | sejin7940 | 2010.07.18 |
회원확장정보 변수 (출처:sMaker) [5] | 시니시즘 | 2010.07.19 |
1.4.2 -> 1.4.3 업데이트 후 화면 백지 상태 해결방법 [2] | 니오티 | 2010.07.25 |
이미지 여러개 등록시 공백 팁입니다. 10.07.29 10:05 수정
[15]
![]() | 스카이피아 | 2010.07.25 |
XE 용량 효과적으로 줄이기 [13] | 코스트렐리아 | 2010.07.30 |
모바일 레이아웃 로그인페이지 개선방법 [4] | 스카이피아 | 2010.08.01 |
페이지 모듈 사용시 여백 관련한 팁! | sejin7940 | 2010.08.02 |
검정 배경 홈페이지용 회원 정보 스킨
![]() | LutZ | 2010.08.03 |
회원 정보 및 회원 리스트에 회원 성별 앞에 아이콘 넣기
[5]
![]() | 늘푸른이 | 2010.08.06 |
게시판에 사전질문 넣기 특히 확장 변수 없는 지식in 게시판 - 초보자용
[3]
![]() | THEOTHERS | 2010.08.07 |
관리자페이지 회원목록을 일반페이지에서 사용하기
[5]
![]() | 늘푸른이 | 2010.08.07 |
무분별한 스팸글 등록으로부터 임시해결 팁
[15]
![]() | 라르게덴 | 2010.08.12 |
게시판 본문페이지 닉네임 옆에 회원그룹명 사용
[4]
![]() | 늘푸른이 | 2010.08.13 |
관리자에서 회원리스트(남성,여성리스트 분류해서 보기)
[5]
![]() | 늘푸른이 | 2010.08.13 |
Belarc Advisor - Free Personal PC Audit | 레미짱 | 2010.08.14 |
레이아웃 관리자 페이지 html 에디터창 늘리기+줄이기
[1]
![]() | 레드폭스 | 2010.08.25 |
플래시, 선택박스(??)가 로그인 박스 등을 튀어 나올 때
[4]
![]() | hhgyu | 2010.08.26 |
초보자도 따라하는 XE로 홈페이지 만들기 강좌 포스트입니다. [2] | 놀라운넘 | 2010.08.27 |
페이지에서 첨부파일 100% 에서 증발이 되면...? [6] | 우리아기 | 2010.09.04 |
저니님의 업 다운 퀵메뉴 적용하기
[4]
![]() | nabul2 | 2010.09.05 |