묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[re] -_- 하위 메뉴 유지 방법이 궁금합니다.
2003.08.18 19:23
onmouseout시 하위메뉴가 감춰지기 때문에 그렇습니다.
onmouseover시 보여줬던 하위메뉴를 클릭하기 위해서는 onmouseout이 되어야 되는데 이 경우 하위메뉴가 숨겨지므로 클릭이 안되는 겁니다.
제 생각엔 onmouseout 이벤트는 없애주고 onmouseover시 그에 해당 하위메뉴는 보여주고 나머지 메뉴들의 속성을 감춰지도록 해주면 될것 같습니다.
아래는 제 홈피에 사용된 메뉴입니다. 저는 레이어를 사용하지는 않았지만 OnMouseOver부분과 Show_Menu() 함수부분을 참고하시면 수정에 도움이 될듯 싶습니다..
<style>
<!--
a { text-decoration:none;color:black;}
a:hover{ text-decoration:underline;}
.{ font-family:돋움; font-size:10pt;}
.menu{color:white; font-weight:bold;}
.submenu{border-color:black; border-style:solid;border-top-width:0pt;border-bottom-width:1pt;
border-left-width:1pt; border-right-width:1pt;}
-->
</style>
<script language="JavaScript">
<!-- JavaScript
function Show_Menu(num){
for (i=1; i<=6; i++) {
menu = eval("document.all.block" + i + ".style");
if (num == i) {menu.display = "block";}
else {menu.display="none";}
}
}
// - JavaScript - -->
</script>
<table align=center border=0 cellpadding=0 cellspacing=0 width=600 bgcolor=#000000>
<tr><td>
<table cellpadding=3 cellspacing=1 width=100%>
<tr>
<td width="100" bgcolor=#CCCCCC OnMouseOver="Show_Menu(1)" style="cursor:hand">
<p align="center"><b><span class=menu>홈</span></b></p>
</td>
<td width="100" bgcolor=#F0C700 OnMouseOver="Show_Menu(2)" style="cursor:hand">
<p align="center"><b><span class=menu>프로필</span></b></p>
</td>
<td width="100" bgcolor=#FD8116 OnMouseOver="Show_Menu(3)" style="cursor:hand">
<p align="center"><b><span class=menu>엔조이</span></b></p>
</td>
<td width="100" bgcolor=#CC99FF OnMouseOver="Show_Menu(4)" style="cursor:hand">
<p align="center"><b><span class=menu>스터디</span></b></p>
</td>
<td width="100" bgcolor=#4D9DCD OnMouseOver="Show_Menu(5)" style="cursor:hand">
<p align="center"><b><span class=menu>게시판</span></b></p>
</td>
<td width="100" bgcolor=#73CA2D OnMouseOver="Show_Menu(6)" style="cursor:hand">
<p align="center"><b><span class=menu>기타</span></b></p>
</td>
</tr>
</table>
</td></tr></table>
<span id=block1 style=display:block>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#CCCCCC>
<tr><td>
<p>
<a href=/default.html style=color:black>홈으로</a> |
<a href=/zeroboard/zboard.php?id=notice style=color:black>공지사항</a> |
<a href=# style=color:black OnClick="window.open('/zeroboard/lostid1.php','lostid','width=350, height=200')">비밀번호찾기</a> |
<a href=/help.html style=color:black>도움말</a>
<img src="/images/blank.gif" width="1" height="10" border="0">
</td></tr></table>
</span>
<span id=block2 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#F0C700>
<tr><td>
<p><img src="/images/blank.gif" width="100" height="10" border="0">
<a href=/profile style=color:black>프로필</a>
</td></tr></table>
</span>
<span id=block3 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#FD8116>
<tr><td>
<p><img src="/images/blank.gif" width="200" height="10" border="0">
<a href=/game/index.html style=color:black>플래쉬 게임</a>
| <a href=/humor/index.html style=color:black>시리즈 유머</p>
</td></tr></table>
</span>
<span id=block4 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#CC99FF>
<tr><td>
<p><img src="/images/blank.gif" width="300" height="10" border="0">
<a href=/hnc97/index.html style=color:black>한글97</a> |
<a href=/zeroboard/zboard.php?id=com style=color:black>컴관련정보</a> |
<a href=/zeroboard/zboard.php?id=web_program style=color:black>웹프로그램</a> |
<a href=/archi/index.html style=color:black>건축정보</a></p>
</td></tr></table>
</span>
<span id=block5 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#4D9DCD>
<tr><td>
<p><img src="/images/blank.gif" width="400" height="10" border="0">
<a href=/zeroboard/zboard.php?id=free style=color:black>자유게시판</a>
| <a href=/zeroboard/zboard.php?id=QnA style=color:black>질문과답변</a>
</td></tr></table>
</span>
<span id=block6 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#73CA2D>
<tr><td>
<p align="right">
<img src="/images/blank.gif" width="1" height="10" border="0">
<a href=# onclick="window.open('/banner.html', 'banner', 'width=300, height=205, top=0, left=0')" style=color:black>배너달기</a> |
<a href=javascript:bookmark() style=color:black>즐겨찾기에 추가</a> |
<a href=/zeroboard/zboard.php?id=link style=color:black>추천싸이트</a> |
<a href=javascript:mail() style=color:black>E-mail</a></p>
</td></tr></table>
</span>
>whrhkdrhs.cafe24.com
>
>에 가시면...-_- 제가 메뉴들을 여러개 만들어 놨어요
>
>하위 레이어도 만들어 놨는데.. onmouseover 시 보이게 하고 onmouseout 시 감추게 했는데
>
>하위메뉴를 클릭하려고 하면 하위메뉴가 도망가요
>
>-0-;; 어떻게 합니까?
onmouseover시 보여줬던 하위메뉴를 클릭하기 위해서는 onmouseout이 되어야 되는데 이 경우 하위메뉴가 숨겨지므로 클릭이 안되는 겁니다.
제 생각엔 onmouseout 이벤트는 없애주고 onmouseover시 그에 해당 하위메뉴는 보여주고 나머지 메뉴들의 속성을 감춰지도록 해주면 될것 같습니다.
아래는 제 홈피에 사용된 메뉴입니다. 저는 레이어를 사용하지는 않았지만 OnMouseOver부분과 Show_Menu() 함수부분을 참고하시면 수정에 도움이 될듯 싶습니다..
<style>
<!--
a { text-decoration:none;color:black;}
a:hover{ text-decoration:underline;}
.{ font-family:돋움; font-size:10pt;}
.menu{color:white; font-weight:bold;}
.submenu{border-color:black; border-style:solid;border-top-width:0pt;border-bottom-width:1pt;
border-left-width:1pt; border-right-width:1pt;}
-->
</style>
<script language="JavaScript">
<!-- JavaScript
function Show_Menu(num){
for (i=1; i<=6; i++) {
menu = eval("document.all.block" + i + ".style");
if (num == i) {menu.display = "block";}
else {menu.display="none";}
}
}
// - JavaScript - -->
</script>
<table align=center border=0 cellpadding=0 cellspacing=0 width=600 bgcolor=#000000>
<tr><td>
<table cellpadding=3 cellspacing=1 width=100%>
<tr>
<td width="100" bgcolor=#CCCCCC OnMouseOver="Show_Menu(1)" style="cursor:hand">
<p align="center"><b><span class=menu>홈</span></b></p>
</td>
<td width="100" bgcolor=#F0C700 OnMouseOver="Show_Menu(2)" style="cursor:hand">
<p align="center"><b><span class=menu>프로필</span></b></p>
</td>
<td width="100" bgcolor=#FD8116 OnMouseOver="Show_Menu(3)" style="cursor:hand">
<p align="center"><b><span class=menu>엔조이</span></b></p>
</td>
<td width="100" bgcolor=#CC99FF OnMouseOver="Show_Menu(4)" style="cursor:hand">
<p align="center"><b><span class=menu>스터디</span></b></p>
</td>
<td width="100" bgcolor=#4D9DCD OnMouseOver="Show_Menu(5)" style="cursor:hand">
<p align="center"><b><span class=menu>게시판</span></b></p>
</td>
<td width="100" bgcolor=#73CA2D OnMouseOver="Show_Menu(6)" style="cursor:hand">
<p align="center"><b><span class=menu>기타</span></b></p>
</td>
</tr>
</table>
</td></tr></table>
<span id=block1 style=display:block>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#CCCCCC>
<tr><td>
<p>
<a href=/default.html style=color:black>홈으로</a> |
<a href=/zeroboard/zboard.php?id=notice style=color:black>공지사항</a> |
<a href=# style=color:black OnClick="window.open('/zeroboard/lostid1.php','lostid','width=350, height=200')">비밀번호찾기</a> |
<a href=/help.html style=color:black>도움말</a>
<img src="/images/blank.gif" width="1" height="10" border="0">
</td></tr></table>
</span>
<span id=block2 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#F0C700>
<tr><td>
<p><img src="/images/blank.gif" width="100" height="10" border="0">
<a href=/profile style=color:black>프로필</a>
</td></tr></table>
</span>
<span id=block3 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#FD8116>
<tr><td>
<p><img src="/images/blank.gif" width="200" height="10" border="0">
<a href=/game/index.html style=color:black>플래쉬 게임</a>
| <a href=/humor/index.html style=color:black>시리즈 유머</p>
</td></tr></table>
</span>
<span id=block4 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#CC99FF>
<tr><td>
<p><img src="/images/blank.gif" width="300" height="10" border="0">
<a href=/hnc97/index.html style=color:black>한글97</a> |
<a href=/zeroboard/zboard.php?id=com style=color:black>컴관련정보</a> |
<a href=/zeroboard/zboard.php?id=web_program style=color:black>웹프로그램</a> |
<a href=/archi/index.html style=color:black>건축정보</a></p>
</td></tr></table>
</span>
<span id=block5 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#4D9DCD>
<tr><td>
<p><img src="/images/blank.gif" width="400" height="10" border="0">
<a href=/zeroboard/zboard.php?id=free style=color:black>자유게시판</a>
| <a href=/zeroboard/zboard.php?id=QnA style=color:black>질문과답변</a>
</td></tr></table>
</span>
<span id=block6 style=display:none>
<table width=600 align=center cellpadding=3 cellspacing=0 class=submenu bgcolor=#73CA2D>
<tr><td>
<p align="right">
<img src="/images/blank.gif" width="1" height="10" border="0">
<a href=# onclick="window.open('/banner.html', 'banner', 'width=300, height=205, top=0, left=0')" style=color:black>배너달기</a> |
<a href=javascript:bookmark() style=color:black>즐겨찾기에 추가</a> |
<a href=/zeroboard/zboard.php?id=link style=color:black>추천싸이트</a> |
<a href=javascript:mail() style=color:black>E-mail</a></p>
</td></tr></table>
</span>
>whrhkdrhs.cafe24.com
>
>에 가시면...-_- 제가 메뉴들을 여러개 만들어 놨어요
>
>하위 레이어도 만들어 놨는데.. onmouseover 시 보이게 하고 onmouseout 시 감추게 했는데
>
>하위메뉴를 클릭하려고 하면 하위메뉴가 도망가요
>
>-0-;; 어떻게 합니까?