링크로 메뉴 사용하기
여러 링크로 메뉴 사용하기
DHTML의 가장 강력한 효과라고 할 수 있는 것에는 사용자 인터페이스를 들 수 있습니다.
단순한 웹 페이지를 넘어 일반적인 응용프로그램과 비슷한 성능을 낼 수 있습니다.
많은 하위 페이지를 가지고 있는 사이트에서 링크들을 다 페이지에 적는다면 사이트의 구조를 파악하기가
어려운데, 위의 menu에서 보는것처럼 직관적인 구조로 쉽게 페이지의 구성을 알수있게 합니다.
브라우저의 menu구조와 같아서 처음 보는 사용자도 쉽게 사용할 수 있습니다. 이 페이지를 ie4와
nn4로 보면 조금 다릅니다. 작동은 같은 방식이지만 두 브라우저가 가지고 있는 한계가 있기 때문에
이런 식으로 만들었습니다.
ie4로 보면 바탕색과 함께 글자의 색도 바꿉니다. 이런 기능을 nn4에서 구현 할려면 레이어.document.write(),
레이어.document.close() 로도 가능 하지만, 성능이 많이 떨어집니다. 그리고 ie4의 경우에는 css 레이어에게 이벤트를
다룰때, 이벤트의 사용이 nn4보다 제한적이기 때문에 위의 하부 페이지를 가리키는 화살표 표시를 이미지로
하기가 까다롭습니다. 이미지를 넣으면 속도뿐 만이 아니고 전체적인 동작이 불안하게 됩니다. 그래서, 가장
안정된 동작으로 두 브라우저에서 작동하게 위의 방식으로 만들었습니다.
menu1
위의 menu1은 가장 기본적인 것만 넣은것 입니다. 실행하고 소스를 보세요.
필요한 것이 몇가지 있는데, 먼저 아래의 외부변수들로 각 색깔을 지정합니다.
var nnBackColor = "silver" // nn4 기본 바탕색
var ieBackColor = "#CECEBD" // ie4 기본 바탕색
var nnOnColor = "yellow" // 마우스가 갔을때 바뀔 바탕색
var ieOnColor = "navy" // 마우스가 갔을때 바뀔 바탕색
var outBorderColor = "gray" // 각 레이어를 가지고 있는 레이어의 block 테두리 색
var inBoardColor = "#FFFFFF" // 내부 레이어의 border 색
var nnBaseFontColor = "black" // 각 내용의 처음 글자색
var ieBaseFontColor = "black" // 각 내용의 처음 글자색
var fontChangeColor = "white" // ie4에서만 사용함. 마우스를 올리면 글자의 색을 바꾼다.
var fontChangeColor = "black" // ie4에서만 사용함. 각 메뉴의 처음 글자색
위의 외부변수들은 css layer의 border의 색과 바탕색입니다.
var fontChangeColor, var fontChangeColor 두개의 변수는 ie4에서 마우스를 각 메뉴위로 올렸을 때 바뀔
글자의 색깔입니다. 이것은 nn4에서는 사용되지 않습니다. 위의 변수들에 색상을
여러번 바꾸어서 지정하면 원하는 효과를 얻을 수 있습니다.
그리고 각 메뉴를 페이지에 출력하는 setMenu() 함수입니다.
< body onLoad="init()">
<script language="JavaScript">
setMenu("homeMenu", 300,
"inc", "", "추가한 페이지", "../home/include.htm",
"ser", "", "페이지 검색", "../home/onjsdb.htm",
"gate", "", "대문 모음", "../home/homeGate.htm"
);
위의 구조로 inc, ser, gate 레이어가 homeMenu 레이어의 안에 있습니다. 즉, 여러개의 메뉴를 한 레이어가
가지고 있습니다.
첫번째 인자 : 여러 메뉴 레이어를 가지고 있는 레이어 이름. (homeMenu)
두번째 인자 : 보이는 크기를 지정합니다. 글자가 많으면 크기를 알맞게 늘이면 됩니다. 줄넘김은 안됩니다.
한 줄로만 구성해야 합니다.
세번째 인자 : 첫번째 메뉴 레이어 이름.
네번째 인자 : 첫번재 메뉴에 연결될 다른 레이어. 위의 homeMenu같이 여러 메뉴 레이어를 가지고 있는 레이어입니다. 없으면 공백("")을 입력합니다.
다섯번째 인자 : 메뉴로 사용할 글자.("추가한 페이지")
여섯번째 인자 : 페이지 URL ("../home/include.htm"). 마우스를 누르면 지정한 주소로 갑니다.
일곱번째 인자 : 두번째 메뉴 레이어 이름.(ser)
:
:
식으로 메뉴로 사용할 갯수에 맞게 지정하면 됩니다.
맨위의 메뉴에서 처럼 "DHTML" 이란 글자를 가지고 있는 메뉴에 마우스를 가져가면 dhtmlMenu 레이어가
나오는데, 이 레이어의 하위 레이어 중에 "예제모음" 글자의 example 레이어는 하위메뉴를 가지고 있습니다.
setMenu("dhtmlMenu", 200,
"css", "", "CSS 사용법", "../dhtml/css/css.htm",
"sty", "", "Style 도안", "../dhtml/design/peDesign.htm",
"eve", "", "Version 4 Event", "../dhtml/event/js12Event.htm",
"eveMethod", "", "Event Method", "../dhtml/event/eventMethod.htm",
"example", "exStore", "예제모음", "113,28", "../../../dhtml/ex.htm",
"content", "", "용어집", "../dhtml/content.htm"
);
</script>
setMenu("exStore", 250,
"exStore10", "", "안내창 위치 시키기", "../dhtml/examples/winPos.htm",
"exStore11", "", "레이어 이동하기", "../dhtml/examples/animation/moveLayer.htm",
"exStore16", "", "", ""
);
메뉴에 마우스가 갔을 때, 나올 레이어를 지정을 합니다. 이렇게 연결된 페이지의 구조로 setMenu() 함수를 구성하면 됩니다.
이름은 모두 다른 이름을 사용해야 합니다. 같은 이름은 오작동합니다. 연결한 메뉴나 글자, URL을 지정하지 않을려면
모두 공백("")을 입력해야 합니다. 비워두면 안됩니다.
"example", "exStore", "예제모음", "113,28", "../../../dhtml/ex.htm",
위의 줄에 보면 인자가 5개입니다. 하부 메뉴를 가지고 있는 인자를 설정할 때는 5개입니다. 하부메뉴가
없다면 4개이고요. 위의 빨간색의 숫자가 하부메뉴를 가지고 있는 메뉴 레이어에서 사용합니다.
5개의 메뉴는 첫번째는 각 메뉴 레이어의 이름, 두 번재는 이 메뉴 레이어에 연결되어 있는
다른 여러 메뉴를 가지고 있는 레이어 이름, 세번째는 메뉴에 넣을 글자, 네번재는 화살표를 메뉴의 글자와
떨어지게 하는 폭입니다. 앞에것이 nn4용 폭이고 뒤에것이 ie4용 폭입니다. 적은 숫자를 입력하고 나서 조금씩
숫자를 크게하면 화살표가 메뉴상자의 가장 오른쪽에 위치합니다.
다섯번재는 주소입니다.
하위 메뉴를 가지고 있다는 표시를 하기 위해서 화살표를 사용해야 하는데 ie4와 nn4를 구분하여 표시하기
위해서 하위 연결 메뉴가 있는 인자는 없는 인자보다 1개가 더 많습니다.
즉, "exStore" 처럼 하위 메뉴가 있으면 하위가 있다는 표시를 하기 위해서
화살표를 지정합니다. 이 때, ie4나 nn4에서 다른 방식으로 사용하기 위해서 두개의 인자로
각 형식을 지정합니다. 하부메뉴가 없을 때는 한가지만 넣으면 됩니다.
nn4에서는 화살표로 사용한 이미지와의 간격을 두기 위해서 <spacer> 를 사용했고 ie4에서는 특수문자 와
를 사용하여 글자와 특수문자 "▶"와의 거리를 벌립니다. 레이어의 크기에 맞게 조절을 하면 됩니다.
ie4에서 하나의 는 폭이 5px입니다. font-family:굴림;, font-size:13px; 를 지정해서 그렇습니다.
nn4의 spacer는 1px씩 값을 증가시킬 수 있습니다.
그리고 꼭 인자들의 용도에 맞는 순서를 지켜야 합니다. 기본적으로 모든 인자는 지정을 해야하고
지정하지 않을려면 공백을 입력하고 인자들의 순서를 지켜야 합니다. 다르면 오작동합니다. 또 한가지는
setMenu()함수의 마지막 닫는 중괄호( ) ) 앞에는 인자들을 구분하는 쉼표가 없습니다. 이 두가지를
주의하세요.
그리고 마지막으로 body 택의 onLoad로 이벤트를 지정하고 가장 위의 메뉴 레이어를 보이게 합니다.
function init() {
setMenuEvent();
if(n4) document.menu.visibility = "visible"
else document.all.menu.style.visibility = "visible"
}
</script>
</head>
<body onLoad="init()">
이렇게 메뉴를 사용하는 방법을 지정합니다. setMenu() 함수를 페이지에서 지정하는 순서는 <body> 택
다음에만 넣어주면 상관이 없지만, 각 연결 레이어의 이름은 정확해야 합니다. 위의 링크 menu1을 참고하세요.
이 방식대로 setMenu()를 사용하여 원하는 만큼의 메뉴를 여러 층으로 사용할 수 있습니다.
이 페이지는 3 층으로 만들었지만 그 이상도 가능합니다.
다만, 너무 많은 메뉴를 사용하면 문서의 양이 커지고 처음 출력속도도 떨어집니다.
TOP