카

3단 레이어 소스

· 2013-10-10 (목) 17:29:05 · 5203
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
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
16-06-11 조회 3,000
16-02-15 조회 3,266
16-02-02 조회 2,932
16-01-25 조회 2,551
16-01-18 조회 2,639
16-01-08 조회 2,572
16-01-07 조회 2,583
16-01-05 조회 2,622
16-01-05 조회 2,915
16-01-05 조회 2,735
16-01-05 조회 2,775
16-01-04 조회 2,628
16-01-04 조회 2,641
16-01-04 조회 2,596
16-01-04 조회 2,505
15-12-30 조회 2,849
15-12-24 조회 2,662
15-12-24 조회 2,669
15-12-24 조회 2,693
15-12-24 조회 2,646
15-12-23 조회 2,628
15-12-16 조회 2,720
15-12-15 조회 2,791
15-12-11 조회 2,913
15-12-10 조회 2,771
15-11-09 조회 2,761
15-11-09 조회 2,990
15-10-06 조회 3,314
15-10-02 조회 3,102
15-05-29 조회 4,431
15-02-02 조회 4,412
15-01-18 조회 4,372
14-10-25 조회 8,341
14-10-25 조회 5,122
14-10-22 조회 7,128
14-10-22 조회 4,834
14-10-22 조회 4,786
14-10-18 조회 5,660
14-10-17 조회 6,032
14-10-17 조회 5,399
14-10-17 조회 8,845
14-10-17 조회 6,419
14-10-13 조회 4,335
14-10-13 조회 4,431
14-10-07 조회 6,128
14-09-24 조회 3,888
14-09-23 조회 3,962
14-09-22 조회 4,857
14-09-22 조회 6,078
14-09-22 조회 4,051
14-09-22 조회 3,734
14-09-21 조회 4,325
14-09-21 조회 3,798
14-09-20 조회 3,807
14-09-20 조회 3,710
14-09-20 조회 3,892
14-09-19 조회 3,833
14-09-19 조회 3,982
14-09-19 조회 3,870
14-09-19 조회 4,272
14-09-19 조회 3,881
14-09-19 조회 3,807
14-09-19 조회 4,101
14-09-19 조회 3,847
14-09-19 조회 3,891
14-09-19 조회 3,869
14-09-18 조회 3,952
14-09-18 조회 3,910
14-09-18 조회 4,181
14-09-18 조회 4,138
14-09-18 조회 4,155
14-09-18 조회 4,855
14-09-18 조회 5,406
14-09-18 조회 5,295
14-09-18 조회 4,092
14-09-18 조회 4,593
14-09-18 조회 4,220
14-08-30 조회 5,387
14-08-06 조회 5,971
14-08-06 조회 5,575
14-08-03 조회 5,230
14-06-12 조회 5,506
14-05-11 조회 3,685
14-05-11 조회 4,447
14-05-11 조회 4,554
14-05-09 조회 1.3만
14-05-01 조회 5,065
14-03-30 조회 4,369
14-03-23 조회 7,978
14-02-12 조회 3,867
13-10-29 조회 7,832
13-10-28 조회 8,650
13-09-29 조회 6,622
13-09-29 조회 4,246
13-07-23 조회 5,100
13-07-23 조회 1.2만
13-07-14 조회 4,662
13-07-14 조회 5,044
13-07-14 조회 5,990
13-07-14 조회 5,292