웹마스터 팁

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

 

 

 

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

제목 글쓴이 날짜
메뉴와 연결된 xe의 page에 iframe을 사용해서 제로보드4 게시판을 불러들였습니다 [2] 바람처럼.. 2007.09.14
(글) 서명 높이 줄이고 스크롤바 생성 [4] Simulz 2007.10.26
홈페이지에 간단하게 뮤직플레이어와 악세사리 설치하기 file 푸른커튼 2008.01.12
bgm 넣을려고 프레임 나눴을때 가로스크롤바 해결방법. [12] 또리♡485 2008.01.25
스크롤바색상 변하게 [5] file 김민787 2008.05.28
BGM 가로스크롤바 없애는 방법.. 청개굴이 2009.06.03
레이 아웃이 가로 가운데일 때 좌우 왔다 갔다 하는 문제 [5] 강신봉 2009.07.09
XE 수직 스크롤바 무조껀 띄우기 CSS [7] 데즈라레 2009.09.28
초보팁] 외부페이지에서 가져올 시 새창 띄우기 안되는거 수정하기(자바) [1] 파라테일 2009.12.10
ie8 스크롤바 때문에 레이아웃이 움직이는 경우 오실롯 2010.06.22
저니님의 업 다운 퀵메뉴 적용하기 [4] file nabul2 2010.09.05
스크롤바 색깔 바꾸는 스타일... [8] 잔디 2001.01.05
▩왼쪽에다가 스크롤바 넣기 [1] ▩윤미 2002.02.21
오른쪽 스크롤바 에 출렁이며 내려오는 공지창 [3] file choice 2002.02.25
스크롤바 색상을 이쁜것만 모와요 [6] ZipShin 2002.03.16
투명한 아이프레임 [15] 파야 2002.04.04
iframe태그.. HTML문서안에 또하나의 HTML문서.. [9] 신종은 2002.05.09
홈페이지의 대문에서 스크롤바 없애기 [10] keymove 2002.06.15
스크롤바 색상 변경 ...! [6] 오빠야™ 2002.06.17
TEXTAREA 스크롤바 뒤집기 [4] ZipShin 2002.06.20