웹마스터 팁

  2. Support
  3. 웹마스터 팁

슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!!

2007.02.03 11:07

TiZa

다들 아시죠. 슬라이딩 메뉴!!
웬만한 홈페이지는 다 들어가 있죠.

간단합니다.
젤 쉽게 하는방법입니다.
나모나 드림위버에 밑에 쏘스를 붙여넣기 하시고
편집모드에서 마음대로 수정하시면 됩니다.
수정하시고 편집(EDIT)모드에서 레이어 자체를 복사해서 꾸미시는 페이지에 붙여넣기 하시고 위치만 잡아주시면 됩니다.

쏘스 방식은

하나의 레이어 안에 테이블이 들어가고 그안에 내용이 들어가는 거죠.
직접 편집모드에서 보시면 아실거에요.
설정해줄신건 Y축 시작위치만 설정해주시면 다른건 건드릴거 없습니다.
X축위치는 편집모드에서 레이어 X축 위치만 마음대로 잡아주시면 됩니다.

쏘스가 BODY안데 들어가는것 주의 해주세요.

그럼 다들 멋진 홈피 만드시길!! +_+


<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">



<DIV id="divMenu"
style="width:150px; height:232px; position:absolute; left:888px; top:196px; z-index:1;">
<!--떠다니는 레이어 스크립트-->
<SCRIPT language=JavaScript>
<!--
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements(){
      var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;

      if ( bNetscape4plus ) {
              yMenuFrom   = document["divMenu"].top;
              yMenuTo     = top.pageYOffset + 300;
      }
      else if ( bExplorer4plus ) {
              yMenuFrom   = parseInt (divMenu.style.top, 10);
              yMenuTo     = document.body.scrollTop + 195;    <-- Y축 시작위치 설정
      }

      timeoutNextCheck = 500;

      if ( Math.abs (yButtonFrom - (yMenuTo + 100)) < 6 && yButtonTo < yButtonFrom ) {
              setTimeout ("CheckUIElements()", timeoutNextCheck);
              return;
      }

      if ( yButtonFrom != yButtonTo ) {
              yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
              if ( yButtonTo < yButtonFrom )
                      yOffset = -yOffset;

              if ( bNetscape4plus )
                      document["divLinkButton"].top += yOffset;
              else if ( bExplorer4plus )
                      divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;

              timeoutNextCheck = 10;
      }
      if ( yMenuFrom != yMenuTo ) {
              yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
              if ( yMenuTo < yMenuFrom )
                      yOffset = -yOffset;

              if ( bNetscape4plus )
                      document["divMenu"].top += yOffset;
              else if ( bExplorer4plus )
                      divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;

              timeoutNextCheck = 10;
      }

      setTimeout ("CheckUIElements()", timeoutNextCheck);
}

function OnLoad()
{
      var y;
      if ( top.frames.length )
      if ( bNetscape4plus ) {
              document["divMenu"].top = top.pageYOffset + 135; //넷스케이프용 로딩시 시작 레이어 좌표 값
              document["divMenu"].visibility = "visible";
      }
      else if ( bExplorer4plus ) {
              divMenu.style.top = document.body.scrollTop + 135; //익스플로러용 로딩시 시작 레이어 좌표 값
              divMenu.style.visibility = "visible";
      }
      CheckUIElements();
      return true;
}
OnLoad();

-->
</SCRIPT>
<!--/떠다니는 레이어 스크립트-->


<!-- 레이어 내용부분 시작-->

<TABLE cellSpacing=5 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD>
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD height="60">
                                        <p><img src="이미지경로" width="93" height="200" border="0"></p>  <-- TEXT건 이미지건 원하시는 대로 수정하시면 됩니다.
</TD></TR>
</TBODY></TABLE></TD></TR></TBODY></TABLE>
<!-- /레이어 내용부분 끝-->

</DIV>



</body>

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
XE관리자 메뉴 활용 방법 ^^ [24] file 똥똥 2011.12.09
관리자메뉴에 사이트메뉴 안나오시는분 수정 하세요!! [5] file 박인영647 2012.02.16
가가라이브 위젯이 메뉴를 가릴때 수정방법 [2] 웹엔진 2012.01.26
관리자모드에서 메뉴 항상 펼치기 [1] file 아드레날린 2009.06.09
Xe 1.5.0.9 사용자 설치 메뉴얼 제1부. [3] file 황비 2011.12.04
제로보드 xe 쇼핑몰 오늘본 상품 퀵메뉴 만드는 법 알려주세요 유유히 2011.12.15
V3 게시판 (분류메뉴-2단계지원) 일반 게시판으로 옮겨 사용하기 ForHanbi 2011.09.09
저니님의 업 다운 퀵메뉴 적용하기 [4] file nabul2 2010.09.05
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정) [20] Firstlove 2011.03.14
공식 레이아웃 v2 스킨에서 롤오버 메뉴 적용하기. [6] 노기욱 2010.02.01
"이 게시물을..." 추천/비추천/신고 메뉴를 버튼으로 [28] file xe촙5 2007.11.08
메뉴 클릭시 알림메시지 띄우기 [1] 도라란 2011.02.27
메뉴에서 채팅방 띄우기 용도로 쓰는 스크립트 코아 코스튬 2011.01.30
[왕초보팁] 2차 메뉴를 레이아웃 스킨에 넣을 때 [2] HolyJohn 2011.01.21
초보자도 쉽게 이해할수있도록 주석을 자세히 달아놓은 APM 메뉴얼 (3 of 3) [2] Dopesoul 2002.12.21
초보자도 쉽게 이해할수있도록 주석을 자세히 달아놓은 APM 메뉴얼 (2 of 4) [4] Dopesoul 2002.12.18
초보자도 쉽게 이해할수있도록 주석을 자세히 달아놓은 APM 메뉴얼 (1 of 4) [3] Dopesoul 2002.12.18
[PHP 동영상강의] 50. 자바스크립트로 풀다운 메뉴제작 [2] 서기 2007.08.08
include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] 김병희 2003.10.25
슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!! [4] TiZa 2007.02.03
태그 쓰기