카

3단 레이어 소스

· 2013-10-10 (목) 17:29:05 · 5200
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건
+
제목 글쓴이 날짜 조회
13-10-29 조회 7,832
13-10-28 조회 8,650
13-10-28 조회 3,833
13-10-28 조회 3,392
13-10-27 조회 3,015
13-10-26 조회 3,733
13-10-25 조회 3,459
13-10-24 조회 3,431
13-10-24 조회 3,167
13-10-24 조회 3,490
13-10-24 조회 4,080
13-10-23 조회 4,237
13-10-23 조회 3,496
13-10-22 조회 4,724
13-10-21 조회 3,231
13-10-20 조회 3,562
13-10-18 조회 4,474
13-10-17 조회 4,797
13-10-15 조회 4,717
13-10-11 조회 4,597
13-10-10 조회 5,201
13-10-10 조회 3,685
13-10-08 조회 4,208
13-10-03 조회 6,267
13-10-02 조회 4,134
13-10-02 조회 4,399
13-10-02 조회 4,169
13-10-02 조회 3,664
13-10-02 조회 3,922
13-10-02 조회 3,787
13-10-02 조회 4,155
13-09-29 조회 4,713
13-09-29 조회 4,157
13-09-29 조회 4,030
13-09-29 조회 6,622
13-09-29 조회 4,244
13-09-27 조회 3,561
13-09-27 조회 4,192
13-09-24 조회 3,260
13-09-24 조회 3,538
13-09-18 조회 3,947
13-09-17 조회 3,797
13-09-16 조회 7,999
13-09-16 조회 5,359
13-09-16 조회 4,337
13-09-15 조회 3,184
13-09-13 조회 4,877
13-09-13 조회 3,361
13-09-13 조회 3,653
13-09-12 조회 3,460
13-09-11 조회 6,224
13-09-10 조회 3,508
13-09-10 조회 6,122
13-09-10 조회 3,884
13-09-09 조회 4,266
13-09-09 조회 4,916
13-09-07 조회 5,020
13-09-07 조회 3,110
13-09-06 조회 3,227
13-09-06 조회 3,848
13-09-06 조회 3,209
13-09-05 조회 3,378
13-09-05 조회 9,533
13-09-04 조회 3,072
13-09-04 조회 3,334
13-09-04 조회 3,010
13-09-03 조회 3,111
13-09-03 조회 3,540
13-08-30 조회 3,368
13-08-30 조회 4,451
13-08-29 조회 4,403
13-08-28 조회 3,920
13-08-28 조회 8,094
13-08-27 조회 4,081
13-08-26 조회 4,290
13-08-26 조회 3,515
13-08-26 조회 4,799
13-08-23 조회 4,083
13-08-23 조회 5,814
13-08-22 조회 5,342
13-08-22 조회 4,552
13-08-22 조회 5,061
13-08-22 조회 4,653
13-08-22 조회 4,566
13-08-22 조회 3,570
13-08-20 조회 3,810
13-08-18 조회 8,511
13-08-18 조회 5,360
13-08-17 조회 5,961
13-08-17 조회 4,820
13-08-17 조회 4,308
13-08-14 조회 3,345
13-08-12 조회 4,359
13-08-11 조회 3,532
13-08-09 조회 4,031
13-08-08 조회 5,264
13-08-08 조회 5,006
13-08-08 조회 4,400
13-08-08 조회 9,305
13-08-08 조회 5,514