추가 예제 1 (990420)
추가 예제 2 (990508)
추가 예제 3 (990817)
탐색기 매뉴 Click Mode (2000/02/17)

#D1 { position:absolute; width:300; top:100px; left:10px; }
#D2 { position:absolute; width:300; top:120px; left:10px; }
#D3 { position:absolute; width:300; top:140px; left:10px; }
#D4 { position:absolute; width:300; top:160px; left:10px; }

#D11 { position:absolute; width:300; top:0px; left:10px; visibility:hidden; 
border:solid 1px red; background-color:white; layer-background-color:white;}

#D22 { position:absolute; width:300; top:0px; left:10px; visibility:hidden; 
border:solid 1px red;background-color:aqua; layer-background-color:aqua;}

#D33 { position:absolute; width:300px; left:10px; top:0px; visibility:hidden; 
border:solid 1px red; background-color:yellow; layer-background-color:yellow;}

#D44 { position:absolute; width:300; top:0px; left:10px; visibility:hidden; 
border:solid 1px red; background-color:silver; layer-background-color:silver;}

여기서 한가지 중요한 것은 각 레이어의 이름입니다. 이 예제를 만들면서 레이어의 이름으로 제어하는데 비슷한 이름을 사용하는 것이 가장 간단했습니다. 즉, 하위 링크들을 가지고 있는 레이어의 이름은 상위 링크를 가지고 있는 레이어 이름에서 뒤의 숫자를 하나더 붙여주는 것입니다.

예를들면 상위링크 레이어가 이름이 "XX1" 이라면 다음 상위링크 레이어는 "XX2"로 지정을 하고 그다음은 "XX3"으로 지정을 해야합니다. 다루기 편하게 하기 위해서 이렇게 만들었습니다. 그리고 각 하위링크를 가지고 있는 레이어의 이름은 상위 링크 레이어의 이름에서 끝 숫자를 하나 더 붙여줍니다. 예를들면, 상위링크 레이어가 "abc2" 라면 "abc22"로 이름을 지어주어야 합니다.

<div id=D1><a href="#" onClick="actionMenu(1); return false">탐색기 메뉴 1</a></div>
<div id=D11>
<ul>
<li><span><a href="...">탐색기 메뉴 1 - 하위메뉴 1</a></span>
<li><span><a href="...">탐색기 메뉴 1 - 하위메뉴 2</a></span>
<li><span><a href="...">탐색기 메뉴 1 - 하위메뉴 3</a></span>
</ul>
</div>

<div id=D2><a href="#" onClick="actionMenu(2); return false">탐색기 메뉴 2</a></div>
<div id=D22>
<ul>
<li><span><a href="...">탐색기 메뉴 2 - 하위메뉴 1</a></span>
<li><span><a href="...">탐색기 메뉴 2 - 하위메뉴 2</a></span>
<li><span><a href="...">탐색기 메뉴 2 - 하위메뉴 3</a></span>
</ul>
</div>

<div id=D3><a href="#" onClick="actionMenu(3); return false">탐색기 메뉴 3</a></div>
<div id=D33>
<ul>
<li><span><a href="...">탐색기 메뉴 3 - 하위메뉴 1</a></span>
<li><span><a href="...">탐색기 메뉴 3 - 하위메뉴 2</a></span>
<li><span><a href="...">탐색기 메뉴 3 - 하위메뉴 3</a></span>
</ul>
</div>

<div id=D4><a href="#" onClick="actionMenu(4); return false">탐색기 메뉴 4</a></div>
<div id=D44>
<ul>
<li><span><a href="...">탐색기 메뉴 4 - 하위메뉴 1</a></span>
<li><span><a href="...">탐색기 메뉴 4 - 하위메뉴 2</a></span>
<li><span><a href="...">탐색기 메뉴 4 - 하위메뉴 3</a></span>
</ul>
</div>

[T O P]