웹마스터 팁

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

보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 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개 라는 어마어마한
정말 바보같은 홈페이지를 만든적이 있습니다. 정말 감추고 싶은 과거입니다. 웹디자인에 대해서
조금 아는 후배가 놀라더군요. 도대체 이 한페이지를 작성하는데 몇달이 걸렸냐고..... ㅡㅜ
제목 글쓴이 날짜
모바일에서 레벨 아이콘, 이미지 아이콘 표시하기 [4] Gunmania 2013.08.23
1전 짜리 팁 - 최근수정일 표시 [2] 지그재거 2013.08.22
XE 알림센터 스킨을 iOS 알림창 비슷하게 만들기 [2] file novelic 2013.08.21
간단하게 사용자가 에디터 바꿔쓸 수 있도록 하기 ^^ [6] file Xiso 2013.08.20
jQuery fadeIn 홈페이지 부드럽게 이동 [4] file 지그재거 2013.08.20
리퍼러 수집기 애드온 실행후 사이트 먹통되었을때 대처법 [2] serendip 2013.08.19
탈퇴회원 레벨 아이콘 출력 안하기 [7] Gunmania 2013.08.17
벼랑끝 font awesome 45도를 아시나요 ? [2] file 지그재거 2013.08.13
[1.7.4] 로그인창 옆에 신규 쪽지 수 보여주기 socialskyo 2013.08.13
게시판 댓글 스킨에서 추가적인 변수 전달 안 되는 현상 보완 위해서. [1] sejin7940 2013.08.11
여러장의 이미지 동시 삽입시 이미지 간격조정 팁 [3] 꿈섬 2013.08.10
[주옥시리즈]닉네임/이메일 변경 금지 팁 [10] socialskyo 2013.08.10
스크롤 맨아래로 내리면 자동으로 글 목록 더보이기 구현(게시판어어느 스킨이든 사용가능) [19] 장포크 2013.08.10
지식인 모바일에서 답변이 보이지 않는 현상. 씨즈부스 2013.08.10
최신 제로보드 XE 동영상 강의 [25] 하얀마법 2013.08.09
새로고침없이 페이지 리로딩 간단하고 쉽게 서버한테는 미안하게 하는법 (서버단이 아니고 스킨에 ㅠ jquery load씀) 게시글,댓글,추천등 모든 부분다가능합니다. [2] 장포크 2013.08.08
textarea 테그 제임스라 2013.08.07
1.7.3.4 + sketchbook5 에서 대댓글 에디터 사용불가문제 [4] 뒤뒤 2013.08.07
익명게시판에서 회원 구분 가능하게 + 각 게시물에서 다른 아이디가 나타나게 하는 방법 [3] jn4kim 2013.08.06
HTML5를 이용한 시멘틱 XE 레이아웃 만들기 (인트로) [3] 이온디 2013.08.04