묻고답하기
드롭다운 메뉴 소스 관련 질문입니다.
2009.06.17 19:53
http://oieo.cafe24.com/coding.htm
위 주소 들어가시면 드롭다운 메뉴가 있습니다.
위 주소와 같이 만들겁니다.
질문1
http://oieo.cafe24.com/coding.htm 여기 드롭다운 메뉴 중 메인메뉴1이란 메뉴가 있습니다.
마우스를 올리면 메뉴가 펼쳐집니다. 중요한건 마우스가 메뉴 밖으로 빠져나가면 메뉴가 사라져야 원상태로 되야 하는대 그게 안되서 질문드립니다.
어떻게 수정해야 하죠? 원래 저 소스가 onmouseclick 이었는대 제가 onmouseover로 고쳤습니다. 중요한게 안되내요;; 알려주세요 (__);
질문2
메인메뉴1의 가로 width 를 늘리면 펼쳐진 메뉴까지 같이 늘어나서 나타납니다. http://www.thesak.com 여기와 같이 마우스 오버전 width가 대략 100이라면 펼쳐진메뉴 width는 800으로 적용시키고 싶습니다. 셀 width 값을 주면 되지만 지금 셀을 잘러서 아래로 붙여넣으면 스크립트 오류가 납니다. 이 것도 정말 궁금합니다^^;;
어떻게 보면 정말 아시는 분들이라면 간단한 방법일거에요 꼭좀 알려주세요
소스 원본
<style type="text/css">
body,table,tr,td { background-color:#59658A; color: #d5d5d5; font-size: 9pt; font-family:돋움,돋움체; font-weight:bold }
a:link { text-decoration: none; color: #d5d5d5 }
a:visited { text-decoration: none; color: #d5d5d5 }
a:active { text-decoration: none; color: #d5d5d5 }
a:hover { text-decoration: underline; color: #d5d5d5 }
</style>
<script language="javascript">
var old_menu = '';
var old_cell = '';
function menuclick( submenu ,cellbar){
if( old_menu != submenu ) {
if( old_menu !='' ) {
old_menu.style.display = 'none';
}
submenu.style.display = 'block';
old_menu = submenu;
old_cell = cellbar;
}
else {
submenu.style.display = 'none';
old_menu = '';
old_cell = '';
}
}
function view(text) {
if(text=="") {
tips.innerText=" 메뉴의 설명문을\n이곳에 기입하세요.";
}
else tips.innerText=text;
}
</script>
</head>
<body>
<table border="1" cellpadding="4" cellspacing="0" borderColorDark=#c0c0c0 borderColorLight=#222222 style="position:absolute; left:10; top:10;">
<tr>
<td align="left" onmouseover="this.style.backgroundColor='#f5f5f5'; view('메인으로\n돌아갑니다.')" onmouseout="this.style.backgroundColor=''; view('')" style="cursor:hand;" title="메인으로.">
<a href="#" target="main"> 메인으로</a>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td align="left" onmouseover="this.style.backgroundColor='#f5f5f5'; view('독립메뉴 1의 설명을\n이곳에 기입하세요.')" onmouseout="this.style.backgroundColor=''; view('')" style="cursor:hand;" title="독립 메뉴 1.">
<a href="#" target="main"> 독립메뉴 1</a>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td id="bar1" align="left" onmouseover="menuclick(submenu1, bar1 );" style="cursor:hand;" onmouseover="this.style.backgroundColor='#f5f5f5'; view('클릭 하시면 서브메뉴 \n1 이 나옵니다.')" onmouseout="this.style.backgroundColor=''; view('')" title="메인 메뉴 1.">
메인 메뉴 1
</td>
</tr>
<tr>
<td id="submenu1" style="background:#c0c0c0; margin-left:5; display:none;" align="left" onMouseOver="this.style.background='#f5f5f5'+
'+
'" onMouseOut="this.style.background='#c0c0c0'">
<a href="#" target="main" onMouseOver= "view('서브 메뉴 설명1-1')" onMouseOut= "view('')">서브 메뉴 1-1</a><br>
<a href="#" target="main" onMouseOver= "view('서브 메뉴 설명1-2')" onMouseOut= "view('')">서브 메뉴 1-2</a><br>
<a href="#" target="main" onMouseOver= "view('서브 메뉴 설명1-3')" onMouseOut= "view('')">서브 메뉴 1-3</a><br>
<a href="#" target="main" onMouseOver= "view('서브 메뉴 설명1-4')" onMouseOut= "view('')">서브 메뉴 1-4</a><br>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>
<table border=1 width=140 cellpadding=1 cellspacing=0 borderColorDark=#c0c0c0 borderColorLight=#222222>
<tr>
<td align=center style="background:#c0c0c0; font- family:돋움; color:#787878">메뉴 안내문</td>
</tr>
<tr>
<td id="tips" align=center height=40 style="font- family:돋움; color:#d5d5d5">메뉴의 설명문을<br>이곳에 기입하세요</td>
</tr>
</table>
</td>
</tr>
</table>
