웹마스터 팁
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
-
김지성
2002.11.05 15:58
좋은 팁 감사해요 /(-_-)/ 다음편도 기대하겠심다~ -
Winnie
2002.11.05 19:02
에센아 머리아퍼 -- -
박영창
2002.11.07 12:54
좋은 강좌 감사드립니다. 흐음.. 실제로 적용시키니깐 보기 좋군요 ^^;; 메뉴도 NZEO껄 그대로 가져다가 ㅡㅡ;;; (내가하면 디자인이 영꽝인지라..) 적용된 모습을 보고 싶으신 분은 cscafe.ce.ro 에 guest guest 로 들어오셔서 상단의 nuburi 라고 된부분에 마우스를 가져가 보심 됩니다.
그런데 혹시 메뉴 이동을 NZEO와 같은 형태로 하는 강좌를 좀 해주실분 안계신가요? 아래 공개된 강좌가 네츠에서는 안먹는 다는 말이 있던데.. -
김성목
2003.01.23 16:24
그림 밑으로내리면 레이어 사라지는데여...그럼 메뉴 클릭을 어떻게 하져? -
후니~*
2003.01.24 17:28
롤오버도 그냥 롤오버말고 페이드 롤오버가 있는데, 그런곳에 적용시키면 참 좋으련만.. -
☆Heelys☆
2003.02.11 21:26
저걸 어디에 넣어야 하나요..??
초보라 좀 세세히 가르쳐줬음 좋겠는데.
어디 어디 사이에 넣어라 하는 등..;;
힝..;;
제목 | 글쓴이 | 날짜 |
---|---|---|
MS홈에 쓰이는 오른쪽메뉴 툴바
[13]
![]() | Kortion | 2003.02.22 |
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] | 이남두 | 2003.02.26 |
엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] | 스티치 | 2003.03.29 |
간단한 점프메뉴(selecter) [14] | 박재현 | 2003.04.14 |
메뉴이동입니다. [5] | 데빌스텔스 | 2003.04.20 |
메뉴 옆에서 화살표가 스크롤되는.. [2] | 힘찬연못 | 2003.05.29 |
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] | 처절초보 | 2003.06.16 |
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] | 처절초보 | 2003.06.16 |
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] | 김주형 | 2003.07.03 |
[수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] | 미니 | 2003.08.18 |
플레쉬 메뉴를 표방한..=ㅁ= 자바스크립트의 수작 버튼 밑으로 스크롤 되는 아이콘입니다. [47] | beMax | 2003.09.14 |
플래시느낌의 유동적인 메뉴 [9] | jabusim | 2003.11.13 |
오른버튼 누를때 메뉴 뜨게하기(깔끔버전)
[5]
![]() | 럽 | 2003.12.09 |
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] | 봉팀장 | 2003.12.30 |
[초간단 자바스크립트!] 색깔바뀌는 메뉴 [3] | ∑Ztxy | 2004.01.19 |
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] | ∑Ztxy | 2004.03.10 |
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.)
[9]
![]() | tintintm | 2004.03.23 |
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 | ☺심심 | 2004.05.17 |
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] | ∑Ztxy | 2004.06.05 |
레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |