앞 페이지의 "menu1"의 예제는 단순히 페이지의 층을 이루고 있는 레이어들을 연결해 놓은 것입니다. 이것만 사용한다면 단조롭고 많은 층이 열렸다면 닫는데도 일일이 닫아야 하는 문제가 있습니다. 이 층으로 연결해 놓은 레이어들을 링크나 다른 효과로 다루면 더 재미있습니다.

이 페이지는 처음부터 메뉴를 보이지 않고 페이지의 링크로 메뉴를 엽니다. 링크로 사용할 구문은

<script>linkPrint("L1", "menu", "<img src='./pos.gif' border=0>")</script>

입니다. 한줄만 넣어주면 됩니다. 첫번째 인자는 링크를 넣을 레이어 이름입니다. 아무거나 지정해 주면 됩니다. 두번째는 링크를 누르면 보여줄 레이어의 이름, 세번째는 링크의 내용입니다. 많은 메뉴가 열렸을 때, 일일이 닫지않고 페이지 빈곳 아무데나 누르면 열려있는 모든 메뉴를 닫기 위해서 레이어 안에 링크를 만듭니다. 이 링크는 페이지에서 출력된 곳에 위치합니다. relative로 상대적인 위치입니다. 페이지 아무데나 넣어주면 그곳에 링크가 위치합니다.

링크 안에 넣어줄 내용은 글자나 이미지를 넣어줄 수 있습니다.

linkPrint()는 링크로 페이지의 메뉴로 사용할 레이어를 링크 근처로 이동을 시키고 나타나게 합니다. 그러므로, 먼저 메뉴 레이어가 페이지에 있어야 합니다. 그래서, 사용할 메뉴를 출력하는 setMenu()보다 페이지 순서상 뒤에 있어야 합니다. 위의 조그만 이미지를 누르면 menu 레이어를 엽니다. 그리고 페이지 아무데나 누르면 모든 열려있는 창을 닫습니다. 처음 사용하는 사용자도 브라우저의 메뉴 구조가 이렇기 때문에 자연스럽게 이런 동작을 취할 것입니다.

이것을 하기 위해서 앞의 menu1.htm 페이지의 소스에서 몇개의 함수를 추가했습니다. linkSonHide(), linkSonPos(), linkPrint() 3개 입니다. 페이지에서의 링크의 위치에 상관없이 링크 근처에서 이동막대를 사용할 필요가 없게하기 위해서 한 페이지 안에서 메뉴를 엽니다. 한 페이지크기보다 크지 않는 메뉴를 말입니다.

링크를 사용하기 위해 setMenu() 함수를 페이지의 나머지 본문의 내용보다 앞에 두면 나머지 페이지의 내용의 body에 지정한 font-size, line-height가 안 듣습니다. 이 때는 각 택에 두 개의 style을 지정하면 됩니다. 이 페이지도 그렇게 작성했습니다.

<P style="font-size:10pt; line-height:14pt;">내용..</P>

으로 하면 됩니다. ie4에서 많은 메뉴를 만들면 페이지 출력 속도가 nn4에 비교하여 떨어집니다. 일반적인 사양의 PC에서 두 브라우저에서 모두 확인을 해보아야 합니다. 보통의 양은 두 브라우저 모두 속도가 비슷합니다.