웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
엔지오식 레이어 메뉴 구성하기 (허접)
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
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자] HTML 홈페이지의 태그 기본구조. [4] | ZipShin | 2002.08.07 |
[Siren]하나도 안귀엽게 -ㅅ-;; 문서 정렬하기 [5] | 세이렌 | 2002.08.01 |
[스타일시트] 페이지 여백 없애기2 ^^ ↓ 아래글을 보충합니다. [8] | ZipShin | 2002.07.31 |
[Siren]페이지 여백 없애기 [8] | 세이렌 | 2002.07.31 |
웹페이지 소스보기. [4] | ZipShin | 2002.07.31 |
[Siren]이미지 주변에 점선 테두리 생기게 하기 ^_^ [6] | 세이렌 | 2002.07.30 |
[Siren]글자(문자,폰트) 링크 커서 제어하기 [8] | 세이렌 | 2002.07.30 |
[Tip]로딩속도 높이는 10가지 방법. [8] | HomeBox™ | 2002.06.28 |
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능 [5] | HomeBox™ | 2002.06.27 |
제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
메타태그(Meta)의 모든것 [11] | ZipShin | 2002.06.20 |
홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
저기에서 이리로 온 글입니다. [3] | 이성영 | 2002.05.07 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
드래그하면 바뀌는 마술거울효과 (-_-")v [16] | 짱나 | 2002.04.05 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
두 개의 프레임을 동시에 제어하기 [4] | (づ_-) 위드 | 2002.03.25 |