웹마스터 팁

  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>

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
고글검색하기!! [7] 김민환 2006.10.30
셀렉트 박스를 이용한 콘트롤 만들기 ( 위로 이동 ) [1] 예뜨락 2006.10.30
로딩 레이어 만들기 [6] 이진수 2006.11.27
[동영상강좌] 홈페이지에 BGM을 달아보자 [5] 서기 2007.01.10
슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!! [4] TiZa 2007.02.03
비밀번호 입력해야 해당 페이지 보이기 [3] 이명우 2007.02.28
Light box 이용하기.. [10] 이진수 2007.03.12
자바스크립 동영상 플레이어 2 (네이버 발췌) [4] 이진수 2007.03.28
자신의 홈피에 날씨를 달아보자. [2] Rising.kr 2008.01.21
자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] Rising.kr 2008.01.21
프레임홈일때 부분프레임 무단링크 방지하기 [3] gosoo99 2008.04.08
웹페이지에 마우스 따라다니는 예쁜 시계를 넣자 [5] gosoo99 2008.04.08
다른 도메인간 iframe 크기 자동조절(cross domain iframe auto resize) [2] 서기 2008.04.24
나만의 위지윅 웹에디터 만들기 - 글 쓰기에 앞서 [4] file 예뜨락 2008.05.05
나만의 위지윅 웹에디터 만들기 - 기본 준비2 [2] file 예뜨락 2008.05.11
지정된 시간동안 강제로 보여지는 언론사에서 많이 사용하는 광고창 ITBANK.kr 2008.10.01
구글 번역기 API 유비키리 2008.10.29
웹서핑 동작 원리의 이해 [18] zero 2007.10.05
PHP에 대한 소개 [216] zero 2000.03.06
Database, MySQL 이 무엇인가~~~ ^^ [103] zero 2000.03.06
태그 쓰기