바이블가든

[re] 엔지오같은 메뉴 만들기2 (홈피관리)

2005-10-03 (월) 08:15 조회:1683

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

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

━━━━━━━━━━

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

━━━━━━━━━━

끝.;;