서브메뉴작업시 마우스 오버시 레이어 보이기 안보이기 > 기술자료

• 목록

[ 방법1 ]
<style type="text/css">
.menuon { position:absolute; visibility:hidden; }
.menuoff { position:absolute; visibility:block; }
</style>
<script type="text/javascript">
<!--
function show_Content(num) {
  var form = document.all;
  for (var i =0 ; i < form.menu_content.length; i++  ) {
    form.menu_content[i].style.visibility =  'hidden';
  }
  form.menu_content[num].style.visibility =  'visible';
}
//-->
</script>

<table border="0" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td align="center" height="25" onclick="show_Content(0)" style="cursor:hand; filter:alpha(opacity=70); background-color:#FFFF99" width="290">메인메뉴1</td>
    <td width="20">&nbsp;</td>
    <td align="center" onclick="show_Content(1)" style="cursor:hand; filter:alpha(opacity=70); background-color:#FFFF99" width="290">메인메뉴2</td>
  </tr>
  <tr>
    <td colspan="3" height="500" valign="top">
      <div class="menuon" id="menu_content">서브메뉴1</div>
      <div class="menuon" id="menu_content">서브메뉴2</div>
    </td>
  </tr>
</table>


[ 방법2 ]

<script type="text/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:10px; top:30px; width:200px; visibility:hidden">
<table style="width:100%;" border="0" onmouseout="javascript:hideLayer('menu1');" onmouseover="javascript:showLayer('menu1');">
  <tr>
    <td>
      <a href="a1.html">메뉴A1</a> |
      <a href="a2.html">메뉴A2</a>
    </td>
  </tr>
</table>
</div>

<div id="menu2" style="position:absolute; left:50px; top:30px; width:200px; visibility:hidden">
<table style="width:100%;" border="1" onmouseout="javascript:hideLayer('menu2');" onmouseover="javascript:showLayer('menu2');">
  <tr>
    <td>
      <a href="b1.html">메뉴B1</a> |
      <a href="b2.html">메뉴B2</a>
    </td>
  </tr>
</table>
</div>

<a href onmouseout="javascript:hideLayer('menu1');" onmouseover="javascript:showLayer('menu1');">메뉴A</a>
<a href onmouseout="javascript:hideLayer('menu2');" onmouseover="javascript:showLayer('menu2');">메뉴B</a>


참고자료
http://cdmanii.com/433
http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=63837680
http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=69686009