웹디자인 강의
기타 본메뉴에 마우스오버스시 서브메뉴 나타나기(허접강좌ㅡㅡ;;)
2002.09.18 07:50
허접강좌인데 용기내서 올렸습다.
이미지용량이 부족해서 기냥 제계정에 올렸습니다.
이미지용량신청했으니 용량올려주시면 정식으로 올릴게요~짜르지마세요 T^T
![](http://imu.nazoa.cc/강좌/su1.jpg)
1.서브메뉴가 본메뉴밑에 꼭 위치할 필요는 없습니다.
멋지게 디자인하시려면 다른곳에 배치시키셔도 됩니다.
![](http://imu.nazoa.cc/강좌/su2.jpg)
2. 레이어에 ID는 식별자일뿐입니다. 하지만 본메뉴와 연관있는
이름을 주셔야 나중에 혼란스럽지 않을거에요.
![](http://imu.nazoa.cc/강좌/su3.jpg)
3. 이 과정을 마치셨다면 이제 잠시 생각을 해보죠.
예를들어 플래쉬메뉴에 마우스가 가면 플래쉬서브메뉴가 나타나겠죠.
문제는 마우스가 다른메뉴로 이동해도 플래쉬서브메뉴는
안사라진다는 점입다. 그럼 마우스가 지나가는 메뉴마다 서브메뉴는
나타나고다 안사라지면 힘들어지겠죠..
4번과정은 그 현상을 막기위한 엑션입다.
![](http://imu.nazoa.cc/강좌/su4.jpg)
4. 여기까지하셨다면 이제 다른 메뉴에도 3,4번과정을 해주셔야겠죠.
물론 해당레이어를 레이어보이기, 다른레이어들은 감추기로 말입다.
![](http://imu.nazoa.cc/강좌/su5.jpg)
5. 예전에 제가 책에서 본 팁은 3번과정에서 바로
onmouseout와 레이어감추기 액션을 플래쉬레이어에 다시 추가해서
마우스가 본메뉴와 서브메뉴영역에서 벗어나면 서브메뉴가
사라지는 방식을 사용햇습다. 하지만 이방식은
본메뉴와 서브메뉴가 붙어있어야했고 마우스가 본메뉴와 서브메뉴의
영역에서 벗어나면 서브메뉴가 사라지는 단점이 있었습다.
그래서 제가 고민끝에 이 방법을 고안했습다.
이런식으로하면 굳히 본메뉴와 서브메뉴가 붙어있을 필요도없고.
마우스가 그 작은 서브메뉴영역에서 원하는 서브버튼을 클릭하려고
신중하게 움직일 필요도 없습다.
유용하게 쓰시구요. 퍼가실분은 당연없겠지만
혹시 퍼가시면 출처는 http://imu.nazoa.cc
해주세요.
이미지용량이 부족해서 기냥 제계정에 올렸습니다.
이미지용량신청했으니 용량올려주시면 정식으로 올릴게요~짜르지마세요 T^T
![](http://imu.nazoa.cc/강좌/su1.jpg)
1.서브메뉴가 본메뉴밑에 꼭 위치할 필요는 없습니다.
멋지게 디자인하시려면 다른곳에 배치시키셔도 됩니다.
![](http://imu.nazoa.cc/강좌/su2.jpg)
2. 레이어에 ID는 식별자일뿐입니다. 하지만 본메뉴와 연관있는
이름을 주셔야 나중에 혼란스럽지 않을거에요.
![](http://imu.nazoa.cc/강좌/su3.jpg)
3. 이 과정을 마치셨다면 이제 잠시 생각을 해보죠.
예를들어 플래쉬메뉴에 마우스가 가면 플래쉬서브메뉴가 나타나겠죠.
문제는 마우스가 다른메뉴로 이동해도 플래쉬서브메뉴는
안사라진다는 점입다. 그럼 마우스가 지나가는 메뉴마다 서브메뉴는
나타나고다 안사라지면 힘들어지겠죠..
4번과정은 그 현상을 막기위한 엑션입다.
![](http://imu.nazoa.cc/강좌/su4.jpg)
4. 여기까지하셨다면 이제 다른 메뉴에도 3,4번과정을 해주셔야겠죠.
물론 해당레이어를 레이어보이기, 다른레이어들은 감추기로 말입다.
![](http://imu.nazoa.cc/강좌/su5.jpg)
5. 예전에 제가 책에서 본 팁은 3번과정에서 바로
onmouseout와 레이어감추기 액션을 플래쉬레이어에 다시 추가해서
마우스가 본메뉴와 서브메뉴영역에서 벗어나면 서브메뉴가
사라지는 방식을 사용햇습다. 하지만 이방식은
본메뉴와 서브메뉴가 붙어있어야했고 마우스가 본메뉴와 서브메뉴의
영역에서 벗어나면 서브메뉴가 사라지는 단점이 있었습다.
그래서 제가 고민끝에 이 방법을 고안했습다.
이런식으로하면 굳히 본메뉴와 서브메뉴가 붙어있을 필요도없고.
마우스가 그 작은 서브메뉴영역에서 원하는 서브버튼을 클릭하려고
신중하게 움직일 필요도 없습다.
유용하게 쓰시구요. 퍼가실분은 당연없겠지만
혹시 퍼가시면 출처는 http://imu.nazoa.cc
해주세요.
댓글 5
-
⌒,.∝
2002.09.18 10:00
자동링크 http://imu.nazoa.cc -
♪ Geont
2002.09.22 04:20
나모를 설명하시는것 같은데.
이 방법은 왼쪽정렬된 홈페이지에서만 가능합니다.
레이어로 작동하기 때문에
나모에선 왼쪽과 브라우져 위쪽을 기준으로 레이어위치를 잡는데요.
왼쪽 정렬일경우는 괜찮지만.
가운데 정렬일 경우에는 해상도에따라 가로의 크기가 틀려지기 때문에..
레이어가 원하는 방향과는 다른 경과를 나오게 되져.
가운데 정렬일 경우에는 다른 방법을 쓰셔야...( 엔지오에서 잘찾아보면.소스구할수 있습니다.) 그럼이만 -
이동환
2002.09.21 22:02
저기 액션주기에서 마우스오버(레이어감추기) 라는 액션을 줘두 괜찮을거 같은데요.
제가 아까 해봤는데 잘 되더라구요.^^ 감사합니다 어렵게 다른 홈페이지 에서 보긴보는데...ㅋ
감사감사..^^ -
박은석
2002.09.22 08:19
저도이번에 알아낸 방법이라 단점에 대해선 몰랐는데 감사합니다.
하지만 나모에서 이 방법외엔 특별히 서브메뉴를 구현하는 방법은 없어보이네요/
저도 드림위버로 시작할껄.
영어라는 무서운놈때문에 ㅠㅠ
여튼 단점지적에 해결방안까지 알려주셔서감사합다.
이동환님 성공하셨다니 다행이네요 . 저 저희집만 되는줄 알았거든요 ^^;; -
박은석
2002.10.16 14:34
저는 해상도에 따라 위치가달라지는걸 막기위해 아래와 같은 방법을 사용햇습니다.
엔지오 찾아보니깐 position을 relative로 고치래요 ^^;;
먼저 레이어를 추가하고 position을 relative로 줍니다.(여기까진 공통이구요)
전 그래도 안되길래 left랑 top을 0px로 주었습니다
그러게 추가한 레이어안에 서브메뉴레이어를 넣었답니다.
그리고나면 나모에서 편집할때하고 미리보기할때 서브메뉴레이어위치가 서로 다르게 나오는데
미리보기위치에 맞게 편집에서 위치를 이동시켜주면 문제 끝!!
편집에선 서브메뉴레이어 위치가 이상하게 나오겠지만. 웹상에선 미리보기때처럼 해상도가
변해도 항상 그 위치에 나오거든요 ^^;;
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] | Eccen | 2004.12.15 | 48031 |
1175 |
브러시기능을 이용한 바닷가(3)
[14]
![]() | 여어자 | 2003.05.06 | 19489 |
1174 |
브러시기능을 이용한 바닷가(2)
[6]
![]() | 여어자 | 2003.05.06 | 6837 |
1173 |
브러시기능을 이용한 바닷가(1)
[4]
![]() | 여어자 | 2003.05.06 | 12840 |
1172 |
마스크를 이용한 로고만들기
[3]
![]() | 여어자 | 2003.05.06 | 14499 |
1171 |
패턴을 이용한 꽃이있는 창가
[7]
![]() | 여어자 | 2003.05.06 | 11095 |
1170 |
예쁜 물방울 만들기
[6]
![]() | 여어자 | 2003.05.06 | 21979 |
1169 |
점차적으로 기울어지는 문자
[2]
![]() | 여어자 | 2003.05.06 | 10184 |
1168 |
물흐르듯 흐르는 문자
[6]
![]() | 여어자 | 2003.05.06 | 11706 |
1167 |
네온싸인 만들기
[1]
![]() | 여어자 | 2003.05.06 | 12208 |
1166 |
CD 모양 만들기
[1]
![]() | 여어자 | 2003.05.06 | 12095 |
1165 |
칼로 자른듯한 그림자 텍스트
[1]
![]() | 여어자 | 2003.05.06 | 10600 |
1164 |
플래시로 아이콘 만들기
[20]
![]() | zini | 2003.05.06 | 26898 |
1163 |
레이어를 문자로 만들기 2부작
[6]
![]() | ZipShin | 2003.05.06 | 8235 |
1162 | 레이어를 문자로 만들기 1부작 [30] | ZipShin | 2003.05.06 | 6328 |
1161 |
평화로운 물고기의 하루
[11]
![]() | 여어자 | 2003.05.06 | 13416 |
1160 |
브러시로 등록하여 스탠코드 만들기
[1]
![]() | 여어자 | 2003.05.06 | 6910 |
1159 |
나무질감무늬로 액자 만들기
![]() | 여어자 | 2003.05.06 | 9572 |
1158 |
나무 질감 만들기
[2]
![]() | 여어자 | 2003.05.06 | 6300 |
1157 | 필터를 이용한 출처 간단하게 지우기. [6] | SOO | 2003.05.06 | 6295 |
1156 |
모자이크 응용한 글씨 꾸미기
[3]
![]() | 사라 | 2003.05.05 | 9900 |