두번째 올리는 글입니다.
첫번째 글은 로그인이 풀려서 날라가 버렸네요;;

미리보기 http://zlgunmain.zetyx.net/

원본 미리보기 : http://ww1.introcom.net/~ehanuly/menu/Sample/20020427/index.html

수정하신분 사이트 : http://1021004.net/

원작자사이트 : http://www.milonic.com/


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 파일 내에 주석이 달려 있으니 그것을 참고 하셔도 되지만
혹시나 몰라 이렇게 설명글을 추가합니다.
그리고 원래 웹스터디쪽에 올릴려고 했는데 강좌들이 있어서...
그럼 모두 즐거운 하루되시길...

-추신-
원작자 사이트로 가시면 더 많은 메뉴들이 있습니다.
형식을 비슷할겁니다...
            



* DeX™님에 의해서 게시물 이동되었습니다 (2006-07-07 15:18)