웹관련 질문과 답변 게시판에 엔지오식 메뉴를 어떻게 만드냐는 식의 질문이 많이 들어와 이렇게 글을 올립니다.

비슷한 종류의 메뉴 스크립트를 사용해 보셨거나 레이어와 자바스크립트에 대한 약간의 지식만 있으시면 쉽게 알수 있듯이, 엔지오의 메뉴도 레이어;;와 자바스크립트;; 를 이용해서 구성되어 있습니다.

※ 아래의 스크립트는 엔지오에 사용된 메뉴 만들기의 가장 기본이 되는 골격이며 강좌는 총 세편으로 나뉘어지게 됩니다.
※ 본 강의글은 메뉴가 세개 있다는 가정하에 쓰여졌으며 모든 사용 스크립트는 엔지오와 동일합니다.
※ 강좌에서는 왼쪽 정렬로 맞추었습니다. (엔지오는 오른쪽 정렬) 오른쪽 정렬은 두번째 강의에서 다룹니다.
※ 롤오버 이미지는 소스에서 제외시켰으며 세번째 강의에서 다루어 집니다.

━━━━━━━━━━

우선 아래와 같은 스크립트를 문서의 윗부분에 넣어줍니다. 굳이 헤더에 넣지 않으셔도 됩니다만 스크립트가 적용되는 메뉴 보다는 윗부분에 있어야 합니다;


<!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
        document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
        document.all[obj].style.visibility = 'hidden';
        }
</script>




━━━━━━━━━━

이제 각 서브 메뉴의 위치를 레이어로 조정하셔야 합니다.


<!-- 서브레이어 메뉴 출력 -->

<div id=SubMenu1 style="z-index:6; position:absolute; left:12px; top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>

<div id=SubMenu2 style="z-index:6; position:absolute; left:107px; top:115px; width:125px; visibility: hidden; height: 15px;" onMouseOver="showSubMenu('SubMenu2')" onMouseout="hideSubMenu('SubMenu2')" > 서브 메뉴 2 내용 </div>

<div id=SubMenu3 style="z-index:6; position:absolute; left:205px; top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu3')" onMouseout="hideSubMenu('SubMenu3')" > 서브 메뉴 3 내용 </div>




━━━━━━━━━━

끝으로 아래와 같은 방식으로 주메뉴를 출력해 주시면 됩니다.


<!-- 주 메뉴 출력 -->

<a href="링크1" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" onfocus=blur()><img src=메뉴1이미지 border=0 width=90 height=59 name="image1"></a>

<a href="링크2" onMouseOver="showSubMenu('SubMenu2')" onMouseout="hideSubMenu('SubMenu2')" onfocus=blur()><img src=메뉴2이미지 border=0 width=90 height=59 name="image2"></a>

<a href="링크3" onMouseOver="showSubMenu('SubMenu3')" onMouseout="hideSubMenu('SubMenu3')" onfocus=blur()><img src=메뉴3이미지 border=0 width=90 height=59 name="image3"></a>




━━━━━━━━━━

끝.;;

스크립트의 부분부분에 대한 부가 설명이 필요하시면 쪽지나 코멘트 부탁드립니다~ ^^;

※ 수정된 부분 2002년 11월 6일
메뉴 스크립트에서

        switch(obj) {
                 // 메뉴 추가 부분
                case 'SubMenu1' :;
                case 'SubMenu2' :;
                case 'SubMenu3' :;
        }

부분이 삭제되었습니다. 이는 세번째 롤오버 이미지 적용시 이용됩니다.