묻고답하기

  2. Support
  3. 묻고답하기

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

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>


<!-- ♣서브메뉴 1 -->

<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>


<!-- ♣서브메뉴 2 -->

<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>

<!-- ♣서브메뉴 3 -->

<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>

<!-- ♣서브메뉴 4 -->

<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>

<!-- ♣서브메뉴 5 -->

<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 남기남
[사계]봄비 주소줄 질문요~! 성탄선물로 답변좀요~^^ [2] 2007.08.10
헉 펜티엄4 와 펜티엄3듀얼 서버 [1] 2007.08.10
김정민 오피스설치가 시도때도 없이 자꾸 떠요.. [1] 2007.08.10
이세희 외부로그인때문인데요 [1] 2007.08.10
송혜진 윈도우 첫화면이 이상해요..ㅠ.ㅠ [1] file 2007.08.10
이항복 계정추가와 비번설정을 한 줄로 할 수 있나요??  
니천재 setenvif_module 이거 어디서 구할수 있는지좀.. [1] 2007.08.10
이우열 windows XP 에서 웹서버 만들고 제로보드 쓰는법 좀.. [3] 2007.08.10
[사계]봄비 (그림 첨부) 이 폰트가 궁금합니다! 축성탄! [2] 2007.08.10
천성욱 플래시 사이트를 만드려면.. [1] 2007.08.10
khl007 홈페이지를 만드는데... [1] 2007.08.10
천대영 사용자 윈도우 작업표시줄 크기 구하는 소스? [1] 2007.08.10
차광호 이런 경고 문구가 떠요~  
^-^ 쉬운 질문인데요^-^a [1] 2007.08.10
박금범 mssql,mysql이 많이 다른가요???  
오상열 제가 진짜 초보라서 그런데 배경색 넣는 방법좀 -.-; [2] 2007.08.10
레미디트 윽...정말..한심한...질문 하나 할께요...ㅠ.ㅠ [2] 2007.08.10
싸이친구™ 글자 크기&드롭다운메뉴 에대한 오류.... [3] 2007.08.10
NZ ActiveX 다운로더를 사용하려면???  
쓸쓴한달빛 아이 프레임을 대처할만한 태그좀. [2] 2007.08.10
태그 쓰기