웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
엔지오같은 메뉴 만들기 #1 - 수정판
2002.11.05 11:57
웹관련 질문과 답변 게시판에 엔지오식 메뉴를 어떻게 만드냐는 식의 질문이 많이 들어와 이렇게 글을 올립니다.
비슷한 종류의 메뉴 스크립트를 사용해 보셨거나 레이어와 자바스크립트에 대한 약간의 지식만 있으시면 쉽게 알수 있듯이, 엔지오의 메뉴도 레이어;;와 자바스크립트;; 를 이용해서 구성되어 있습니다.
※ 아래의 스크립트는 엔지오에 사용된 메뉴 만들기의 가장 기본이 되는 골격이며 강좌는 총 세편으로 나뉘어지게 됩니다.
※ 본 강의글은 메뉴가 세개 있다는 가정하에 쓰여졌으며 모든 사용 스크립트는 엔지오와 동일합니다.
※ 강좌에서는 왼쪽 정렬로 맞추었습니다. (엔지오는 오른쪽 정렬) 오른쪽 정렬은 두번째 강의에서 다룹니다.
※ 롤오버 이미지는 소스에서 제외시켰으며 세번째 강의에서 다루어 집니다.
━━━━━━━━━━
우선 아래와 같은 스크립트를 문서의 윗부분에 넣어줍니다. 굳이 헤더에 넣지 않으셔도 됩니다만 스크립트가 적용되는 메뉴 보다는 윗부분에 있어야 합니다;
<!-- 메뉴 스크립트 -->
<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' :;
}
부분이 삭제되었습니다. 이는 세번째 롤오버 이미지 적용시 이용됩니다.
비슷한 종류의 메뉴 스크립트를 사용해 보셨거나 레이어와 자바스크립트에 대한 약간의 지식만 있으시면 쉽게 알수 있듯이, 엔지오의 메뉴도 레이어;;와 자바스크립트;; 를 이용해서 구성되어 있습니다.
※ 아래의 스크립트는 엔지오에 사용된 메뉴 만들기의 가장 기본이 되는 골격이며 강좌는 총 세편으로 나뉘어지게 됩니다.
※ 본 강의글은 메뉴가 세개 있다는 가정하에 쓰여졌으며 모든 사용 스크립트는 엔지오와 동일합니다.
※ 강좌에서는 왼쪽 정렬로 맞추었습니다. (엔지오는 오른쪽 정렬) 오른쪽 정렬은 두번째 강의에서 다룹니다.
※ 롤오버 이미지는 소스에서 제외시켰으며 세번째 강의에서 다루어 집니다.
━━━━━━━━━━
우선 아래와 같은 스크립트를 문서의 윗부분에 넣어줍니다. 굳이 헤더에 넣지 않으셔도 됩니다만 스크립트가 적용되는 메뉴 보다는 윗부분에 있어야 합니다;
<!-- 메뉴 스크립트 -->
<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' :;
}
부분이 삭제되었습니다. 이는 세번째 롤오버 이미지 적용시 이용됩니다.
댓글 6
제목 | 글쓴이 | 날짜 |
---|---|---|
PHP_4_변수 | OGIT | 2008.03.25 |
PHP_5_IF 문과 기본 연산자 [1] | 아무흐 | 2008.03.26 |
PHP_6_간단한 폼 구구단을 만들어 보자 [2] | 아무흐 | 2008.03.26 |
GD를 이용해 즉석에서 룰오버 링크버튼 만들기 | 김현석181 | 2008.03.29 |
PHP_7_간단한 폼메일 만들기 [1] | 아무흐 | 2008.04.03 |
PHP에 입문하시는 분들을 위해 적어봅니다. [5] | 특급잠수부 | 2008.04.26 |
PHP 가변변수와 이항연산자에 대해 | 특급잠수부 | 2008.05.03 |
PHP_9_My-sql함수를 이용한 프로그램_1 | 아무흐 | 2008.07.15 |
기초설명_알고리즘(algorithm) [2] | ifnelse | 2008.07.28 |
기초설명_자바스크립트와 PHP와의 가장 큰 차이점 [4] | ifnelse | 2008.07.28 |
기초설명_변수를 알기전에.. [2] | ifnelse | 2008.07.28 |
간단한 ajax 채팅소스입니다. [12] | 제로저아 | 2008.10.23 |
?=down [4] | L-Goon | 2009.01.19 |
회원가입할때 중복막기 [4] | 김도훈449 | 2009.01.25 |
MySQL DB(디비)와 Table(테이블) Delete(삭제/초기화)하는 방법 [16] | 차카게살자 | 2002.01.01 |
리눅스 스왑 파티션 만들기 | skywalkers | 2001.01.03 |
윈도우에 설치된 MySQL의 root 패스워드 분실시 대처방법 [7] | Mintzz | 2001.04.29 |
[팁] mysql root password 분실했을 때 [5] | 최상훈 | 2001.09.27 |
네트워크 보안 - 스팸메일 추적 방법 [10] | 정후니 | 2001.09.29 |
linuxerv무료계정 백업받기^^ [2] | ^^shaki | 2001.02.05 |