바이블가든

엔지오같은 메뉴 만들기1 (홈피관리)

2005-10-03 (월) 08:14 조회:1539

━━━━━━━━━━

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


<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' :;
        }

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