웹마스터 팁

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

보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 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개 라는 어마어마한
정말 바보같은 홈페이지를 만든적이 있습니다. 정말 감추고 싶은 과거입니다. 웹디자인에 대해서
조금 아는 후배가 놀라더군요. 도대체 이 한페이지를 작성하는데 몇달이 걸렸냐고..... ㅡㅜ
제목 글쓴이 날짜
게시판 스킨에서 조회수, 추천수, 최근 수정일 외 항목도 정렬가능하게 하기 SMaker 2009.06.11
로그인 페이지 만드는 방법 [5] 산토 2009.06.12
외부문서에서 mms:// 태그 사용하기 [11] 아고라 2009.06.12
에디터 컴포넌트 목록이 안 나올 때 해결법 [2] SMaker 2009.06.14
layout.html에 접근 못하게막기. [8] Habile 2009.06.15
업데이트 후 Rewrite mod 사용이 안돼는 경우 [2] 겨우리851 2009.06.18
XE용 query xml 방식으로 일반 테이블도 접근 처리 하기 [1] 라르게덴 2009.06.18
확장변수 폼 디자인 하기 [14] file Diver 2009.06.21
게시판 메뉴에 새글 알림 표시 띄우기 [13] file 보거스내친구 2009.06.21
개인쪽지발송!~ noirzo 2009.06.23
로그인 후 그룹별로 다른 페이지로 가기 - 업데이트판 v1.5 [19] 무대포2 2009.06.24
쪽지 답글 보내기 원본 내용 삭제 절망린 2009.06.24
보낸 쪽지함에서 쪽지 내용 안에 회원 아이콘이 제대로 표시 되지 않을때.. 절망린 2009.06.24
페이지 제일 위로 바로가는 Top 버튼 [5] file 개돌 2009.06.26
로그인 & 파일 첨부 문제 [3] peter99 2009.06.29
이미지 리사이즈 적용이 안되는 경우 [4] 아고라 2009.06.30
확장변수에 회원정보를 넣어보자 [10] file 개돌 2009.06.30
지오피아 게임 제로보드 XE 연동 [5] file 다른사람 2009.06.30
달력형 리스트 입니다. [5] file 착한악마 2009.07.01
제로보드 매뉴얼 version 0.63 입니다. [16] file 윈매니아 2009.07.03