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

Posted by 씨디맨 Posted in " 소프트웨어/ASP / JS / CSS / C# "   2008. 7. 9. 17:26
반응형
마우스 올리면 레이어 보이도록 메뉴만들기




예제보기
ex.htm




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

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

반응형

'소프트웨어 > ASP / JS / CSS / C#' 카테고리의 다른 글

Jscript mdb 직접 연결하여 연동하기  (1) 2008.08.15
절대 , 상대 레이어 지정하기  (2) 2008.08.01
마우스 올리면 레이어 보이도록 메뉴만들기  (6) 2008.07.09
img 태그 대체 그림 뛰우기  (4) 2008.05.19
CSS 사전 ,도움말  (12) 2008.02.27
파일 최근 수정일 확인하는 스크립트  (1) 2008.01.29

TAG ,

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

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

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

댓글 입력 폼

s;s 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.
Prev 1···67891011121314···27 Next

티스토리툴바