테스트 사이트 - 개발 중인 베타 버전입니다
SIR

3단 레이어 소스

카이루
프로필 보기이 회원 글보기
 · 12년 전 · 2382
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 = "&raquo; " + 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 &raquo;</div>
<div class="vItemOff" onClick="javascript:window.location='#'"         onmouseover="javascript:wmItemOn(this,0,'vItemOn','vItemOff','vSubmenu2',WM_RIGHT);"  onMouseOut="wmStartOffTimer();">MENU  02 &raquo;</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 &raquo;</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회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
11483
jQuery 국내에서 개발된 개발자를 위한 자바스크립트 라이브러리 - AXISJ 3
11481
jQuery 깔끔한 탭메뉴 드립니다. 1
11615
기타 2013년 SW기술자 노임단가 3
11478
MySQL CentOS 6.3 싱글유저에서 mysql 백업 2
11477
PHP PHP 스크립트에서 에러메시지 제어하기 옵션
11475
MySQL Java에서 Mysql에 데이터를 넣을때 한글이 깨어지는 경우 1
11474
기타 3단 레이어 소스 현재글
11470
PHP include된 파일목록 출력하기 3
11469
JavaScript 스크롤바 색깔 바꾸는 스크립트
11465
PHP 간단하게 파일을 쓰거나 읽는 함수 3
11464
JavaScript 윈도우의 창띄위기 소스입니다.
11462
JavaScript 익스에서 깜박임 글자 구현법 1
11460
JavaScript 자바스크립트를 이용해서 모바일에 selet 박스 구현한것입니다 1
11458
JavaScript 새창띄우는 소스입니다. 1
11455
PHP 숫자를 한글로 출력하게 해주는 함수 입니다. 2
11452
OS 파일에서 특정단어 찾아내는 팁 2
11450
PHP php+js의 배열연결법입니다. 1
11443
jQuery 제이쿼리를 이용한 펼침메뉴 1차입니다. 6
11438
jQuery 제이쿼리를 이용하여 파일을 업로드 하는 자료입니다. 4
11435
PHP 메쏘드 static 선언 2
11433
JavaScript 마우스 오버시 이미지 바꾸기 1
11432
JavaScript 일정시간후 스크립트 실행
11430
정규표현식 구글 로봇 접근막기! 1
11428
PHP 시리얼번호생성기 1
20678
웹 접근성 진단․컨설팅 대상 웹 사이트 모집 안내(무료)
이전 다음
전체 목록