<script>
function showSubMenu(obj) {
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
</script>
function showSubMenu(obj) {
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
</script>
<a href="#" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" onfocus=blur()><img src="/images_ssket/kor/menu_01.gif" border="0" name="image1"></a>
<table id="mytable"><tr><td>
<div id=SubMenu1 style="position:absolute; z-index:1; top:expression(eval(mytable.offsetTop)+10);left:expression(eval(mytable.offsetLeft)+10); visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')">서브메뉴</div></td></tr></table>
<div id=SubMenu1 style="position:absolute; z-index:1; top:expression(eval(mytable.offsetTop)+10);left:expression(eval(mytable.offsetLeft)+10); visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')">서브메뉴</div></td></tr></table>
메뉴를 클릭하면 아래 서브메뉴가 나오는 구조인데요..
문제는 onMouseOut 때문에.. 큰 메뉴에서 마우스가 벗어나면
서브메뉴도 사라져 버려요 ㅠㅠ
온마우스 아웃을 아예 빼버렸더니..
서브메뉴가 다시 로드가 안되더라구요..
어떻게 방법이 없을까요? 도움 부탁드려요..
댓글 2개
13년 전
<style>td{cursor:hand}</style>
<script>
function menuOn(name) {
submenu = eval("submenu"+name+".style");
submenu.visibility = "visible";
}
function menuOff(name) {
submenu = eval("submenu"+name+".style");
submenu.visibility = "hidden";
}
</script>
<table bgcolor=dddddd width=180 height=30 cellpadding=0 cellspacing=0>
<tr>
<td align=center onMouseOver="menuOn(1)" onMouseOut="menuOff(1)" style="width:100px;height:40;">대메뉴1</td>
<td align=center onMouseOver="menuOn(2)" onMouseOut="menuOff(2)" style="width:100px;height:40;">대메뉴2</td>
</tr>
</table>
<div id="submenu1" onMouseOver="menuOn(1)" onMouseOut="menuOff(1)" style="position:absolute; left:10; top:45; visibility:hidden; background-color:eeeeee;list-style:none;">
<table cellpadding=0 cellspacing=0>
<tr><td><img src="1" alt="소메뉴1-1"></td><td><img src="1" alt="소메뉴1-2"></td></tr>
</table>
</div>
<div id="submenu2" onMouseOver="menuOn(2)" onMouseOut="menuOff(2)" style="position:absolute; left:100; top:45; visibility:hidden; background-color:eeeeee;">
<table cellpadding=0 cellspacing=0>
<tr><td><img src="1" alt="소메뉴2-1"></td><td><img src="1" alt="소메뉴2-2"></td></tr>
</table>
</div>
자주 쓰는 소스입니다 참고 하세요 ㅎ
<script>
function menuOn(name) {
submenu = eval("submenu"+name+".style");
submenu.visibility = "visible";
}
function menuOff(name) {
submenu = eval("submenu"+name+".style");
submenu.visibility = "hidden";
}
</script>
<table bgcolor=dddddd width=180 height=30 cellpadding=0 cellspacing=0>
<tr>
<td align=center onMouseOver="menuOn(1)" onMouseOut="menuOff(1)" style="width:100px;height:40;">대메뉴1</td>
<td align=center onMouseOver="menuOn(2)" onMouseOut="menuOff(2)" style="width:100px;height:40;">대메뉴2</td>
</tr>
</table>
<div id="submenu1" onMouseOver="menuOn(1)" onMouseOut="menuOff(1)" style="position:absolute; left:10; top:45; visibility:hidden; background-color:eeeeee;list-style:none;">
<table cellpadding=0 cellspacing=0>
<tr><td><img src="1" alt="소메뉴1-1"></td><td><img src="1" alt="소메뉴1-2"></td></tr>
</table>
</div>
<div id="submenu2" onMouseOver="menuOn(2)" onMouseOut="menuOff(2)" style="position:absolute; left:100; top:45; visibility:hidden; background-color:eeeeee;">
<table cellpadding=0 cellspacing=0>
<tr><td><img src="1" alt="소메뉴2-1"></td><td><img src="1" alt="소메뉴2-2"></td></tr>
</table>
</div>
자주 쓰는 소스입니다 참고 하세요 ㅎ
cshop
13년 전
드랍다운 메뉴 짜시는데 왜 .js 를 쓰시는지 이해 불가네요.. 그냥 css 로 짜시면 되는데.....
게시판 목록
팁게시판
디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5777 | 10년 전 | 445 | ||
| 5776 | 10년 전 | 295 | ||
| 5775 | 10년 전 | 225 | ||
| 5774 | 10년 전 | 906 | ||
| 5773 | 10년 전 | 262 | ||
| 5772 | 10년 전 | 290 | ||
| 5771 | 10년 전 | 404 | ||
| 5770 | 10년 전 | 357 | ||
| 5769 | 10년 전 | 215 | ||
| 5768 | 10년 전 | 268 | ||
| 5767 | 10년 전 | 1144 | ||
| 5766 | 10년 전 | 376 | ||
| 5765 | 10년 전 | 454 | ||
| 5764 | 10년 전 | 418 | ||
| 5763 | 10년 전 | 370 | ||
| 5762 | 10년 전 | 221 | ||
| 5761 | 10년 전 | 367 | ||
| 5760 | 10년 전 | 415 | ||
| 5759 | 10년 전 | 833 | ||
| 5758 | 10년 전 | 309 | ||
| 5757 | 10년 전 | 382 | ||
| 5756 | 10년 전 | 346 | ||
| 5755 | 10년 전 | 363 | ||
| 5754 | 10년 전 | 241 | ||
| 5753 | 10년 전 | 417 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기