웹마스터 팁
엔지오식 레이어 메뉴 구성하기 (허접)
2002.03.28 03:51
+++위의 엔지오 홈-커뮤-컨텐-제로-웹스터-등등..의 주메뉴 아래 레이어를 이용한 부메뉴가 나타나는것은 잘들 아시지요..
근데 엔지지가 좌측이 아닌 중앙에 페이지를 만들어 놓았습니다. 그로인해 레이어를 주메뉴 아래 정확히 고정해야 하는문제가 생기더군요..(아직 확실히 해결 본건 아님)
===많은 글들 살펴보고, 시도해보구, 실패하구, 포기하구, 또 해보구,,
허접쟁이가 살기엔 아직 힘든 점이 많더군요.
여러님들께서 엔지오식 레이어 메뉴 구성에 대해 관심을 가지고 있지만, 전 아직까지 명쾌하게 정리되어 있는 걸 보지 못해... 이렇게 허접하게나마 겉모습이 보일수 있도록 해 보았습니다..
-------------------------------
주메뉴가 들어가는 테이블(꼭 아니어두 됨)
<table>
<tr><td>메뉴1</td><td>메뉴2</td><td>메뉴3</td>
</tr>
</table>
바로아래 부메뉴가 들어갈 테이블을 만듭니다.
<table>
<tr>
<td>비워두기</td><td>레이어1</td><td>레이어2</td><td>레이어3</td><td>여분^^</td>
</tr>
</table>
가로 세로 크기는 정하지 마시고
주메뉴 수보다 조금 많게 <td>를 만듭니다. (일단 넓이 width는 넣지 마시고>
각각의 부메뉴 레이어<div>~~</div>를 두번째 <td>부터 넣습니다.
그리고 div의 style에서 그넘의 문제가 되는 left:값을 대신해서
left:expression((document.body.clientWidth-this.style.width)/2;
이 값을 넣습니다.
이게 원래 여기 쓰는게 아닌데, 이래저래 하다보니까... 이넘으로 left값을 대체해 주니까
이상스레 잘되더군요..
그리고 처음 비워둔 <td>의 width값을 임의로 조정하여 첫번째 부메뉴가 해당위치에 가도록 조정합니다.
이런식으로 레이어 들어가 있는 <td>의 넓이를 조정하여시면 됩니다.
가운데 정렬에서 브라우저에 따라 흐트러지는 문제가 없어지고,
테이블안에 들어간 레이어로 인해 부메뉴 크기많큼 TR이 길어지는 문제도 없어졌습니다.
엔지오는 주메뉴와 부메뉴 모두는 이미지로 OnMouseOut/OnMouseOver 이미지 변화와 레이어 보이기/감추기를 하셔야 합니다. 레이어에 마우스가 올라갔을 때도 주메뉴의 on.gif(마우스오버시 이미지)가 나타나야 하니까요..
부메뉴 레이어 기본은 visibility:hidden; 으루 해주시면 되구요..
엔지오는 부메뉴도 이미지를 이용 맵을 만든듯 한데....암턴
주메뉴 이미지와 부메뉴 레이어의 경계가 벗어나면 안됩니다. 붙어 있어야 합니다.
---------------------------------------------------
이상은 제가 혼자 궁여지책으로 엔지오 메뉴를 구성해 본것입니다.
이보다 정석적이고 깔끔한 방법을 아시는 분께서는 가차없이 이곳에 올려주시기 바랍니다.
아....넘 힘드네요 ㅜ.ㅜ 아시는 분은 많은듯한데... 정보구하기가 힘들어서.. ㅜ.ㅜ
근데 엔지지가 좌측이 아닌 중앙에 페이지를 만들어 놓았습니다. 그로인해 레이어를 주메뉴 아래 정확히 고정해야 하는문제가 생기더군요..(아직 확실히 해결 본건 아님)
===많은 글들 살펴보고, 시도해보구, 실패하구, 포기하구, 또 해보구,,
허접쟁이가 살기엔 아직 힘든 점이 많더군요.
여러님들께서 엔지오식 레이어 메뉴 구성에 대해 관심을 가지고 있지만, 전 아직까지 명쾌하게 정리되어 있는 걸 보지 못해... 이렇게 허접하게나마 겉모습이 보일수 있도록 해 보았습니다..
-------------------------------
주메뉴가 들어가는 테이블(꼭 아니어두 됨)
<table>
<tr><td>메뉴1</td><td>메뉴2</td><td>메뉴3</td>
</tr>
</table>
바로아래 부메뉴가 들어갈 테이블을 만듭니다.
<table>
<tr>
<td>비워두기</td><td>레이어1</td><td>레이어2</td><td>레이어3</td><td>여분^^</td>
</tr>
</table>
가로 세로 크기는 정하지 마시고
주메뉴 수보다 조금 많게 <td>를 만듭니다. (일단 넓이 width는 넣지 마시고>
각각의 부메뉴 레이어<div>~~</div>를 두번째 <td>부터 넣습니다.
그리고 div의 style에서 그넘의 문제가 되는 left:값을 대신해서
left:expression((document.body.clientWidth-this.style.width)/2;
이 값을 넣습니다.
이게 원래 여기 쓰는게 아닌데, 이래저래 하다보니까... 이넘으로 left값을 대체해 주니까
이상스레 잘되더군요..
그리고 처음 비워둔 <td>의 width값을 임의로 조정하여 첫번째 부메뉴가 해당위치에 가도록 조정합니다.
이런식으로 레이어 들어가 있는 <td>의 넓이를 조정하여시면 됩니다.
가운데 정렬에서 브라우저에 따라 흐트러지는 문제가 없어지고,
테이블안에 들어간 레이어로 인해 부메뉴 크기많큼 TR이 길어지는 문제도 없어졌습니다.
엔지오는 주메뉴와 부메뉴 모두는 이미지로 OnMouseOut/OnMouseOver 이미지 변화와 레이어 보이기/감추기를 하셔야 합니다. 레이어에 마우스가 올라갔을 때도 주메뉴의 on.gif(마우스오버시 이미지)가 나타나야 하니까요..
부메뉴 레이어 기본은 visibility:hidden; 으루 해주시면 되구요..
엔지오는 부메뉴도 이미지를 이용 맵을 만든듯 한데....암턴
주메뉴 이미지와 부메뉴 레이어의 경계가 벗어나면 안됩니다. 붙어 있어야 합니다.
---------------------------------------------------
이상은 제가 혼자 궁여지책으로 엔지오 메뉴를 구성해 본것입니다.
이보다 정석적이고 깔끔한 방법을 아시는 분께서는 가차없이 이곳에 올려주시기 바랍니다.
아....넘 힘드네요 ㅜ.ㅜ 아시는 분은 많은듯한데... 정보구하기가 힘들어서.. ㅜ.ㅜ
댓글 3
-
Legend
2002.03.28 17:21
expression() 메쏘드는 원래 CSS용 메쏘드에욤.. ^^; -
토끼군
2002.05.27 20:59
저같은 경우 그냥 각 부메뉴 레이어를 모조리 띄워버리고, 그 후에 크기가 바뀌거나 하면 그 위치를 바꿔주는 방법으로 했습니다.
표 안사용하고..;;
당시 기억을 더듬어서 (실제로 사용된 페이지는 http://rabbit4u.net/oldindex.html여기서 보세요.) 올립니다.;;
function scroll_event()
{
var table_width = 500; // 테이블 크기.
var document_margin = 20; // 문서의 왼쪽/오른쪽 여백을 합한 수치.
var document_width = document.body.clientWidth; // 우선 문서 폭을 구합니다.
if(document_width < table_width + document_margin) document_width = table_width + document_margin; // 크기가 일정 이상(=테이블크기+양쪽여백) 되면 깨집니다. 이걸 해결하기 위한 것으로, 일정 이상 작아지면 문서는 무조건 왼쪽에 치우쳐서 나오므로 (오른쪽은 잘리는..;;) 이런 식으로 하는 것입니다.
// 여기가 진짜로 레이어 가로위치를 바꿔주는..;;
// 아. layer_name은 레이어 이름, layer_left는 테이블 왼쪽에서 레이어 왼쪽까지 떨어진 거리입니다. (이거는 안변하죠?)
// 그리고 layer_top은 레이어의 세로 위치입니다.
for(i=0;i<layer_name.length;i++)
{
// (document_width - table_width)는 문서에서 테이블 빼고 남는 부분의 총 위치입니다. 왼쪽 여백의 폭은 이거의 반이니까 2로 나눠주고, 거기다가 테이블과 레이어랑 떨어진 거리를 더해줍니다. (1을 뺀 이유는 정밀 보정용입니다-_-;;)
document.all[layer_name[i]].style.pixelLeft = (document_width - table_width) / 2 + layer_left[i] - 1;
// 위치 조정 하나 더입니다-_-;; (처음부터 설정되어있는 경우에는 빼먹으셔도 좋습니다.)
document.all[layer_name[i]].style.pixelTop = layer_top[i];
}
}
음..;; 허접하게 되었군요.
- 토끼군 -
최종욱
2002.10.27 15:58
토끼군//링크에러..
