[제나플러스] sir.co.kr 의 메뉴 따라하기 (2005.09.20수정)
본문
지금 상단에 보이는 멋드러지면서도 브라우저 호환성도 완벽(?)한 이 메뉴를 뽀려오는 방법입니다.
관리자님께서 head.php 를 공개하셨기에 정리해서 올립니다.
(sir의 head처럼 php로 무장하지 않았으니 저같은 짜집퍼(?)에게는 오히려 이 방법이 쉬울겁니다)
먼저 head.sub.php 맨 아래 아래 내용을 넣습니다.
수정하지 않으셨다면 <a name="g4_head"></a> 아래 넣게되겠죠.
------------------------------------------------------------------------------------------------------------
<!-- 메인메뉴용 스크립트 -->
<script language="JavaScript">
var save_layer = null;
function layer_view(link_id, menu_id, opt, x, y)
{
var link = document.getElementById(link_id);
var menu = document.getElementById(menu_id);
//for (i in link) { document.write(i + '<br/>'); } return;
if (save_layer != null)
{
save_layer.style.display = "none";
selectBoxVisible();
}
if (link_id == '')
return;
if (opt == 'hide')
{
menu.style.display = 'none';
selectBoxVisible();
}
else
{
x = parseInt(x);
y = parseInt(y);
menu.style.left = get_left_pos(link) + x;
menu.style.top = get_top_pos(link) + link.offsetHeight + y;
menu.style.display = 'block';
}
save_layer = menu;
}
function preload() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
//alert(arguments.length);
}
</script>
<script language="javascript" src="<?=$g4[path]?>/js/sideview.js"></script>
<script language="JavaScript">
function disp_menu(id)
{
//document.getElementById('menu_gnuboard4').style.display = 'none';
document.getElementById(id).style.display = '';
}
</script>
<STYLE>
.bg_menu1 { height:22px;
border-left-width:1px; border-left-style:solid; border-left-color:#9DADE5;
border-right-width:1px; border-right-style:solid; border-right-color:#9DADE5;
padding-left:15px;
padding-right:15px;
background-color:#F6FAFF; }
.bg_line1 { height:1px; background-color:#9DADE5; }
</STYLE>
------------------------------------------------------------------------------------------------------------
여기서 sideview.js 는 게시판일 경우 불러와 지는탓에 그냥 요렇게 둘 경우
게시판 상태에서는 스크립트를 두번 불러오게 됩니다.
if($bo_table) 로 게시판일 경우 막아도 될것같은데 어짜피 별 차이 없을것 같으니 그냥 위 쏘스대로 써먹어도 될것 같습니다
그리고 메뉴위에 바짝 붙여 써먹어도 사실상 상관 없지만.. 웬지 head.sub에 넣는게 심적으로 든든합니다(말도안됨 ㅋㅋ)
다음으로 메뉴를 넣고싶은곳에
------------------------------------------------------------------------------------------------------------
<a href="경로"><img src="이미지경로" border=0 id='id_home' onmouseover="layer_view('id_home', 'menu_home', 'view', 0, 2);"></a>
<a href="경로"><img src="이미지경로" border=0 id='id_sir' onmouseover="layer_view('id_sir', 'menu_sir', 'view', 0, 2);"></a>
<a href="경로"><img src="이미지경로" border=0 id='id_commu' onmouseover="layer_view('id_commu', 'menu_commu', 'view', 0, 2);"></a>
------------------------------------------------------------------------------------------------------------
요런식으로 넣어주시면 됩니다.
id_아이디값 , menu_아이디값
다르게 만들면 메뉴를 여러개 만들수도 있겠습니다.
여기서 'view', 0, 2 부분이 메뉴 가로세로 시작하는 위치 입니다. 버튼과 띄우기 싫다면 0, 0 으로 하면 되고 마이너스도 됩니다.
다음으로 마우스 댔을때 뜨는 레이어 테이블 입니다. 위 아이디값과 같아야 됩니다.
-------------------------------------------------------------------------------------------------------------
<table width=100 id='menu_home' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange="selectBoxHidden('menu_home')">
<tr>
<td class=bg_menu1 width=100><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_introduc'>메뉴 1</a></td>
</tr>
<tr>
<td class=bg_menu1><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_news'>메뉴2</a></td>
</tr>
<tr>
<td class=bg_line1></td>
</tr>
</table>
<table width=100 id='menu_sir' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange="selectBoxHidden('menu_sir')">
<tr>
<td class=bg_menu1 width=100><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_introduc'>메뉴 1</a></td>
</tr>
<tr>
<td class=bg_menu1><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_news'>메뉴2</a></td>
</tr>
<tr>
<td class=bg_line1></td>
</tr>
</table>
<table width=100 id='menu_commu' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange="selectBoxHidden('menu_commu')">
<tr>
<td class=bg_menu1 width=100><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_introduc'>메뉴 1</a></td>
</tr>
<tr>
<td class=bg_menu1><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_news'>메뉴2</a></td>
</tr>
<tr>
<td class=bg_line1></td>
</tr>
</table>
----------------------------------------------------------------------------------------------------------------
여기서 일정한 테이블의 크기를 정해주고 싶다면 table 에 width 를 주고 셀(td) 중 하나이상에도 같은 width 을 줘야 되더군요.
이유는 모릅니다만 익스플로러는 table의 width 만 인식하고, 파이어폭스는 td의 width만 인식합니다.
끝입니다.
아주 간단하지요?
여기서 주의점 하나..
그냥 위 처럼 해서 쓰면 마우스가 레이어에서 사라져도 레이어가 계속 떠있습니다.
다른메뉴로 스위치는 되지만 페이지가 새로고침(이동)되기 이전에는 사라지지 않습니다.
나름대로 그럴 경우가 더 좋은홈이 있겠습니다만... sir처럼 마우스가 레이어나 버튼에서 벗어나면 레이어를 숨기고 싶다면
그 주변에 있는 table 혹은 td 등과 같은곳에 onmouseover="layer_view('','','','','')" 를 넣어주셔야 됩니다.
<table border=0 onmouseover="layer_view('','','','','')">
<tr>
<td onmouseover="layer_view('','','','','')">
.
.
.
이런식으로 말입니다..
메뉴를 덥는 테이블에 onmouseover="layer_view('','','','','')" 가 있다면 메뉴가 안나타나니 주의해야 됩니다.
쉽게 예를들어 순십간에 급조한 파일을 첨부해 설명하자면..
그림에서 처럼 적색 부분에 메뉴가 들어간다면
청색 테이블의 table 에 onmouseover="layer_view('','','','','')" 삽입.
연녹색 셀 td 에 onmouseover="layer_view('','','','','')" 삽입 (그러면 3번 테이블은 자연적으로 종속됨)
관리자님께서 head.php 를 공개하셨기에 정리해서 올립니다.
(sir의 head처럼 php로 무장하지 않았으니 저같은 짜집퍼(?)에게는 오히려 이 방법이 쉬울겁니다)
먼저 head.sub.php 맨 아래 아래 내용을 넣습니다.
수정하지 않으셨다면 <a name="g4_head"></a> 아래 넣게되겠죠.
------------------------------------------------------------------------------------------------------------
<!-- 메인메뉴용 스크립트 -->
<script language="JavaScript">
var save_layer = null;
function layer_view(link_id, menu_id, opt, x, y)
{
var link = document.getElementById(link_id);
var menu = document.getElementById(menu_id);
//for (i in link) { document.write(i + '<br/>'); } return;
if (save_layer != null)
{
save_layer.style.display = "none";
selectBoxVisible();
}
if (link_id == '')
return;
if (opt == 'hide')
{
menu.style.display = 'none';
selectBoxVisible();
}
else
{
x = parseInt(x);
y = parseInt(y);
menu.style.left = get_left_pos(link) + x;
menu.style.top = get_top_pos(link) + link.offsetHeight + y;
menu.style.display = 'block';
}
save_layer = menu;
}
function preload() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
//alert(arguments.length);
}
</script>
<script language="javascript" src="<?=$g4[path]?>/js/sideview.js"></script>
<script language="JavaScript">
function disp_menu(id)
{
//document.getElementById('menu_gnuboard4').style.display = 'none';
document.getElementById(id).style.display = '';
}
</script>
<STYLE>
.bg_menu1 { height:22px;
border-left-width:1px; border-left-style:solid; border-left-color:#9DADE5;
border-right-width:1px; border-right-style:solid; border-right-color:#9DADE5;
padding-left:15px;
padding-right:15px;
background-color:#F6FAFF; }
.bg_line1 { height:1px; background-color:#9DADE5; }
</STYLE>
------------------------------------------------------------------------------------------------------------
여기서 sideview.js 는 게시판일 경우 불러와 지는탓에 그냥 요렇게 둘 경우
게시판 상태에서는 스크립트를 두번 불러오게 됩니다.
if($bo_table) 로 게시판일 경우 막아도 될것같은데 어짜피 별 차이 없을것 같으니 그냥 위 쏘스대로 써먹어도 될것 같습니다
그리고 메뉴위에 바짝 붙여 써먹어도 사실상 상관 없지만.. 웬지 head.sub에 넣는게 심적으로 든든합니다(말도안됨 ㅋㅋ)
다음으로 메뉴를 넣고싶은곳에
------------------------------------------------------------------------------------------------------------
<a href="경로"><img src="이미지경로" border=0 id='id_home' onmouseover="layer_view('id_home', 'menu_home', 'view', 0, 2);"></a>
<a href="경로"><img src="이미지경로" border=0 id='id_sir' onmouseover="layer_view('id_sir', 'menu_sir', 'view', 0, 2);"></a>
<a href="경로"><img src="이미지경로" border=0 id='id_commu' onmouseover="layer_view('id_commu', 'menu_commu', 'view', 0, 2);"></a>
------------------------------------------------------------------------------------------------------------
요런식으로 넣어주시면 됩니다.
id_아이디값 , menu_아이디값
다르게 만들면 메뉴를 여러개 만들수도 있겠습니다.
여기서 'view', 0, 2 부분이 메뉴 가로세로 시작하는 위치 입니다. 버튼과 띄우기 싫다면 0, 0 으로 하면 되고 마이너스도 됩니다.
다음으로 마우스 댔을때 뜨는 레이어 테이블 입니다. 위 아이디값과 같아야 됩니다.
-------------------------------------------------------------------------------------------------------------
<table width=100 id='menu_home' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange="selectBoxHidden('menu_home')">
<tr>
<td class=bg_menu1 width=100><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_introduc'>메뉴 1</a></td>
</tr>
<tr>
<td class=bg_menu1><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_news'>메뉴2</a></td>
</tr>
<tr>
<td class=bg_line1></td>
</tr>
</table>
<table width=100 id='menu_sir' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange="selectBoxHidden('menu_sir')">
<tr>
<td class=bg_menu1 width=100><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_introduc'>메뉴 1</a></td>
</tr>
<tr>
<td class=bg_menu1><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_news'>메뉴2</a></td>
</tr>
<tr>
<td class=bg_line1></td>
</tr>
</table>
<table width=100 id='menu_commu' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange="selectBoxHidden('menu_commu')">
<tr>
<td class=bg_menu1 width=100><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_introduc'>메뉴 1</a></td>
</tr>
<tr>
<td class=bg_menu1><a href='<?=$g4[bbs_path]?>/board.php?bo_table=iriver_news'>메뉴2</a></td>
</tr>
<tr>
<td class=bg_line1></td>
</tr>
</table>
----------------------------------------------------------------------------------------------------------------
여기서 일정한 테이블의 크기를 정해주고 싶다면 table 에 width 를 주고 셀(td) 중 하나이상에도 같은 width 을 줘야 되더군요.
이유는 모릅니다만 익스플로러는 table의 width 만 인식하고, 파이어폭스는 td의 width만 인식합니다.
끝입니다.
아주 간단하지요?
여기서 주의점 하나..
그냥 위 처럼 해서 쓰면 마우스가 레이어에서 사라져도 레이어가 계속 떠있습니다.
다른메뉴로 스위치는 되지만 페이지가 새로고침(이동)되기 이전에는 사라지지 않습니다.
나름대로 그럴 경우가 더 좋은홈이 있겠습니다만... sir처럼 마우스가 레이어나 버튼에서 벗어나면 레이어를 숨기고 싶다면
그 주변에 있는 table 혹은 td 등과 같은곳에 onmouseover="layer_view('','','','','')" 를 넣어주셔야 됩니다.
<table border=0 onmouseover="layer_view('','','','','')">
<tr>
<td onmouseover="layer_view('','','','','')">
.
.
.
이런식으로 말입니다..
메뉴를 덥는 테이블에 onmouseover="layer_view('','','','','')" 가 있다면 메뉴가 안나타나니 주의해야 됩니다.
쉽게 예를들어 순십간에 급조한 파일을 첨부해 설명하자면..
그림에서 처럼 적색 부분에 메뉴가 들어간다면
청색 테이블의 table 에 onmouseover="layer_view('','','','','')" 삽입.
연녹색 셀 td 에 onmouseover="layer_view('','','','','')" 삽입 (그러면 3번 테이블은 자연적으로 종속됨)
추천0
관련링크
댓글목록 0
등록된 댓글이 없습니다.
