웹마스터 팁

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

보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 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개 라는 어마어마한
정말 바보같은 홈페이지를 만든적이 있습니다. 정말 감추고 싶은 과거입니다. 웹디자인에 대해서
조금 아는 후배가 놀라더군요. 도대체 이 한페이지를 작성하는데 몇달이 걸렸냐고..... ㅡㅜ
제목 글쓴이 날짜
서브 메뉴를 항상 펼쳐있도록... [2] :맥노턴 2008.01.01
file 업로드 않될때, 메뉴생성및수정이 않될때 [2] plruto 2008.01.31
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] file plruto 2008.02.07
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] 우야노 2008.05.03
2차메뉴 롤오버 위치 변환.. [3] 봄처녀 2008.06.05
1차 메뉴에서 하위 메뉴 없을때 생기는 여백 없애는 방법 [7] 제로시오 2008.07.04
메뉴에 이미지 버튼 사용하기 팁이요~ 이미지첨부! [3] file Zzini.net 2008.07.05
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02
문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 [7] 제베 2008.08.31
메뉴 모듈 기능 조금 추가 [23] [1] file 반도체맨 2008.09.29
상단메뉴 레이어메뉴 위치 디테일하게 조정하기 [1] file HomeBox™ 2008.10.10
[초간단]회원팝업메뉴에 메뉴넣기 [1] Pw-NET 2008.11.30
제로보드 DTREE 메뉴 적용하기 ( 카테고리 선택기 흉내 냈습니다.) [5] file 조성우371 2009.01.17
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] 만쓰별(정만) 2009.01.24
Smarty 한글 메뉴얼 공개합니다. [1] 미니미 2009.03.04
페이지 및 게시판 메뉴 경로 [2] file 자반튀김 2009.04.15
관리자모드에서 메뉴 항상 펼치기 [1] file 아드레날린 2009.06.09
게시판 메뉴에 새글 알림 표시 띄우기 [13] file 보거스내친구 2009.06.21
회원 팝업메뉴에서 작성글 클릭시 다른 아이디 검색 안되게 하기 [3] 절망린 2009.07.03
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기 [5] file 엔시아- 2009.07.16