홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

[자바스크립트] 세로형 슬라이딩 메뉴 소스

세상이야기.      조회 수 3304 추천 수 0 2011.05.10 10:36:32


<html>
<head>
<style type="text/css">
.link {position:absolute;left:0;width:100%;height:0;background:#EAE9DC;overflow:hidden;visibility:hidden;}
.title   {position:relative;cursor:pointer;background:#A8CD74;width:100%;color:#FFFFFF;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}
.title_o {position:relative;cursor:pointer;background:#517E12;width:100%;color:#FFFFFF;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}
.text {position:relative;text-align:justify;margin:10px;font-family:verdana;font-size:11px;color:#000000;overflow:hidden;height:90%}
</style>
<script type="text/javascript">
<!--
var object = new Array();

function Slide(N,oCont){
 this.N  = N;
 this.S  = 1.1;
 this.object = new Array();

 this.CObj = function (parent,N){

 this.parent = parent;
 this.N = N;
 this.obj = parent.frm[N];
 this.tit = this.obj.firstChild;
 this.div = this.obj.getElementsByTagName("div")[1];
 this.div.style.visibility = "hidden";
 this.y0 = N * 18;
 this.Y1 = this.y0;
 this.obj.style.top = this.y0;
 this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3;
 this.obj.style.visibility = "visible";
 this.obj.parent = this;
 this.run = false;

 this.move = function(){
      with(this){
          dy = (y1-y0)/parent.S;
          if(Math.abs(dy)>.1){
  y0+=dy;
  obj.style.top = Math.round(y0);
  setTimeout("object["+parent.N+"].object["+N+"].move();", 16);
           } else {
  run = false;
  if(dy>0)div.style.visibility="hidden";
  else if(N>0)parent.object[N-1].div.style.visibility="hidden";
  }
           }
   }

 this.obj.onmouseover = function(){
         with(this.parent){
             if(!run){
  run = true;
  div.style.visibility="visible";
  for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";
     tit.className = "title_o";
     for(i=0;i<=N;i++){
          parent.object[i].y1 = i*18;
          parent.object[i].move();
     }
  for(i=N+1;i<parent.NF;i++){
          parent.object[i].y1 = parent.H-(parent.NF-i)*18;
          parent.object[i].move();
  }
               }
           }
                    }
 }

 this.frm = document.getElementById(oCont);
 this.H = parseInt(this.frm.style.height);
 this.frm = this.frm.getElementsByTagName("span");
 this.NF = this.frm.length;
 for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);
 this.object[0].obj.onmouseover();
 this.S = 10;
}

onload = function() {
 object[0] = new Slide(0, "frames");
}

//-->
</script>
</head>

<body>
<div id="frames" style="position:absolute;width:200;height:200;overflow:hidden">
        <span class="link"><div class="title">메뉴 1</div>
              <div class="text">
   서브메뉴 - 1<br>
   서브메뉴 - 2<br>
   서브메뉴 - 3<br>
   서브메뉴 - 4<br>
 </div>
          </span>
          <span class="link"><div class="title">메뉴 2</div>
 <div class="text">
    서브메뉴 - 1<br>
    서브메뉴 - 2<br>
    서브메뉴 - 3<br>
    서브메뉴 - 4<br>
 </div>
           </span>
           <span class="link"><div class="title">메뉴 3</div>
   <div class="text">
      서브메뉴 - 1<br>
      서브메뉴 - 2<br>
      서브메뉴 - 3<br>
      서브메뉴 - 4<br>
    </div>
            </span>
            <span class="link"><div class="title">메뉴 4</div>
     <div class="text">
        서브메뉴 - 1<br>
        서브메뉴 - 2<br>
        서브메뉴 - 3<br>
        서브메뉴 - 4<br>
      </div>
             </span>
             <span class="link"><div class="title">메뉴 5</div>
      <div class="text">
         서브메뉴 - 1<br>
         서브메뉴 - 2<br>
         서브메뉴 - 3<br>
         서브메뉴 - 4<br>
      </div>
              </span>
 </div>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------------------

J002.jpg

출처: webmadang.net

List of Articles
번호 제목 글쓴이 날짜 조회 수
32 페이지 상단 이동 버턴 만들기 세상이야기 2018-12-23 83
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 81
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 110
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1627
» [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3304
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2973
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1909
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1788
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1686
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2457
XE Login