이전
목록
다음
카

3단 레이어 소스

카이루
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 12년 전 · 3522
3list.jpg

 
<html>
<head>
 <title>3단 레이어</title>
</head>
<body class="frameBody">

<script type="text/javascript">
var WM_BOTTOM = "bottom";
var WM_RIGHT = "right";
var MARGIN_BOTTOM = 1;
var MARGIN_RIGHT = 1;
var currentItem = null;
var menuTrail = new Array();
var currentStyleOff = null;
function wmItemOn(item, level, styleOn, styleOff, submenuId, submenuPosition) {
  debug("level:" + level + ", styleOn:" + styleOn + ", styleOff:" + styleOff + ", submenu:" + submenuId + "/" + submenuPosition);
  stopOffTimer();
  // turn off previous item
  if (currentItem != null) {
    if (styleOff != currentStyleOff && currentStyleOff != null) {
      currentItem.className = currentStyleOff;
    } else {
      currentItem.className = styleOff;
    }
  }
  // make this item new current item
  currentItem = item;
  item.className = styleOn;
  currentStyleOff = styleOff;

  if (submenuId != null) {
    // take care of attached submenu
    hide(level);
    var menu = document.getElementById(submenuId);
    // item dimensions: item.offsetHeight, item.offsetWidth
    if (submenuPosition == WM_BOTTOM) {
      menu.style.top = findOffsetTop(item) + item.offsetHeight + MARGIN_BOTTOM;
      menu.style.left = findOffsetLeft(item);
    }
    if (submenuPosition == WM_RIGHT) {
      menu.style.top = findOffsetTop(item);
      menu.style.left = findOffsetLeft(item) + item.offsetWidth + MARGIN_RIGHT;
    }
    menu.style.visibility = "visible";
    menuTrail[level] = menu;
  } else {
    hide(level);
  }
}
function hide(level) {
  for (var i = level; i < menuTrail.length; i++) {
    menuTrail[i].style.visibility = "hidden";
  }
}
var timerID = null;
var timerOn = false;
var timecount = 250;
function wmStartOffTimer() {
  if (timerOn == false) {
    timerID = setTimeout("offAll()", timecount);
    timerOn = true;
  }
}
function stopOffTimer() {
  if (timerOn) {
    clearTimeout(timerID);
    timerID = null;
    timerOn = false;
  }
}
function offAll() {
  hide(0);
 
  if (currentStyleOff != null) {
    currentItem.className = currentStyleOff;
  }
 
  debug("All off by timer.");
}
var debugId = "wmDebug";
function debug(text) {
  var debug = document.getElementById(debugId);
  if (debug != null) {
     debug.innerHTML = "» " + text + "<br>" + debug.innerHTML;
  }
}
function findOffsetLeft(obj){
  var curleft = 0;
  if (obj.offsetParent){
    while (obj.offsetParent){
      curleft += obj.offsetLeft
        obj = obj.offsetParent;
    }
  }else if (obj.x){
    curleft += obj.x;
  }
  return curleft;
}
// Find total top offset.
function findOffsetTop(obj){
  var curtop = 0;
  if (obj.offsetParent) {
    while (obj.offsetParent){
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  }else if (obj.y){
    curtop += obj.y;
  }
  return curtop;
}
 
</script>
<style>
.wmSubMenuHidden {position:absolute;visibility:hidden;}
.hItemOn  {width:100px;padding:3px;background:#DCDCDC;cursor:pointer;}
.hItemOff {width:100px;padding:3px;background:#F0F0F0;cursor:pointer;}
.vItemOn  {width:100px;padding:3px;background:#FFFFE6;border:1px solid #336699;cursor:pointer;}
.vItemOff {width:100px;padding:3px;background:#FFFFE6;cursor:pointer;}
</style>
 
 

<div class="vItemOff" onClick="javascript:window.location='#'"         onmouseover="javascript:wmItemOn(this,0,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  00</div>
<div class="vItemOff" onClick="javascript:window.location='#'"         onmouseover="javascript:wmItemOn(this,0,'vItemOn','vItemOff','vSubmenu1',WM_RIGHT);"  onMouseOut="wmStartOffTimer();">MENU  01 »</div>
<div class="vItemOff" onClick="javascript:window.location='#'"         onmouseover="javascript:wmItemOn(this,0,'vItemOn','vItemOff','vSubmenu2',WM_RIGHT);"  onMouseOut="wmStartOffTimer();">MENU  02 »</div>
<div class="vItemOff" onClick="javascript:window.location='#'"         onmouseover="javascript:wmItemOn(this,0,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  03</div>
<div id="vSubmenu1" class="wmSubMenuHidden">
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,1,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  11</div>
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,1,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  12</div>
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,1,'vItemOn','vItemOff','vSubmenu3',WM_RIGHT);"  onMouseOut="wmStartOffTimer();">MENU  13 »</div>
</div>
<div id="vSubmenu2" class="wmSubMenuHidden">
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,1,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  21</div>
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,1,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  22</div>
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,1,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  23</div>
</div>
<div id="vSubmenu3" class="wmSubMenuHidden">
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,2,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  31</div>
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,2,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  32</div>
<div class="vItemOff" onClick="javascript:window.location='#'"       onmouseover="javascript:wmItemOn(this,2,'vItemOn','vItemOff',null,null);" onMouseOut="wmStartOffTimer();">MENU  33</div>
</div>
</body>
</html>
 
#개발자팁 #개발자 #팁자료실 #기타

첨부파일

3.html (11.9 KB) 4회 2013-10-10 17:29
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12년 전 조회 1,659
12년 전 조회 1,932
12년 전 조회 3,899
12년 전 조회 1,658
12년 전 조회 1,568
12년 전 조회 1,500
12년 전 조회 2,256
12년 전 조회 2,048
12년 전 조회 4,753
12년 전 조회 1,879
12년 전 조회 1,762
12년 전 조회 1,636
12년 전 조회 1,508
12년 전 조회 2,037
12년 전 조회 1,779
12년 전 조회 1,895
12년 전 조회 1,421
12년 전 조회 1,454
12년 전 조회 1,607
12년 전 조회 2,005
12년 전 조회 1,984
12년 전 조회 1,452
12년 전 조회 1,848
12년 전 조회 5,692
12년 전 조회 3,654
12년 전 조회 1,920
12년 전 조회 1,660
12년 전 조회 2,488
12년 전 조회 1,834
12년 전 조회 6,167
12년 전 조회 7,186
12년 전 조회 2,125
12년 전 조회 1,877
12년 전 조회 1,513
12년 전 조회 2,078
12년 전 조회 1,946
12년 전 조회 1,934
12년 전 조회 1,726
12년 전 조회 1,984
12년 전 조회 2,439
12년 전 조회 2,577
12년 전 조회 1,841
12년 전 조회 2,946
12년 전 조회 1,765
12년 전 조회 2,048
12년 전 조회 2,789
12년 전 조회 3,030
12년 전 조회 2,832
12년 전 조회 2,959
12년 전 조회 3,523
12년 전 조회 2,110
12년 전 조회 2,608
12년 전 조회 4,775
12년 전 조회 2,599
12년 전 조회 2,692
12년 전 조회 2,465
12년 전 조회 2,077
12년 전 조회 2,343
12년 전 조회 2,231
12년 전 조회 2,420
12년 전 조회 3,053
12년 전 조회 2,590
12년 전 조회 2,468
12년 전 조회 5,035
12년 전 조회 2,662
12년 전 조회 1,925
12년 전 조회 2,638
12년 전 조회 1,741
12년 전 조회 1,982
12년 전 조회 2,386
12년 전 조회 2,287
12년 전 조회 6,278
12년 전 조회 3,622
12년 전 조회 2,876
12년 전 조회 1,651
12년 전 조회 3,200
12년 전 조회 1,851
12년 전 조회 2,152
12년 전 조회 1,902
12년 전 조회 4,439
12년 전 조회 1,768
12년 전 조회 4,662
12년 전 조회 2,383
12년 전 조회 2,649
12년 전 조회 3,252
12년 전 조회 3,312
12년 전 조회 1,600
12년 전 조회 1,668
12년 전 조회 2,323
12년 전 조회 1,644
12년 전 조회 1,818
12년 전 조회 7,608
12년 전 조회 1,581
12년 전 조회 1,864
12년 전 조회 1,505
12년 전 조회 1,548
12년 전 조회 1,812
12년 전 조회 1,769
12년 전 조회 2,751
12년 전 조회 2,775
이전 첫 페이지 다음
글쓰기