묻고답하기

자바 계단형 메뉴 질문입니다...

2003.09.11 11:42

밑에 소스는 여기 엔지오 강좌 게시판에 있는것을 조금 고친건데요...

메뉴에 마우스를 올리면 하위 메뉴가 나오는데 마우스를 밖으로 빼도 하위 메뉴가 계속 그대로 있어서 문제입니다...

마우스를 빼면 하위메뉴가 안나오도록 고쳐서 주시면 정말 감사하겠습니다...
자바스크립트를 전혀 몰라서여...;;;

부탁드립니다...

--------------------------------------------------------------------------------------------------

<head>
<title>Menu Test</title>
<style type="text/css">
a { font-size:10pt; font-family:tahoma; color: navy; text-decoration: none }
a:hover { color: red; font-family:tahoma; text-decoration: underline }
a.plain:hover { font-size:10pt; font-family:tahoma; color: blue; text-decoration: underline }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:#eeeeee }
#bluebox {background-color:#eeeeee }
#mnubar {font:10pt; arial; font-weight:normal }
</style>

<script language="JavaScript">

ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"

function openIt(x) {


if(ns) {
showbox= document.layers[x+1]
showbox.visibility = "show";
showbox.left=90;

var items = 5 ; // 메뉴의 갯수
for (i=1; i<=items; i++) {
elopen=document.layers[i]
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}


if(ie) {
curEl = event.toElement
curEl.style.background = "#eeeeee" // 마우스 오버시 배경색

showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.left = 90; // 서브메뉴의 왼쪽여백

var items = 5 // 메뉴의 갯수
for (i=0; i<items; i++) {
elOpen=document.all.box[i]
barEl=document.all.mnubar[i]
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "white" // 비활성메뉴 배경색
}
}
}
}

function closeIt() {
var items = 5 // 메뉴의 갯수
for (i=0; i<items; i++) {
if(ie){
document.all.box[i].style.visibility = "hidden"
barEl=document.all.mnubar[i]
barEl.style.background = "white"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"></head>

<body>
<table width="100" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td> </td>
    <td> <a href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</a><br></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> <a href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</a><br></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> <a href="#" onmouseover="openIt(2)" id=mnubar>Menu 3</a><br></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> <a href="#" onmouseover="openIt(3)" id=mnubar>Menu 4</a><br></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> <a href="#" onmouseover="openIt(4)" id=mnubar>Menu 5</a><br></td>
    <td> </td>
  </tr>
</table>
<br>



<div id=box style=top:25>
  <table width="100" border="0" cellspacing="0" cellpadding="0" id=bluebox>
    <tr>
      <td><a href='#'>SUB-1-1</a></td>
    </tr>
    <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
  </table>
</div>



<div id=box style=top:55>
<table width="100" border="0" cellspacing="0" cellpadding="0" id=bluebox>
    <tr>
      <td><a href='#'>SUB-1-1</a></td>
    </tr>
    <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
  </table>
</div>



<div id=box style=top:85>
<table width="100" border="0" cellspacing="0" cellpadding="0" id=bluebox>
    <tr>
      <td><a href='#'+ '+ '>SUB-1-1</a></td>
    </tr>
    <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
  </table>
</div>



<div id=box style=top:115>
<table width="100" border="0" cellspacing="0" cellpadding="0" id=bluebox>
    <tr>
      <td><a href='#'>SUB-1-1</a></td>
    </tr>
    <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
  </table>
</div>



<div id=box style=top:145>
<table width="100" border="0" cellspacing="0" cellpadding="0" id=bluebox>
    <tr>
      <td><a href='#'>SUB-1-1</a></td>
    </tr>
    <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
        <tr>
      <td><a href=#>SUB-1-2</a></td>
    </tr>
  </table>
</div>
</body>

이 게시물을

글쓴이	제목	최종 글
XE	공지 글 쓰기,삭제 운영방식 변경 공지 [16]	2019.03.05 _by 남기남
런업	url 단축싸이트 제작시에..
LadiesKorea	게시판 이 부분 어떻게 바꾸죠? [2]	2014.09.03 _by SeungXE
lifeto	Query ID값이 잘못 지정되었습니다.
ojinger	게시판 제목 옆에 불러오기 버튼을 없애고 싶어요. [4]	2014.09.03 _by ojinger
애니즌	windows 8.1에서 XE 위지윅 에디터 입력문제 [11]	2014.09.03 _by ForcePlane
처리낭군	'네이버 아이디로 로그인', '카카오계정으로 로그인' XE에 설치하려면 어떻게 해야 하나요? [1]	2014.09.03 _by 키스투엑스이
홈런볼11	첨부파일 다운 막기 [2]	2014.09.02 _by XESniper
순박	메뉴가 추가가 안되요 삭제만되요
루꼴라	댓글등록시 새로고침이 안돼요.도와주세요ㅠㅠ [1]	2014.09.02 _by 루꼴라
lifeto	블로그형 모듈 ugletyle 설치. [1]	2014.09.02 _by YJSoft
불패의초인	이거 파일은 어디에 쓰는건지 아시는분~ [3]	2014.09.02 _by YJSoft
도메인8295	모바일에서 메일인증 기능 사용문제 [2]	2014.09.02 _by 도메인8295
칼로리제로	테이블 사이의 간격을 없에고 싶어요~ [5]	2014.09.02 _by DoorWeb
bbqzgo	모바일에서만 보이게하는 주석처리가있나요? [3]	2014.09.02 _by DoorWeb
지룡자	게시판 제목에 말머리 나오게하고 싶습니다 [4]	2014.09.02 _by 몽실아빠
로양	웹진형 문서번호 [4]	2014.09.02 _by 로양
게디노브드	제목이 강제 가운데 정렬됩니다 [9]	2014.09.02 _by 김기태155
이찌부	내용직접추가에서 위젯삽입시 안되나요? 안보이나요? [3]	2014.09.02 _by 비행청년ss123
순박	개초보 질문이요.. 메뉴가 추가가 안되요 [4]	2014.09.02 _by 순박
CoffeeMix	게시판 설정을 하게되면 새로고침을 해야 바뀐설정으로 보이는 문제
nanum	보이지 않는 문자 이용한 글 등록, 막을 수 있을까요?
김타조알	쿼리문에 var값에 ?가 들어갑니다. [2]	2014.09.02 _by 김타조알
후후후늬	왕초보 질문 ㅜ 메일인증 [1]	2014.09.02 _by 외인
웹초ㅂㅎ	다국어 설정된 게시판 쓰기 이상
xe초보자	커뮤니티 레이아웃 추천좀 해주세요 [18]	2014.09.02 _by xe초보자
씨디맨	레이아웃 수정시 직접 layout 파일 수정이.. [6]	2014.09.02 _by dev_ratdp
xe초보자	대댓글 작성시 새로운 창이 열리는걸 손보고 싶습니다. [2]	2014.09.02 _by xe초보자
xe마스터하는그날까지	게시판질문이요 [1]	2014.09.02 _by dev_ratdp
lifeto	papervision 3d vs html5 [1]	2014.09.02 _by DoorWeb
bbqzgo	모바일모드편집에선 헤더와 위젯등의 기능을 불러올순없나요? [1]	2014.09.02 _by DoorWeb

태그 쓰기

묻고답하기

자바 계단형 메뉴 질문입니다...

댓글 0

About

Get involved

Blog

Download

Support

Showcase