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

3단 레이어 소스

카이루
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 12년 전 · 2398
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회)
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
26560
기획서 파워묵업 Power MockUP good story board! [광고가 아닙니다 ㅠ.ㅠ]
24588
결과보고서 양식좀 노나 주세요 ㅠ 10
31642
CSS CSS과정 - 5. Backgrounds 3
31638
CSS CSS과정 - 4. How to 3
31633
CSS CSS과정 - 3. Selectors 4
31630
CSS CSS과정 - 2. Syntax 2
31625
CSS CSS과정 - 1. Introduction 4
19452
기타 안녕하세요! 저희가 만든 채팅프로그램 소개합니다^^ 1
6719
개발자 개발자님 찾아요
6718
개발자 제작자구합니다~
6717
개발자 개발자님 구해요
6715
개발자 비용과 기간문의 1
27797
이런 움직임의 소스는 가격이 얼마나 되나요 2
30907
기타 mms 스트리밍 동영상 다운로드 방법
30904
기타 에딧플러스에서 HOME 키 설정 2
6714
동영상 컨텐츠 싸이트 수정 또는 제작 가능한분 찾습니다
6713
구글 앱메세지 연동된 앱 개발하실수 있는분 있나요?
27791
xp지원이 끝나도.. 5
19450
JavaScript 제니퍼소프트, UI 소스 오픈 하여군요 1
6712
반응형 이렇게 만들면 얼마나 들까요? (프로그래머 찾습니다)
6711
사이트 수정/추가기능 해주실 프로그래머분 찾습니다
6709
고정주소 쓸만한게 있네요. 1
6708
모바일쇼핑몰 만들어주실분 구해요
27790
옛날 킴스몰솔루션 으로 제작된 쇼핑몰 모바일 쇼핑몰 제작해 주실분
19447
jQuery 좋은... swipe 스크롤 2
6706
질문좀 드립니다. 1
6703
안녕하세요 유튜브 동영상관련해서 질문좀 드립니다. 2
6702
그누보드 포인트활용 게임
6701
이렇게 구현하는 방법좀 알려주실분 ㅠ
6697
sphinx 좋네요. 3
6692
홈페이지를 크롬에서 보면 전체 내용이 안보입니다. 4
27783
웹페이지에서 사용한 글자만 웹폰트로 만들기? 6
6691
바로빌 전자세금계산서 연동의뢰드립니다
6687
[질문]그누보드->하이브리드앱제작 3
6685
글씨체잘아시는분.. 1
6683
모바일 셀렉트박스 클릭시 문제가 발생했는데요.. 1
6682
작업요청 드립니다.
19446
PHP 이미지 파일을 base64 로 인코딩하여 전송 및 보여주기
27770
아이시빌 사용자가 늘고 있나봅니다. 12
19445
PHP phpinfo 페이지 내에 삽입하기
27768
제이쿼리 이부분 어떻게 수정해야할까요?? 1
6681
서버셋팅 부탁드리겠습니다.
6675
질문...모바일에서 밀어서 이동하는 버튼을 뭐라고 하는지... 5
6674
모바일쇼핑몰 접속시 홈버튼 자동추가
19444
jQuery swipe 좌우스크롤
6672
모바일 페이지 제작가능하실분 없을가요?? 1
6671
그누보드 게시판 기능 의뢰 받아주실분 구합니다!!!!ㅠㅠ
27761
퍼블리셔 연봉 정보 6
6670
영카드4 테이블 명세서는 없는지요?
30900
HTML 브라우저별 그리고 브라우저 버전별 웹사이트 확인방법 3
24585
[초보]기획자의 길로 들어서다 보니 모르는게많네요 2
6660
워드프레스 고수님들 계신가요?? 9
6655
헬푸~~ URL 을 메소드로 이용할려면 어떻게 할까요? ㅜ ㅜ 4
6653
게시판 어떤언어로 ... 1
31624
홈페이지기초 HTML과정 - 20. HTML colors
6651
onclick 소스 질문 드립니다. 1
31623
홈페이지기초 HTML과정 - 19. HTML iframes
31621
홈페이지기초 HTML과정 - 18. HTML forms 1
19443
MySQL MYSQL 오늘 날짜 뽑아오기
6650
파이썬 mysql 설치 질문입니다.
31620
홈페이지기초 HTML과정 - 17. HTML layout
31619
홈페이지기초 HTML과정 - 16. HTML blocks
31612
홈페이지기초 HTML과정 - 15. HTML lists 6
31611
홈페이지기초 HTML과정 - 14. HTML tables
27746
내용 리스트을 표현할때 어떤 방식이 좋을지요? 14
31605
홈페이지기초 HTML과정 - 13. HTML images 5
6648
안녕하세요~ 1
20781
정규표현식 최신 그누보드5 common.lib.php 내의 정규표현식 관련 풀이 (3) 7
31603
홈페이지기초 HTML과정 - 12. HTML Styles - CSS 1
31600
홈페이지기초 HTML과정 - 11. HTML head 2
6645
포트가 열려있는지 확인하는 것을 HTML자체로 짤 수 있나요? 2
6643
모바일웹, 바탕화면에 아이콘 만드는 소스를 구합니다. 1
6642
ASP웹사이트에 페이팔연동
6640
펜션예약스킨에 카드결제 모듈붙여주실분 1
20777
정규표현식 최신 그누보드5 common.lib.php 내의 정규표현식 관련 풀이 (2) 3
31597
홈페이지기초 HTML과정 - 10. HTML Links 2
6637
프로시저 사용법좀 알려주십시오 2
19442
PHP date 함수를 이용하여 주를 날짜로 변환하기
31594
홈페이지기초 HTML과정 - 9. HTML comments (주석처리) 2
31591
홈페이지기초 HTML과정 - 8. TEXT Formatting 2
31589
홈페이지기초 HTML과정 - 7. HTML Paragraphs 1
31586
홈페이지기초 HTML과정 - 6. HTML headings(H1~H6) 2
31584
홈페이지기초 HTML과정 - 5. HTML 속성 1
20758
정규표현식 최신 그누보드5 common.lib.php 내의 정규표현식 관련 풀이 (1) 18
19440
PHP php array 로 만든 페이징 1
31575
홈페이지기초 HTML과정 - 4. HTML 엘리먼트 8
31567
홈페이지기초 HTML과정 - 3. HTML 기초 예제들 7
20747
정규표현식 (실무예제) 다음 메인페이지에서 실시간 이슈 부분을 가져오기 10
6636
(그누보드4 + 동영상솔루션)기반 사이트 -> 그누보드5 + 영카트5(고도화) 작업의뢰
31563
홈페이지기초 HTML과정 - 2. HTML 편집기(editors) 3
31552
홈페이지기초 HTML과정 - 1. HTML이 무엇인가? 10
27743
[질문]Window8에서 플래시문제.. 2
24579
수익모델을 찾는건 어렵다 5
6630
그누보드5로는 상업적프로그램 안됨 5
6628
하이브리드앱만들때 1
6620
그누5 업데이트시 mysql이 변경되었다면... 7
6617
모바일 코팅 프로그래머 2
27732
LESS/SASS -ㅁ-.... 10
24577
간단한 작업 맡으실분 계신가요 1
6616
node로 된 트래픽 모니터링 프로그램 없을까요?
이전 다음
전체 목록