웹마스터 팁

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

보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 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개 라는 어마어마한
정말 바보같은 홈페이지를 만든적이 있습니다. 정말 감추고 싶은 과거입니다. 웹디자인에 대해서
조금 아는 후배가 놀라더군요. 도대체 이 한페이지를 작성하는데 몇달이 걸렸냐고..... ㅡㅜ
제목 글쓴이 날짜
동대문오피 동대문OP ⦑오피사이트.NET⦒ 동대문휴게텔 동대문오피 동대문오피 koykoyah 2025.02.20
가락오피 ⦑오피사이트.NET⦒ 가락OP 가락오피 가락출장샵 가락오피 koykoyah 2025.02.20
전주오피 ⦑오피쓰.COM⦒ 전주오피 전주출장마사지 전주오피 전주OP koykoyah 2025.02.20
영등포오피 영등포오피 ⦑오피쓰.COM⦒ 영등포OP 영등포스파 영등포오피 koykoyah 2025.02.20
울산오피 ⦑출장안마사이트.COM⦒ 울산마사지 울산오피 울산오피 울산OP koykoyah 2025.02.20
부천오피 부천OP ⦑오피쓰.COM⦒ 부천휴게텔 부천오피 부천오피 koykoyah 2025.02.20
동두천오피 동두천출장안마 ⦑오피.CLUB⦒ 동두천OP 동두천오피 동두천오피 koykoyah 2025.02.20
강서오피 ⦑오피.CLUB⦒ 강서마사지 강서오피 강서오피 강서OP koykoyah 2025.02.20
광주오피 광주오피 ⦑출장안마사이트.COM⦒ 광주OP 광주스파 광주오피 koykoyah 2025.02.20
광주오피 ⦑출장마사지안내.COM⦒ 광주오피 광주출장마사지 광주오피 광주OP koykoyah 2025.02.20
세종오피 ⦑오피쓰.COM⦒ 세종오피 세종OP 세종건마 세종오피 koykoyah 2025.02.20
대전오피 대전오피 ⦑출장안마사이트.COM⦒ 대전OP 대전스파 대전오피 koykoyah 2025.02.20
부평오피 부평오피 ⦑오피쓰.COM⦒ 부평OP 부평스파 부평오피 koykoyah 2025.02.20
신림오피 ⦑오피.CLUB⦒ 신림오피 신림출장마사지 신림오피 신림OP koykoyah 2025.02.20
의정부오피 ⦑오피쓰.COM⦒ 의정부오피 의정부출장마사지 의정부오피 의정부OP koykoyah 2025.02.20
강동오피 강동오피 ⦑오피사이트.NET⦒ 강동OP 강동스파 강동오피 koykoyah 2025.02.20
동두천오피 동두천오피 ⦑출장안마사이트.COM⦒ 동두천OP 동두천스파 동두천오피 koykoyah 2025.02.20
전주오피 전주출장안마 ⦑출장마사지안내.COM⦒ 전주OP 전주오피 전주오피 koykoyah 2025.02.20
분당오피 ⦑오피.CLUB⦒ 분당오피 분당출장마사지 분당오피 분당OP koykoyah 2025.02.20
송탄오피 송탄출장안마 ⦑출장마사지안내.COM⦒ 송탄OP 송탄오피 송탄오피 koykoyah 2025.02.20