웹마스터 팁

마우스를 주메뉴 위에 올렸을 때 부메뉴 레이어가 나타나게 하는 방법중에서 최고라고 자부 합니다.
이제 서브메뉴레이어작업 때문에 노가다 하신 분들은 아주 만족할 만한 방법입니다.

보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 1에 액션을 주어서 대상레이어 1은 보이고 2,3은 안보이게....
이런식으로 계속 주메뉴2,3에 연속해서 액션을 주게 되면 다른 주메뉴에 마우스를 올렸을 때
이전의 메뉴레이어는 사라지고 해당 메뉴레이어가 나타납니다.

근데 이방법은 문제점이 꼭 주메뉴에 마우스가 올려졌을때 부메뉴 레이어가 바뀐상태에서 액션을 건 주메뉴에 이동을 안하고 다른 공간으로 이동을 하면 서브 메뉴레이어 자체는 화면에 그대로 남아 있게 됩니다.

그래서 전 연구를 했습니다. 플래시처럼 마우스를 어느곳으로 옮겨도 서브메뉴레이어가 사라지겠끔요.
아무리 사이트를 뒤져도 방법은 없더군요. 이게 HTML의 한계다라고만 생각했습니다.

어제 외국사이트를 뒤지는데 플래시처럼 메뉴가 나타나고 사라지는 곳을 발견했습니다. 그리고 전 소스를 분석했는데 전혀 알 수가 없었죠.

한가지 얻은 것은 제가 상상했던 것이 불가능은 아니다... 그래서 장장 30분동안 연구를 해서 성공하였습니다.

1.해당 주메뉴위에 레이어를 하나 만들어서 주메뉴 크기만큼 조정을 해서 살짝 올려 놓는다.

2.서브메뉴레이어를 주메뉴위의 레이어에 끝선이 물리게 딱! 붙여 놓는다.

3.주메뉴레이어에 액션을 준다. mouseover-> 레이어1보이기. mouseout-> 레이어1감추기.
   ("레이어1"은 서브메뉴레이어 번호입니다.)

4.부메뉴레이어도 똑 같은 액션을 준다.

5.메뉴레이어가 아무리 많아도 기존의 방법처럼 모든 레이어 번호를 다 액션걸어줄 필요가 없고
  해당 레이어에 서브메뉴 레이어 번호만 보이기 감추기 액션을 걸어주면 됩니다.
  여기에서 그동안의 노가다는 완전히 사라지는 겁니다.

6.주메뉴레이어에 가로세로 1픽셀의 투명이미지를 배경이미지로 등록한다.(헉! 이 방법이 1번으로 가야하나?)

7.만약 주메뉴레이어를 만들지 않는다면 아마 낭패를 보실겁니다. 밑의 서브메뉴레이어로 이동할려고 마우스를
아웃시키면 자동으로 서브메뉴가 사라지는 거죠. 이것이 제가 HTML의 한계라고 생각했던겁니다.

8.여러분들의 노가다를 조금이라도 줄여들이기 위해서 투명이미지를 첨부합니다.

9.이건 초보분들을 위해서 하는 말인데요 서브메뉴레이어는 꼭 감추기 속성을 지정해야합니다.

결과는 여러분들이 Html 소스에서는 보지도 못한 메뉴가 나타날겁니다.
너무 간단한가?
어쨌든 http://www.coolunit.com/webdesign.htm 에서 확인해 보세요
이해가 쉬울 겁니다.

만약 기존의 방법대로 한다면 위의 홈페이지에서 쓰인 서브메뉴레이어가 화면에 그대로 남아 있어서
보기가 아주 싫을 겁니다.

*부가설명.

# 만약 그래픽으로된 메뉴를 사용하면 주 레이어는 필요없고 당연히 첨부한 파일도 필요없습니다.
  텍스트에 액션을 거니깐 안되더군요. 그리고 셀에 액션을 걸어도 이상한 결과가 나옵니다.
  텍스트메뉴를 사용하는 분만 주레이어를 만드세요.....

1.레이어는 꼭 해당 테이블에서 만들어야 합니다.
2.레이어 상대좌표로 설정시 테이블을 아주 잘 짜야 해상도 변경시 레이어가 날아가는 일이 없습니다.
3.레이어 절대좌표설정시 레이어가 해당 테이블에 쫙 달라붙기 때문에 레이어 크기가 크면 테이블이
   늘어나는 불상사가 생깁니다.
4.다시말해서 테이블 간격보다 레이어가 크거나 같은 위치에 여러개의 레이어를 뜨게 한다면 꼭 상대좌표
  로 설정하고 메인 테이블을 화면의 좌측과 상단에 딱 붙이게 만들어야 합니다.
5.평소에 테이블 짜는 연습을 합시다.....

예전에 전 이 효과를 내기 위해서 레이어 87개 타임라인 40개 액션걸기 174개 라는 어마어마한
정말 바보같은 홈페이지를 만든적이 있습니다. 정말 감추고 싶은 과거입니다. 웹디자인에 대해서
조금 아는 후배가 놀라더군요. 도대체 이 한페이지를 작성하는데 몇달이 걸렸냐고..... ㅡㅜ
제목 글쓴이 날짜
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - new/blank) [8] file 뽀因㉦ㅓо Ø Γ 2006.09.19
부트스트랩 레이아웃 제작시 메뉴 코딩팁 웹빌드 2014.02.23
GNB 메뉴를 쉽게 만드는 jQuery plugin [2] 김개발 2014.02.14
사이트맵에서 메뉴 생성할때 메뉴 추가 항목에 해당 모듈이 바로 연결되도록 [2] sejin7940 2014.01.25
메뉴추가가 안돼요. [2] file 궁굼자 2014.01.20
XE 1.7 에서 사이트맵에서 '메뉴 노출 대상' 설정할때 복수 그룹 선택시 에러 수정법 [1] sejin7940 2013.12.01
XE 1.7.3.X 메뉴얼 [2] 도라미 2013.11.08
XE 1.7.3.4 에서 레이아웃 설정의 메뉴가 계속 '시작메뉴가 있는 사이트맵'으로 설정되는 버그 [1] sejin7940 2013.06.16
1.7 이상 기본레이아웃, ie9에서 1차메뉴 깨짐 현상... [3] uoou 2013.10.07
자료실에 있는 LNB메뉴 위젯 사용 시 참고 사항 퍼니엑스이 2013.05.19
XE 1.7.3.0 default 스킨 IE9 드롭다운메뉴 안보이는 현상 [4] 장포크 2013.05.13
메뉴에 새글 표시 모듈이 작동하지 않은 문제 해결 [2] 샹하이 2013.04.15
1.7 버전의 새로워진 사이트맵(메뉴편집)에 적응해보자! [8] file EnuX 2013.03.15
Sketchbook5 레이아웃과 관리자메뉴 충돌 해결 [2] file YJSoft 2013.03.20
"스팸필터에 IP추가" 메뉴 미작동 패치 [1] showjean 2012.08.31
게시판 메뉴에 새글 알림 표시 띄우기 [13] file 보거스내친구 2009.06.21
업데이트했는데 관리메뉴중 일부가 안보일때 [2] 요술봉 2012.03.04
Xe 1.5.0.9 사용자 설치메뉴얼 제2부 [22] file 황비 2011.11.22