미리보기 : http://ww1.introcom.net/~ehanuly/menu/Sample/20020427/index.html
수정하신분 사이트 : http://1021004.net/
원작자사이트 : http://www.milonic.com/
DhtmlMenu.zip
dhtml로 만들어진 메뉴입니다. 소스를 보시면 알겠지만
서브메뉴나 메인메뉴에 텍스트옆이나 오른쪽에 조그만 그림을 넣을수 있습니다.
딱 보면 아시겠지만 그래도 모르니 설명하겠습니다.
=내 용 물=
arrow.gif 등 gif파일 8개
menu_array.js
mmenu.js
index.html
여기서 고쳐야할것은 menu_array.js입니다.
1. 메뉴 이름 변경및 그림넣기, 메뉴 추가하기
,"Home 으로","http://www.jaba1009.pe.kr",,"홈페이지로 가기",1 // "제목", "URL", "Alternate URL", "상태바에 보여질 내용", "구분자"
,"두번째 메뉴 ","show-menu=memu2",,"",1
,"세번째 메뉴 ","show-menu=memu3",,"",1
,"네번째 메뉴 ","show-menu=memu4",,"",1
,"다섯번째 메뉴 ","show-menu=memu5",,"",1
,"여섯번째 메뉴 ","show-menu=memu6",,"",1
])
위의 여섯번째 메뉴 밑에
,"메뉴이름 ","show-menu=memu7",,"",1
,"메뉴이름 ","show-menu=memu8",,"",1
,"메뉴이름 ","show-menu=memu9",,"",1
이런식으로 추가하시면 됩니다. 은 공백입니다.
메뉴에 작은 그림을 넣고 싶으시면
,"<img src=그림주소 border=0>메뉴이름 ","show-menu=memu7",,"",1
또는
메뉴이름 ,"<img src=그림주소 border=0>","show-menu=memu7",,"",1
으로 해주시며 됩니다.
2. 서브메뉴 추가하기
간단합니다.
메인메뉴-서브메뉴-부메뉴-부메뉴-부메뉴
메인메뉴-서브메뉴-부메뉴-부메뉴-부메뉴
ㄴ부메뉴-부메뉴-부메뉴
ㄴ부메뉴-부메뉴
이런식으로도 가능합니다.
addmenu(menu=["memu2-1", // 메뉴의 첫번째 부메뉴
,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
,"KBS","http://www.kbs.co.kr",,,0
,"엠비씨 페이지","http://www.imbc.com",,,0
,"ABC News","http://www.abcnews.com",,,0
,"지역방송","show-menu=memu2-1-1",,,0
,"BBC News","http://news.bbc.co.uk",,,0
])
addmenu(menu=["memu2-1-1", // 두번째 메뉴의 첫번째 부메뉴의 첫번째 부메뉴
,,120,1,"",style1,,"left",effect,,,,,,,,,,,,
,"i-TV","http://www.itv.co.kr.com",,,
,"TBC","http://www.tbc.co.kr",,,
])
이런식인데 중요한점은 부메뉴를 줄곳에 "show-menu=memu2-1-1"이런식으로
메뉴 이름을 줘야합니다. 예를 들어
"show-menu=memu2-1"
"show-menu=memu2-1-1"
"show-menu=memu2-1-2"
이라면
메뉴-서브메뉴(memu2)
ㄴ부메뉴(memu2-1)
ㄴ 부메뉴 (memu2-1-1)
ㄴ 부메뉴 (memu2-1-2)
이런식이죠 제일 간단한방법은 부메뉴 하나씩 만들고
확인하는겁니다...
3. 원하는 위치에 메뉴 넣기
저같은 경우는 이것때문에 고생을 했는데요 홈리스님의 도움으로 알게 되었습니다.
<SCRIPT language=JavaScript src="http://주소/menu_array.js" type=text/javascript>
</SCRIPT>
<SCRIPT language=JavaScript src="http://주소/mmenu.js" type=text/javascript>
</SCRIPT>
이것을 메인페이지 맨 상단에 넣습니다. <? 위에 말이죠
그럼 나타나게 되는데 위치를 확인하시고
menu_array.js를 다시 수정해줍니다.
76번 줄에 있는
, // 메뉴의 위치 설정 - [center;left;right;middle;top;bottom] 혹은 [center:middle] 형식
이것을 자신의 원하는 위치로 정렬 시켜주 줄수 있습니다.
예를들어
"bottom", 이런식으로 말이죠 주석이 달려있으니 편하실겁니다. ""<---이것을 꼭 넣으셔야합니다. 그냥 bottom이라고 넣으시면
메뉴자체가 나타나지 않습니다.
아니면 현제 위치를 확인하시고
72, 73번 줄에 있는
0, // 메뉴 레이어의 위쪽여백
0, // 메뉴 레이어의 왼쪽여백
을 100으로 주고 시작해서 위치가 어디에 있는지 보시고 숫자를 줄이거나 늘려서 원하는
위치에 놓으세요
해드, 풋나눴다고 해도 해드 위에
<SCRIPT language=JavaScript src="http://주소/menu_array.js" type=text/javascript>
</SCRIPT>
<SCRIPT language=JavaScript src="http://주소/mmenu.js" type=text/javascript>
</SCRIPT>
이런식으로 있으면 적용됩니다.
해드의 위쪽 공백이 메인페이지보다 적고 작으면 메뉴가 위로 가거나 아래로 갑니다.
_______________________________________________________________________________________
menu_array.js 파일 내에 주석이 달려 있으니 그것을 참고 하셔도 되지만
혹시나 몰라 이렇게 설명글을 추가합니다.
그리고 원래 웹스터디쪽에 올릴려고 했는데 강좌들이 있어서...
그럼 모두 즐거운 하루되시길...
덧. 원작자 사이트로 가시면 더 많은 메뉴들이 있습니다. 형식은 비슷할겁니다...
이글은 팁코리아에 제가 올린글을 다시 제 블로그에 옮겼음을 알려드립니다.
수정하신분 사이트 : http://1021004.net/
원작자사이트 : http://www.milonic.com/
DhtmlMenu.zip다운로드
dhtml로 만들어진 메뉴입니다. 소스를 보시면 알겠지만
서브메뉴나 메인메뉴에 텍스트옆이나 오른쪽에 조그만 그림을 넣을수 있습니다.
딱 보면 아시겠지만 그래도 모르니 설명하겠습니다.
=내 용 물=
arrow.gif 등 gif파일 8개
menu_array.js
mmenu.js
index.html
여기서 고쳐야할것은 menu_array.js입니다.
1. 메뉴 이름 변경및 그림넣기, 메뉴 추가하기
,"Home 으로","http://www.jaba1009.pe.kr",,"홈페이지로 가기",1 // "제목", "URL", "Alternate URL", "상태바에 보여질 내용", "구분자"
,"두번째 메뉴 ","show-menu=memu2",,"",1
,"세번째 메뉴 ","show-menu=memu3",,"",1
,"네번째 메뉴 ","show-menu=memu4",,"",1
,"다섯번째 메뉴 ","show-menu=memu5",,"",1
,"여섯번째 메뉴 ","show-menu=memu6",,"",1
])
위의 여섯번째 메뉴 밑에
,"메뉴이름 ","show-menu=memu7",,"",1
,"메뉴이름 ","show-menu=memu8",,"",1
,"메뉴이름 ","show-menu=memu9",,"",1
이런식으로 추가하시면 됩니다. 은 공백입니다.
메뉴에 작은 그림을 넣고 싶으시면
,"<img src=그림주소 border=0>메뉴이름 ","show-menu=memu7",,"",1
또는
메뉴이름 ,"<img src=그림주소 border=0>","show-menu=memu7",,"",1
으로 해주시며 됩니다.
2. 서브메뉴 추가하기
간단합니다.
메인메뉴-서브메뉴-부메뉴-부메뉴-부메뉴
메인메뉴-서브메뉴-부메뉴-부메뉴-부메뉴
ㄴ부메뉴-부메뉴-부메뉴
ㄴ부메뉴-부메뉴
이런식으로도 가능합니다.
addmenu(menu=["memu2-1", // 메뉴의 첫번째 부메뉴
,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
,"KBS","http://www.kbs.co.kr",,,0
,"엠비씨 페이지","http://www.imbc.com",,,0
,"ABC News","http://www.abcnews.com",,,0
,"지역방송","show-menu=memu2-1-1",,,0
,"BBC News","http://news.bbc.co.uk",,,0
])
addmenu(menu=["memu2-1-1", // 두번째 메뉴의 첫번째 부메뉴의 첫번째 부메뉴
,,120,1,"",style1,,"left",effect,,,,,,,,,,,,
,"i-TV","http://www.itv.co.kr.com",,,
,"TBC","http://www.tbc.co.kr",,,
])
이런식인데 중요한점은 부메뉴를 줄곳에 "show-menu=memu2-1-1"이런식으로
메뉴 이름을 줘야합니다. 예를 들어
"show-menu=memu2-1"
"show-menu=memu2-1-1"
"show-menu=memu2-1-2"
이라면
메뉴-서브메뉴(memu2)
ㄴ부메뉴(memu2-1)
ㄴ 부메뉴 (memu2-1-1)
ㄴ 부메뉴 (memu2-1-2)
이런식이죠 제일 간단한방법은 부메뉴 하나씩 만들고
확인하는겁니다...
3. 원하는 위치에 메뉴 넣기
저같은 경우는 이것때문에 고생을 했는데요 홈리스님의 도움으로 알게 되었습니다.
<SCRIPT language=JavaScript src="http://주소/menu_array.js" type=text/javascript>
</SCRIPT>
<SCRIPT language=JavaScript src="http://주소/mmenu.js" type=text/javascript>
</SCRIPT>
이것을 메인페이지 맨 상단에 넣습니다. <? 위에 말이죠
그럼 나타나게 되는데 위치를 확인하시고
menu_array.js를 다시 수정해줍니다.
76번 줄에 있는
, // 메뉴의 위치 설정 - [center;left;right;middle;top;bottom] 혹은 [center:middle] 형식
이것을 자신의 원하는 위치로 정렬 시켜주 줄수 있습니다.
예를들어
"bottom", 이런식으로 말이죠 주석이 달려있으니 편하실겁니다. ""<---이것을 꼭 넣으셔야합니다. 그냥 bottom이라고 넣으시면
메뉴자체가 나타나지 않습니다.
아니면 현제 위치를 확인하시고
72, 73번 줄에 있는
0, // 메뉴 레이어의 위쪽여백
0, // 메뉴 레이어의 왼쪽여백
을 100으로 주고 시작해서 위치가 어디에 있는지 보시고 숫자를 줄이거나 늘려서 원하는
위치에 놓으세요
해드, 풋나눴다고 해도 해드 위에
<SCRIPT language=JavaScript src="http://주소/menu_array.js" type=text/javascript>
</SCRIPT>
<SCRIPT language=JavaScript src="http://주소/mmenu.js" type=text/javascript>
</SCRIPT>
이런식으로 있으면 적용됩니다.
해드의 위쪽 공백이 메인페이지보다 적고 작으면 메뉴가 위로 가거나 아래로 갑니다.
_______________________________________________________________________________________
menu_array.js 파일 내에 주석이 달려 있으니 그것을 참고 하셔도 되지만
혹시나 몰라 이렇게 설명글을 추가합니다.
그리고 원래 웹스터디쪽에 올릴려고 했는데 강좌들이 있어서...
그럼 모두 즐거운 하루되시길...
덧. 원작자 사이트로 가시면 더 많은 메뉴들이 있습니다. 형식은 비슷할겁니다...
이글은 팁코리아에 제가 올린글을 다시 제 블로그에 옮겼음을 알려드립니다.
"web_tip" 카테고리의 다른 글
- 활용도 높은 Menu 소스 (투명, 필터, 그림넣기가능) (댓글 0개 / 트랙백 0개) 2006/12/04
- 썸네일 링크 (댓글 6개 / 트랙백 3개) 2006/11/11
- 사이드바,레이어, 테이블등등 - Show/Hide (댓글 0개 / 트랙백 0개) 2006/12/02
- 익스에서 할수있는 재미있는 놀이.. (댓글 0개 / 트랙백 0개) 2007/02/22
- [행복한 고니님의 팁] 제목을 이미지로~ (댓글 0개 / 트랙백 0개) 2007/08/30
Leave your greetings here.