메뉴 롤아웃이 안되요...^^: 고수님들 도와주세요.~
본문
http://dongkids.ivyro.net/test.php 여길 보시면 메뉴버튼이 나오는데요.. 롤오버하면 서브메뉴가 나오는데
빈공간으로 나왔을경우 메뉴가 들어가지 않습니다... 메뉴에서 메뉴로 갔을때는 정상 작동합니다만 메뉴에서
빈공간(다른메뉴가아닌 다른 여백) 마우스를 옮겼을시 메뉴가 들어가지 않고 그대로 있습니다...
아래 소스는 이렇습니다... 어딜 고처야 메뉴들이 들어갈까요..^^;? 고수님들 도와주세요...
<!DOCTYPE>
<html>
<head><title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script>window.onload = function() {
var menuObj = document.getElementById("mainManu").getElementsByTagName("div");
for(var i = 0 ; i < menuObj.length ; i++) {
menuObj[i].onmouseover = function(evt) {
var idx = i + 1;
return function() {
document.getElementById("subMenu1").style.display = "none";
document.getElementById("subMenu2").style.display = "none";
document.getElementById("subMenu3").style.display = "none";
document.getElementById("subMenu4").style.display = "none";
document.getElementById("subMenu5").style.display = "none";
document.getElementById("subMenu" + idx).style.display = "block"; }}();}}
</script>
<style>
.menu div { float:left; width:200px; text-align:center;}
.menu:after { content:""; display:block; clear:both; }
.subMenu { display:none; position:absolute; }
</style>
</head>
<body>
<div id="mainManu" class="menu">
<div><a href="http://www.naver.com"><img src="/images/main_17.jpg" width="245" height="37"></a></div>
<div><a href="#"><img src="/images/main_18.jpg" width="245" height="37"></a></div>
<div><a href="#"><img src="/images/main_19.jpg" width="245" height="37"></a></div>
<div><a href="#"><img src="/images/main_20.jpg" width="245" height="37"></a></div>
<div><a href="#"><img src="/images/main_21.jpg" width="245" height="37"></a></div>
</div>
<div>
<div class="subMenu" id="subMenu1" style="left:080px">
<div>서브메뉴1의 메뉴1</div>
<div>서브메뉴1의 메뉴2</div>
<div>서브메뉴1의 메뉴3</div>
<div>서브메뉴1의 메뉴4</div>
<div>서브메뉴1의 메뉴5</div>
</div>
<div class="subMenu" id="subMenu2" style="left:250px">
<div>서브메뉴2의 메뉴1</div>
<div>서브메뉴2의 메뉴2</div>
<div>서브메뉴2의 메뉴3</div>
<div>서브메뉴1의 메뉴4</div>
<div>서브메뉴1의 메뉴5</div>
</div>
<div class="subMenu" id="subMenu3" style="left:450px">
<div>서브메뉴3의 메뉴1</div>
<div>서브메뉴3의 메뉴2</div>
<div>서브메뉴3의 메뉴3</div>
<div>서브메뉴1의 메뉴4</div>
<div>서브메뉴1의 메뉴5</div>
</div>
<div class="subMenu" id="subMenu4" style="left:650px">
<div>서브메뉴3의 메뉴1</div>
<div>서브메뉴3의 메뉴2</div>
<div>서브메뉴3의 메뉴3</div>
<div>서브메뉴1의 메뉴4</div>
<div>서브메뉴1의 메뉴5</div>
</div>
<div class="subMenu" id="subMenu5" style="left:950px">
<div>서브메뉴3의 메뉴1</div>
<div>서브메뉴3의 메뉴2</div>
<div>서브메뉴3의 메뉴3</div>
<div>서브메뉴1의 메뉴4</div>
<div>서브메뉴1의 메뉴5</div>
</div>
</div>
</body>
</html>
답변 1
현재 자바스크립트 소스에서는 각 메뉴의 롤오버에 대한 이벤트만 있으므로 동작이 되지 않는것은
당연해 보이고요.
현재 메뉴와 같은 형태는 제이쿼리로 제공되는 소스들이 많으므로 그쪽을 이용하시는 것이 더 용이하지 않을가 보여지네요.