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

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




예제보기




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

<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>


이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 미니바쩜넷 2008.07.17 13:09 신고

    한때 홈페이지 만든다고 나모5버전으로 살짝 만들었던 기억이 나는군요..ㅎㅎ

    perm. |  mod/del. |  reply.
  2. 비룡 2010.02.07 19:22 신고

    저도 살짝 기억이 ㅋㅋ

    perm. |  mod/del. |  reply.
  3. 박정호 2012.01.03 00:04 신고

    http://cdmanii.com/433

    메뉴바를 만들려고 하는데요

    마우스를 올리면 내블러그가 text로 보이는데..

    그 text를 클릭 할수 있는 소스는 뭔가요..?

    마이스를 움직이면.. 사라집니다. ㅜㅠ

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.01.03 00:54 신고

      A 지점에 마우스를 올리면 B 가 보이고 까지의 설명이 이것이구요.

      마우스가 A를 벗어나면 B가 사라지겠죠.

      그래서 마우스를 A에서 B로 옮겨갔을 때 B를 다시 보이게 하는 부분이 들어가야합니다. ^^

      perm. |  mod/del. | 
  4. 번개 2013.04.13 21:18 신고

    안녕하세요 번개입니다 IT블로그 만들고싶는데 ctrc0113@naver.com
    ctrc0113@nate.com 이메일로보내주세용

    perm. |  mod/del. |  reply.