복잡한 여러개의 메뉴로 구성된 홈페이지를 운영하시는 분들에게는 아주 유용합니다.
( 드림위버에서 추출할 수 있는 소스입니다. 드림위버가 있는 분들은 드림위버
강좌 사이트나 드림위버 관련 서적에서 비헤이버 관련부를 읽어보시면 쉽게
만들 수 있습니다. 드림위버가 없는 분들은 메모장 등의 텍스트에디터에서
아래처럼 따라하시면 되구요.)
 |
|
 에
아래 소스를 넣습니다. |
 |
 |
 |
|
<script language="JavaScript"> function MM_showHideLayers() { //v3.0 |
|
 |
|
 |
 |
|
 ,
주메뉴가 들어갈 자리에 아래 소스를 넣습니다. |
|
|
|
|
<table> |
|
|
|
|
| 주메뉴가 들어가는 부분입니다. 여기서는 주메뉴를 세로형태로 만들었지만, 테이블을 수정해주시면 가로로 바꾸실 수도 있겠지요. 'layer1','','hide','layer2','','hide' 는
layer1 을 감춤, layer2를 감춤 (home 위에 마우스가 올라갔을
때) ( 여기서는 레이어가 2개였구요. 레이어를 더 추가해서, 레이어가 3개이고 layer1을 보임, layer2와 layer3을 숨김으로 한다면 'layer1','','hide','layer2','','hide','layer3','','hide' 이렇게 하시면 됩니다. 4개 5개.... 쭈욱 이런 식으로 연결합니다.) |
 |
|
| 의
아무 곳에나 아래소스 (주메뉴 위에 마우스를 올렸을 때 나타나는 부메뉴 레이어)를
넣습니다. |
|
|
|
|
<div id="layer1" style="position:absolute;
left:100; top:85; visibility:hidden; width:100;
z-index:3"> <div id="layer2" style="position:absolute;
left:100; top:108; visibility:hidden; width:100;
z-index:2"> |
|
|
|
|
layer1 과 layer2 는 레이어의 이름입니다. 계속 추가하실 수 있습니다. 물론, 레이어의 이름은 각각 달라야합니다.
left:100; top:85 는 레이어의 좌표값입니다. 왼쪽으로부터
100 (픽셀), 위쪽으로부터 (85 픽셀)
문서 전체, 주메뉴와의 위치 등을 고려해서 적당한 값으로 바꿔주시면 됩니다.
width:100 은 레이어의 폭입니다. 100 (픽셀)
부메뉴 안에 들어가는 내용에 따라 적당한 폭으로 바꿔주시면 됩니다.
visibility:hidden 레이어 보기-숨기기의 기본값을 '숨김'으로.
그래야 문서가 처음 열렸을 때 부메뉴가 감춰지고, 마우스를 주메뉴 위에
올라갔을 때만 보이게 되겠죠.
z-index 는 레이어의 층수입니다. 한 문서 안에 여러개의 레이어가 들어 있고, 레이어가 겹치게 될 수 있습니다. 이 때 레이어의 우선순위를 1층(z-index:1), 2층(z-index:2) ...이런 식으로 정해주는 겁니다. 1층보다는 2층이 위이므로 z-index:2 인 레이어가 z-index:1 인 레이어보다 위에 위치하게 되겠죠.
여기서는 세로로 된 주메뉴에 맞춰 부메뉴레이어를 세로형태로 정렬했지만, 가로형태의 메뉴바를 사용한다면 레이어의 위치(left, top 값)를 가로메뉴바에 맞게 바꾸면 됩니다.
