웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝!
2004.03.01 22:36
마우스를 주메뉴 위에 올렸을 때 부메뉴 레이어가 나타나게 하는 방법중에서 최고라고 자부 합니다.
이제 서브메뉴레이어작업 때문에 노가다 하신 분들은 아주 만족할 만한 방법입니다.
보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 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개 라는 어마어마한
정말 바보같은 홈페이지를 만든적이 있습니다. 정말 감추고 싶은 과거입니다. 웹디자인에 대해서
조금 아는 후배가 놀라더군요. 도대체 이 한페이지를 작성하는데 몇달이 걸렸냐고..... ㅡㅜ
이제 서브메뉴레이어작업 때문에 노가다 하신 분들은 아주 만족할 만한 방법입니다.
보통의 방법은 주메뉴에 액션을 줍니다. 주메뉴 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
-
SkyLove
2004.03.02 15:29
-
히로시
2004.03.02 17:14
SkyLove// 기본이라도 열심히 만드신 강좌가 아닙니까.
CoolUnit// 수고 하셨습니다^^ -
허현승
2004.03.02 18:05
whitespace.zip 파일을 열어보니 달랑 하얀색 사각형 gif 이미지 뿐...
하지만 님이 찾아내신 서브메뉴는 훌륭한 작품입니다!! -
앳플군
2004.03.06 16:47
메뉴메이커같은데서 기본지원하는겁니다 [..] -
CoolUnit
2004.03.06 20:00
그런데 기본이라고 하시는데 문제는 이곳 제로보드 홈페이지에서 제가 보지를 못했고
많은 사이트를 돌아 보았는데 저와 똑 같은 방법을 보지를 못했습니다.
기본이 아니라 어떤 "비기"(비밀스러운 기술)이 아니었는지요. 이 기본이 기술 또는 저술 되
어 있는 책자라든가 사이트를 알려주시면 고맙겠습니다.
그리고 전 이 방법을 혼자 터득하기 위해서 솔직히 말씀드리면 1년 반 전에 궁금하게 생각했
던 겁니다. 아무리 찾아도 가르쳐 주는 곳이 없더군요.
기본이라면 천지에 널린것이 이 방법 아니겠어여? -
nreal
2004.03.08 09:29
그냥 서브메뉴레이어의 마우스 아웃 액션 주면 안되나요?
이런 메뉴엔 별 관심이 없어서 해본적은 없지만...
[지나가면서 기본 이라는거 가지고 싸우는것 같은데 "만약" 이게 기본이라면 책자든가 사이트에 나오질 안켔죠..."기본" 이니까요] -
CoolUnit
2004.03.08 18:24
허걱!! nreal 님의 말씀이 맞는 듯 ㅡㅜ
제가 댓글 쓸때 술한잔 먹어서 정신이 혼미한 상태에서 글을 썼어요
그런데 문제는 이것보다 더 못한 방법들(헉! 표현이 좀 이상하고 과격한것 같은 생각이 들어요.)... 제가 글 상단에 써놓은 것과 유사한 방법은 책에도 널렸고 사이트 마다 다 있어요. 물론 이 전통적인 방법도 제가 스스로 터득한 방법이죠...
어쨋든 제가 쓴 댓글이 제가 의도한 방향과 틀리고 기분나쁘고 싸우는 것 처럼 보였다면
진심으로 사과 드립니다. 전 글 쓸때 화가 난게 아니라 술 적당히 먹고 기분 좋은 상태였어요.
그리고 nreal님의 질문에 대한 답변입니다. 헉 그건 생각을 안해 보았는데 어쩌면 될것도 같군요 지금 당장 해보겠습니다.... -
손오빠
2004.03.11 12:55
7.만약 주메뉴레이어를 만들지 않는다면 아마 낭패를 보실겁니다. 밑의 서브메뉴레이어로 이동할려고 마우스를
아웃시키면 자동으로 서브메뉴가 사라지는 거죠. 이것이 제가 HTML의 한계라고 생각했던겁니다.
흠 저도 이부분때문에 버벅댔는데... 맨날 링크(텍스트)에만 효과를 줬으니 떠나면 없어지거늘... td자체도 온마우스 오버같은 효과가 먹는걸 왜 간과했을까 아...
덕분에 벅뜩하며 제 머리를 스쳤습니다. 되더군요
뒷북을 울려라 둥둥둥
쿨유닛님 땡큐~ -
영맨
2004.03.22 23:45
이 방법 드림위버책 보면서 어디선가 본거 같은데 책자는 정확하게는 말씀 못 드리겠네요.
하지만 강좌는 잘 보았습니다. ^^*
수고하셨습니다. -
카이
2004.03.23 00:26
중복이어도 좋으니 좋은 팁은 언제나 환영.....^^ -
강태만
2004.03.25 10:29
지나가다가 한마디만.
태클입니다. 그리고 태클걸어서 죄송합니다.
기본기본 하지 맙시다. 여기는 이제막 html처음배우는 분들도 오고
완전 통달한 분들도 오는 곳입니다.
만약 제가 html문서의 기본은
<html>
<head>
해드에 들어갈 내용
</head>
<body>
브라우즈에 보일 내용
</body>
</html>
이렇게 구성 됩니다. 라고 팁이라고 올렸다면
여러분은 어떤 답글을 다실런지요.
조금이라도 html을 아시는 분들은 그것도 팁이라고 올렸냐고 기본 아니냐고 할실분들
많으실 것입니다. 그것이 바로 태클이라 생각 합니다.
다들 자신의 입장에서 답글을 올린 것이지요.
정말 html을 처음 접하시는 분에게는 위의 것도 도움이 될수 있다는 사실입니다.
차라리 자신이 고수라면 내용을 읽어보시고 추가로 다른방법도 있다던지
좀더 간결하게 할수 있다던지 등의 답글을 올려야 그게 진정한 고수라고 생각합니다.
그냥 지나가다가 초보인 주제에 횡설수설 하였습니다. -
julie
2004.04.22 11:52
누구나 첨엔 html 공부 부터 시작합니다!
잘보구 갑니다! 감사해효 ^^ -
얼라라
2004.05.06 17:16
뭐가~
나타났다가 사라진다고 하는데...
뭔지..??
요술집 말씀 하시나요..@ -
CoolUnit
2004.05.07 09:35
얼라라 님 답변이에요.
근데 답변하기가 망설여집니다.
설명 글을 올리면 많은 분들이 "이것은 기본이라고~ 기본도 모르냐며~ 기본적인 글을 올리는건 우리를 두~번 죽이는 것이라고...." 말 할까 싶어서 조금 망설여지네요....
"레이어"가 마우스의 위치에 따라서 나타났다가 사라지는 걸 말합니다.
근데 님은 레이어가 뭔지 모르시는 것 같아서리(설마 알고 있는데 장난으로?) 간단한 설명을 해 드리겠어요.
"레이어"란 원판위에 덮는 투명한 비닐입니다. 이 비닐에는 다양한 글자나 그림이 들어갑니다.
당연히 원판과 비닐이 함께 보여지겠죠? ^^ -
박노우
2004.05.08 16:39
흐흐 참고고 나모4.0에서 작업한 문서를 5.0에서 작업하면 레이어 액션이 꼬입니다.. 5.0에서 작업한 문서를 다시 4,0에서 작업해도 마찬가지..
살펴보니.. 태그 위치가 바뀌더라고요.. 그냥 혹시나 만에하나 참고하시라고 적었습니다. -
CoolUnit
2004.05.30 20:45
아참! 그리고 저의 방법은 기존의 서브레이어 방식과 틀립니다. 독립적으로 다른 버튼들의 액션에는 전혀 영향을 주지 않습니다.해당 버튼에 해당 서브레이어의 액션만 보이기 숨김을 지정하면 됩니다.
기존의 방법은 버튼이나 메뉴가 10개면 10개 그 숫자만큼의 액션이 각각의 메뉴에 들어가는 것이 많습니다. -
┏ⓩZion┛
2004.05.28 01:43
;음,, 그냥; 마우스 아웃에서 하이딩하버리면 끝날문제일것도 같은데요;
(같은말인가 --; )
아니면 이런방법도 있죠; 노가다지만, 다른 버튼들에다가 마우스 모버 > 보일 레이어를 제외한 모든 레이어 하이딩 (하나씩 설정해줘야 한다죠; )
이런식으로 하면 확실하다죠; 그리고 마우스 아웃을 빼고 위와같은 형식으로 해도 볼만하더군요; -
CoolUnit
2004.05.30 20:39
저의 방법에서 빠진게 있는데요 그랙픽에 링크나 액션을 주는게 아니라 텍스트에 액션을 주었습니다. 만약 그래픽이라면 주 레이어는 필요 하지않습니다. 액션이 바로 들어가니까요 ^^
그리고 위의 질문인데 마우스 아웃에서 레이어 숨김을 하면 된다는 말인데 액션이 들어가는게
주레이어에 서브레이어 보이기 숨김 설정이 되고 서브레이어에 서브레이어에 대한 액션이 들어가는데 그냥 단순히 서브레이어에만 하이드 액션만 주면 주레이어의 메뉴에서 상단으로 마우스가 움직일시 서브 메뉴가 사라지지 않는다는 단점이 있습니다.
제가 질문을 정확하게 이해 했는지 모르겠습니다. 동문서답이라면 다시 글 남겨주세요 ^^ -
이지환
2004.06.29 11:09
저에게 참 큰 도움이 되었습니다...
뭐.. 유식하신 분들은 눈살 찌푸려지는 리플을 달아놓으신 듯 한데...
인격이 의심스럽네요... 꼭 그런 리플을 달아야 하는지...
아무튼 참 도움 많이 됐네요... 감사합니다.. -
hanpedro
2004.07.22 11:49
ㅎㅎㅎ 저도 고민 많이 혔습니더.
이거이 소스를 얻을수는 없을까요?
초보밑의 초보밑의 초보에게는 귀한 보물이죠 ㅎ -
이형균
2004.07.31 03:38
나모 길라잡이에서 레이어를 이용하여 숨엇나 나왓다 하는 방법이 잇죠..
솔직히 초보인 저도 이런메뉴 어떻게 만들까 생각하며, 그냥 스크립트 마법사의 풀다운 메뉴를 쓰곤 했습니다...
그런데 최근에 생각해본 결과... 레이어를 쓰는게 썩 좋지만은 않은듯 생각이 들더군요. 만들때 에디터에서 보이는 모습이 웹브라우져에서 약간 달르게 보이기 때문이죠.. 끝선을 에디터에서 잘 맞춰노으면, 다시맞춰야되고..등등
암튼 아주 나이스 좝입니다 ^^ㅋ -
김호성
2005.11.08 17:57
nreal// 이 위에서 말씀하셨듯이 서브메뉴레이어 에도 마우스 액션 주어도
깔끔하게 나타났다 사라지는걸 경험 해봤습니다. ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] | CoolUnit | 2004.03.01 |
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] | PHASE | 2004.01.19 |
스크롤바 색상을 아름답게. [17] | 해리포터포에버 | 2003.12.16 |
마우스 커서에 대해서... [16] | impre | 2003.09.20 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] | PHASE | 2003.09.08 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] | 토끼군 | 2003.08.20 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] | @kihwa | 2003.07.26 |
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] | @kihwa | 2003.07.11 |
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] | 쭘's | 2003.07.07 |
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] | 쭘's | 2003.06.16 |
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] | 쭘's | 2003.06.07 |
css3 안쪽과 바깥쪽 그림자 만들기 입니다 | 낮은자 | 2014.03.06 |
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] | 999 | 2011.01.11 |
노프레임 홈페이지 만들기 강좌 | H.N커뮤니티 | 2009.02.28 |
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) | H.N커뮤니티 | 2009.02.22 |
css 정리 파일(한글) [3] | 미곰탱 | 2009.01.22 |
스크립트 모음 [1] | *이종민* | 2008.11.29 |
계산기 [1] | *이종민* | 2008.11.29 |
바탕화면에 바로가기 만들기 | *이종민* | 2008.11.29 |
메인메뉴에다가 서브 메뉴 를 꼭 붙여야한다는점도..기억하시길