간단한 서브메뉴 onmouseover 이벤트 팁

:: 간단한 소개 ::

저는 요번 메뉴를 웹표준에 맞게 제작하여서 실제론 <div>, <ul>, <li> 소스만 사용하였
습니다. 또한 이에 맞게 CSS 스타일도 입혀주었습니다. 아래 예제들은 제일 간단하게 제작되었습니다.

:: CSS (스타일시트) ::

설명 : 서브메뉴는 기본적으로 display 속성을 none 으로 맞춰줍니다. 그리고 이미지에는 <a> 태그를 사용하지 않을 경우로 포인터 속성을 입혀주었습니다.

#submenu_1 { display:none }
#submenu_2 { display:none }
#mainmenu_img { cursor:pointer; border:0; }

:: 자바스크립트 ::

var save_layer = null;
function submenu_viewer(menu_id, opt)
{
 if (save_layer != null)
  save_layer.style.display = "none";
 
 if (opt == 'hide')
 {
  if (save_layer != null)
   save_layer.style.display = "none";
 } else {
  var menu = document.getElementById(menu_id);
  menu.style.display = 'block';
 }
 save_layer = menu;
}

:: HTML 소스 ::

설명 : 이미지 사용시 <a>를 사용하지 않는 가정하에 포인터라는 속성을 입혀주며, 링크를 입혀줘도 상관없도록 하게 만들었습니다. 또한 onmouseover 안에 보시면 submenu_viewer의 첫번째 값은 서브메뉴의 아이디값을 넣어주시면 됩니다. 특히 첫 소스에서 'null' 을 뜻하는건 조건을 넘기지 않는 것이며, 두번째 값은 'hide'와 'view'가 있는데, 만일 서브메뉴를 보고싶을시에는 view를 넣어주시면 되시고, 만일 보여진 서브메뉴를 없앨려면 'hide'를 쓰시면 됩니다.

1. 이미지 사용시

<div name="mainmenu">
  <img src="소스" id="mainmenu_img" onmouseover="submenu_viewer('null', 'hide');">
  <img src="메인메뉴1" id="mainmenu_img" onmouseover="submenu_viewer('submenu_1', 'view');">
  <img src="메인메뉴2" id="mainmenu_img" onmouseover="submenu_viewer('submenu_2', 'view');">
</div>

2. 텍스트 사용시
<div name="mainmenu">
  <a href="링크" onmouseover="submenu_viewer('null', 'hide');">인덱스</a>
  <a href="메인메뉴1" onmouseover="submenu_viewer('submenu_1', 'view');">메인메뉴1</a>
  <a href="메인메뉴2" onmouseover="submenu_viewer('submenu_2', 'view');">메인메뉴2</a>

3. 서브메뉴 소스
<div id="submenu_1">어쩌구저쩌구</div>
<div id="submenu_2">어쩌구 저쩌구</div>