웹마스터 팁

처음으로 팁 올려봅니다 ^^;

 

 

 

저니님(http://jowrney.com) 께서 배포하시는 레이아웃에 포함된 업다운 퀵메뉴 버튼을 적용하는 팁입니다.

 

 

 

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><!--저니님의 업다운 퀵메뉴 끝-->

 

 

 

 

 

.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)       자신이 이미지를 올린 경로를 적어주세요.
left:965px; top:250px;      퀵메뉴 버튼의 위치입니다.

 

 

 

 

 

.js 에 아래를 추가합니다.

 

  /**
 * 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

quick_down.gif

quick_bg.gif

제목 글쓴이 날짜
v1.5를 위한 제어판 테마 애드온 정식 [4] file 우진홈 2012.02.13
업데이트 후 사이트 통함검색이 안되시는 분 보십시오^^ RGM 2012.02.12
1.5.1 최근 글 위젯에서 특수문자가 나가는 현상 [7] Crom 2012.02.12
댓글을 역순으로 출력하는 팁 (최근댓글이 가장 위에) [8] sejin7940 2012.02.10
make install 로 설치한 파일 제거 방법 [2] StyleRoot 2012.02.08
[XE1.4.5.10]게시판 파일첨부 버튼이 먹통일 때.. 카리브 2012.02.08
php 피카사 연동 프로그래밍 [1] 강아지60 2012.02.06
v1.5를 위한 팝업 모듈과 팝업 오프너 애드온 [55] file 우진홈 2012.02.06
스마트폰에서 xe 구축 [3] file 최태진814 2012.02.06
XE 포인트 파일캐쉬대신 memcache 사용하기 [4] 최기훈. 2012.02.06
부운영자 [26] file 송동우 2012.02.05
묻고 답하기 게시물 옮기는 法 [2] file CMD 2012.02.05
XE 1.5 이상으로 DB 이전시 일부 DB가 빠질 경우 - 내용추가(0203) [7] sejin7940 2012.02.02
확장변수이용시 숫자 일경우 정렬하기 팁 푸하라 2012.02.02
여러도메인으로 접속시 무조건 하나의 도메인으로 이동시키기 squarehacker 2012.02.02
xe 1.4.5.10 에서 board 1.4.2 (1.5용 게시판) 사용하기 file 양파농부 2012.02.01
HTML 편집모드에서 파일 첨부 본문 삽입시 자바스크립트 오류가 뜨는 문제 수정 팁 [1] misol 2012.02.01
xpresseditor 사용시 첨부파일 본문삽입 중복되는 문제 수정. [13] file misol 2012.01.31
xe1.4.5.10 에서 xe1.5의 xe_solid_enterprise 레이아웃 사용하기 양파농부 2012.01.31
1.5.x 이후 문서보기 유저 지정 애드온 안되는 현상 해결방법. [6] 해피신 2012.01.31