웹마스터 팁

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

 

 

 

저니님(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

제목 글쓴이 날짜
로그인 위젯 질문드립니다. 소리없는 2011.08.31
IE에선 업로드 되고 Firefox chrome에서는 업로드가 안될때 나정생 2011.08.30
[꽁수로 해결하자!] 모바일 레이아웃 적용시 파일 업로드 안 되는 문제 file 나루씡. 2011.08.28
sejin7940 게시판에 소셜XE 댓글 다는 방법 [소스코드] [5] Treasurej 2011.08.16
게시판 글쓰기에서 자동링크의 target을 _blank로 일괄 적용 무얼까 2011.08.23
조회수 제한 풀고, 조회수 증가값을 더 크게 하는 소스 [7] sejin7940 2011.08.21
닉네임이나 이름의 뒷부분을 ** 처리로 숨기고픈 경우 [2] sejin7940 2011.08.06
XE 를 루트로 옮기는 방법과 문제 대응책 정리 (도메인 접속시 xe폴더로 이동 없이 바로 사이트 뜨게 하기) [8] file Gekkou 2009.12.06
내 PC에서 XE 설치하는 방법 [2] file amd짱좋아 2011.08.17
XE 템플릿 구문 정리 [1] 우진홈 2011.08.17
FTP에서 인코딩 때문에 애 먹으시는 분들? file 히피♬ 2011.08.15
저니님의 업 다운 퀵메뉴 적용하기 [4] file nabul2 2010.09.05
계시판 확장변수에 대하여 여쭤봅니다. [1] 마지막드론 2011.08.14
내 PC에서 XE 빠르게 설치하는 방법 [7] 차오이 2011.04.10
자체 우편번호 검색DB 사용하기 우진홈 2011.08.11
플래시 랜덤하게 불러오기 [9] 선비숨결 2009.04.21
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정) [20] Firstlove 2011.03.14
모듈 개발 틀 쉽게짜기 file Xiso 2011.08.03
모바일 메인에서 쓰는 기능을 삽입할려면 어떻게 해야 할까요?> 최상순480 2011.08.02
유튭 비디오를 XE에 올리는 아주 간단한 방법 [1] 유샤인 2011.07.23