마우스 올리면 레이어 보이도록 메뉴만들기

마우스 올리면 레이어 보이도록 메뉴만들기




예제보기

invalid-file

// 레이어의 위치등을 조절하셔서 쓰시면 되겠습니다
// 레이어는 더 추가하셔도 되며 스타일을 입혀도 되겠죠

<script language=javascript>
function showLayer(layerID) {
document.all[layerID].style.visibility = "visible";
}
function hideLayer(layerID) {
document.all[layerID].style.visibility = "hidden";
}
</script>

<div id="menu1" style=" position:absolute; left:10; top:30px; visibility : hidden">
<table border=1 onmouseout="javascript:hideLayer('menu1');" onmouseover="javascript:showLayer('menu1');">
 <tr>
  <td bgcolor=white>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  </td>
 </tr>
</table>
</div>

<div id="menu2" style=" position:absolute; left:50; top:30px; visibility : hidden">
<table border=1 onmouseout="javascript:hideLayer('menu2');" onmouseover="javascript:showLayer('menu2');">
 <tr>
  <td bgcolor=white>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  </td>
 </tr>
</table>
</div>

<div id="menu3" style=" position:absolute; left:100; top:30px; visibility : hidden">
<table border=1 onmouseout="javascript:hideLayer('menu3');" onmouseover="javascript:showLayer('menu3');">
 <tr>
  <td bgcolor=white>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  </td>
 </tr>
</table>
</div>

<div id="menu4" style=" position:absolute; left:150; top:30px; visibility : hidden">
<table border=1 onmouseout="javascript:hideLayer('menu4');" onmouseover="javascript:showLayer('menu4');">
 <tr>
  <td bgcolor=white>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  </td>
 </tr>
</table>
</div>

<div id="menu5" style=" position:absolute; left:200; top:30px; visibility : hidden">
<table border=1 onmouseout="javascript:hideLayer('menu5');" onmouseover="javascript:showLayer('menu5');">
 <tr>
  <td bgcolor=white>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  </td>
 </tr>
</table>
</div>

<div id="menu6" style=" position:absolute; left:250; top:30px; visibility : hidden">
<table border=1 onmouseout="javascript:hideLayer('menu6');" onmouseover="javascript:showLayer('menu6');">
 <tr>
  <td bgcolor=white>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  <a href="http://cdmanii.tistory.com" target="new">내블로그 가기<br>
  </td>
 </tr>
</table>
</div>

<a href onmouseout="javascript:hideLayer('menu1');" onmouseover="javascript:showLayer('menu1');">메뉴1</a>
<a href onmouseout="javascript:hideLayer('menu2');" onmouseover="javascript:showLayer('menu2');">메뉴2</a>
<a href onmouseout="javascript:hideLayer('menu3');" onmouseover="javascript:showLayer('menu3');">메뉴3</a>
<a href onmouseout="javascript:hideLayer('menu4');" onmouseover="javascript:showLayer('menu4');">메뉴4</a>
<a href onmouseout="javascript:hideLayer('menu5');" onmouseover="javascript:showLayer('menu5');">메뉴5</a>