메뉴 건너뛰기

Chsoo's HomePage공부방

HomStyle : Layer를 이용한 메뉴(chsoo.pe.kr 사용됨.)

2006.03.21 16:02 조회 수 4612 추천 56 / 0
참고 사이트  

제 홈페이지에 적용하고 있는 메뉴입니다.
특별한 것은 아니지만 필요하신 분이 계실거 같아서 올립니다.

사용중 문의 사항은 질답(Q&A) 이나 덧글을 이용해주시길 바랍니다.

2가지 버전으로 올립니다.

첫 번째는 아래의 그림과 같이 DB연동없이 한 것입니다.
메뉴는 Layer기능과 롤오버(RollOver)기능을 이용하여 만들었습니다.

첨부된 압축파일에서 menu_org.php파일을 알맞게 수정하여 사용하시면 됩니다.

1. 1 ~ 50 Line까지는 RollOver에 사용하는 자바가 있습니다.(되도록 수정하지 마세요.)

2. 74 Line - 큰메뉴 처리 부분(수정필요)
- 이분은 알맞게 수정처리 하셔야 합니다.

<a href='/home.php' OnMouseOut="restore_img('menu1', 'document')" OnMouseOver="clickshow(0,6); change_img('menu1', 'document', '/img/mnu_1o.gif', true)"><img src="/img/mnu_1.gif" width="100" height="28" border="0" name="menu1">

중간에 clickshow(0,6)같은 경우 큰메뉴가 6개가 있다라는 뜻입니다. 마우스를 이미지에 올리면은 아래에 나오는 작은메뉴 지정처리합니다.
가장 끝에있는 것은 clickshow(5,6)이 됩니다.
- RollOver는 파란색의 글씨로 처리가 됩니다. OnMouseOut="restore_img('menu1', 'document')" 바뀌게 되는 그림의 이름지정이라고 생각하시면 될거 같네요.
뒤에 나오는 change_img가 바뀌게 되는 그림이미지로 생각하시면 됩니다.
결과적으로 a테그에서는 연결될 주소이며, OnMouseOver는 큰메뉴의 수가 되며, change_img에서는 바뀌게 되는 그림이미지를 넣어주시면 됩니다.

3. 84 ~ 113 Line - 작은메뉴 처리하는 부분
- 여기서는 Span ID 부분은 수정하지 말아주시기 바랍니다.
수정하여야 하는 부분은 의 갯수와 2번에서 clickshow의 뒷자리 숫자가 같으면 됩니다.
84,89,94,100,107,111 Line에 있는 padding-left:100 이렇게 써있는 부분은 작은 메뉴가 왼쪽에서 떨어지는 위치를 말하는 것입니다.
수정하면서 알맞는 위치를 찾아 주시면 될거 같네요.

※ 이외는 굳이 수정안햐서도 쓰실수 있을거 같네요.
첨부파일에는 혹시나 해서 제가 작업한 PSD파일(큰제목RollOver할 수 있는이미지)을 같이 첨부하였습니다.
이 글을 보시는 분들께 조금이나마 도움이 되었으면 합니다.

이 다음은 제로보드와 연동해서 보여주는 Layer메뉴를 올리겠습니다.

번호 제목 글쓴이 날짜 조회 수
공지 이용하시면서.... 김창수 2001.06.15 8613
29 ZBXE(제로보드)에서 디카정보 표현하기 file 김창수 2008.07.24 7635
28 제로보드XE Ver 1.0.0 서버스 돌입 file 김창수 2008.03.18 9958
27 제로보드5(zb5) 개발 진행(현재 Beta 5.0.0.3) [1] file 김창수 2006.07.29 6625
26 디카게시판에 EXIF정보 표현하기 file 김창수 2006.04.20 6105
25 Layer를 이용한 메뉴 DB연동 (chsoo.pe.kr 사용됨.) [1] file 김창수 2006.03.21 6301
» Layer를 이용한 메뉴(chsoo.pe.kr 사용됨.) [1] file 김창수 2006.03.21 4612
23 Swish MAX 각 효과 정리 Flash file 김창수 2006.01.25 5287
22 HTML문서에 주석 달기 김창수 2005.09.19 17878
21 JAVASCRIPT 이벤트 핸들러 정리 김창수 2005.07.11 10050
20 Header에 쓰이는 Meta Tag에 관한 설명 김창수 2005.03.29 7338
19 기초적으로 알아두어야 할 HTML Tag정리 [2] 김창수 2004.12.22 6821
18 홈피 만들기(chsoo.pe.kr)제 홈피 과정입니다. 김창수 2004.07.18 7409
17 [PHP] 파일입출력 문법 (간단히) [1] 김창수 2004.07.08 9992
16 [PHP] 간단한 PHP 문법 [2] [1] 김창수 2004.06.23 7876
15 [HTML]색상 코드표 김창수 2004.06.19 5093
14 [PHP]Database, MySQL란? 김창수 2004.06.15 6793
13 [PHP]PHP에 대한 소개 김창수 2004.06.08 4815
12 [PHP]플래시로 보는 노프레임 홈 만들기! 강추(퍼옴) file 김창수 2004.05.16 6093
11 Tip 홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] 김창수 2004.05.12 4794
10 Tip 강좌 홈페이지(게시판)에 음악,동영상 바로보여주기 [3] 김창수 2004.03.06 5205
9 Tip 강좌 글자 흘러가는 Marquee Tag 이용하기 김창수 2003.12.06 4821
8 날짜마다 다른 페이지로 만들기 관리자 2003.07.31 4444
7 여섯번째 - a tag 익히기 관리자 2000.02.26 4226
위로