웹마스터 팁

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

 

 

 

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

제목 글쓴이 날짜
NZEO의 좌측 이동메뉴를 구현해 보자. (이동 On/Off 기능 포함) [43] steelheart 2002.08.20
플래쉬 효과나는 신비 메뉴 - -? *수정+카피라이터~ [17] ▩윤미 2002.06.09
링크된 텍스르 마우스 오버시 그림이 변한다.(메뉴로도..) [1] ▩윤미 2002.05.19
DHTM 을 이용한 마우스 오른쪽의 메뉴 만들기.. [11] 허진규 2001.03.30
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - new/blank) [8] file 뽀因㉦ㅓо Ø Γ 2006.09.19
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - top) [3] 뽀因㉦ㅓо Ø Γ 2006.09.19
슬라이드 배너및 메뉴가 익스플러 창 조절시 좌표값 변할때 사용 하는 구문!! 천문길 2006.08.21
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] 키드 2004.01.26
[매크로] mac_0004 메뉴를 담은 표의 위치와 모양 바꿔치기 매크로 [1] 김병희 2003.06.16
펼침메뉴소스 [12] 이성헌 2003.06.08
쭘식 메뉴만들기 - 세로 슬라이드 메뉴 [11] file 쭘's 2003.04.29
펼침 목록 메뉴 만들기! (나모) - 쭘's [8] file 쭘's 2003.03.25
나왔다 드러갔다하는 메뉴.. [15] file Mr. JH 2002.05.17
엔지오식 레이어 메뉴 구성하기 (허접) [3] 정영순 2002.03.28
[생초보팁] 서브메뉴 배경이미지 활용하기 [4] file 에혀라X 2010.11.24
저니님의 업 다운 퀵메뉴 적용하기 [4] file nabul2 2010.09.05