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

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

※ 강좌는 총 세편으로 나뉘어져 있습니다.
　→ 첫번째 강좌: 메뉴의 기본적 골격
　→ 두번째 강좌: 오른쪽 정렬하기 // 현재 보고 계시는 글입니다.
　→ 세번째 강좌: 롤오버 이미지 적용하기

※ 본 강의글은 메뉴가 세개 있다는 가정하에 쓰여졌으며 모든 사용 스크립트는 엔지오와 동일합니다. (하다못해 각 이벤트에 지정해준 이름까지 같습니다 -_-)

━━━━━━━━━━

우선 아래와 같은 스크립트를 문서의 윗부분에 넣어줍니다. 굳이 헤더에 넣지 않으셔도 됩니다만 스크립트가 적용되는 메뉴 보다는 윗부분에 있어야 합니다;
강좌1에서 추가된 부분을 파란색으로 표기하였습니다. (처음 파란색으로 표기하고 HTML 사용에 체크했더니 아래 레이어까지 죄다 html 로 처리되서 -_-;;; 취소합니다; pre, xmp 등으로 끊어봤지만 효과가 없더라는;;)


<!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
        switch(obj) {
                // 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
                // pWidth 라는 것은 가상적으로 붙여준 이름으로
                // 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
                case 'SubMenu1' : pWidth = 550; break;
                case 'SubMenu2' : pWidth = 465; break;
                case 'SubMenu3' : pWidth = 378; break;
        }
        xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
        document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
        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>



━━━━━━━━━━

끝.;;

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