테스트 사이트 - 개발 중인 베타 버전입니다

sir 주메방식의 메뉴버튼 롤오버

롤오버변경으로 참조하셔서 수정하여 사용하시면 됩니다.
카멜레온 플러그인에 맞게끔 수정한거라...
약간의 수정이 필요합니다.
꼭 필요하신분 수정해서 사용하세요!

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>

<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 rollover(link_id, id)
{
document.images[link_id].src = '<?="$cm_cfg[path]/data/chameleon/menu/$gr_dir"?>'+id+'_over';
}

function rolloff(link_id, id, on_off)
{
document.images[link_id].src = '<?="$cm_cfg[path]/data/chameleon/menu/$gr_dir"?>'+id+on_off;
}
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);
}

document.onload = preload('<?=$cm_cfg[path]?>/img/bg_arrow.gif', '<?=$cm_cfg[path]?>/img/menu_arrow.gif', '<?=$cm_cfg[path]?>/img/bg_submenu.gif', '<?=$cm_cfg[path]?>/img/menu_line.gif');
</script>

<script language="javascript" src="<?=$cm_cfg[path]?>/js/sideview.js"></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; }

.bg_title { background-image:url('<?=$cm_cfg[path]?>/img/lm_category.gif');
width:179px;
height:48px;
padding-left:25px;
padding-top:4px; }
.bg_menu2 { height:22px;
padding-left:25px; }
.bg_line2 { background-image:url('<?=$cm_cfg[path]?>/img/dot.gif'); height:3px; }
</style>
<?
function disp_top_menu($i, $x=0, $y=2)
{
global $menu, $menu1, $cm_cfg, $topmenus;

$mu_id = $topmenus[$i][mu_id];
$id = $topmenus[$i][id];

if ($cm_cfg[menu]==$mu_id) {
$on_off = "_on";
$on_off_img = $topmenus[$i][button_on];
} else {
$on_off = "_off";
$on_off_img = $topmenus[$i][button_off];
}


if ($topmenus[$i][button_over]) {
$over = "rollover('id_{$mu_id}', '$id');";
$off = " onmouseout=\"rolloff('id_{$mu_id}', '$id', '$on_off');\"";
}

return "{$topmenus[$i][url]}<img src='$on_off_img' border=0 name='id_{$mu_id}' $off onmouseover=\"layer_view('id_{$mu_id}', 'menu_{$mu_id}', 'view', {$x}, {$y});$over\"></a>";
}

function top_box($content)
{
global $cm_cfg;

return "
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td background='$cm_cfg[path]/img/top_box_tl.gif' width=5 height=5></td>
<td background='$cm_cfg[path]/img/top_box_tc.gif' width='' height=5></td>
<td background='$cm_cfg[path]/img/top_box_tr.gif' width=5 height=5></td>
</tr>
<tr>
<td background='$cm_cfg[path]/img/top_box_l.gif' width=5></td>
<td style='padding:10px; line-height:150%;'>$content</td>
<td background='$cm_cfg[path]/img/top_box_r.gif' width=5></td>
</tr>
<tr>
<td background='$cm_cfg[path]/img/top_box_bl.gif' width=5 height=5></td>
<td background='$cm_cfg[path]/img/top_box_bc.gif' width='' height=5></td>
<td background='$cm_cfg[path]/img/top_box_br.gif' width=5 height=5></td>
</tr>
</table>";
}

function print_menu1($key, $no)
{
global $menu;

$str = "<table id='menu_{$key}' cellpadding=0 cellspacing=0 style='position:absolute; display:none;' onpropertychange=\"selectBoxHidden('menu_{$key}')\">";
$str .= "<tr><td class=bg_line1></td></tr>";
$str .= print_menu2($key, $no);
$str .= "<tr><td class=bg_line1></td></tr>";
$str .= "</table>\n";

return $str;
}

function print_menu2($key, $no)
{
global $menu;

for($i=0; $i<count($menu[$key]); $i++)
{
if ($menu[$key][$i][0]=="줄분리")
$str .= "<tr><td class=bg_line{$no}></td></tr>";
else
{
$target = "";
if ($menu[$key][$i][2])
$target = " target=_blank ";
$span1 = $span2 = "";
if ($menu[$key][$i][3])
{
$span1 = "<span style='{$menu[$key][$i][3]}'>";
$span2 = "</span>";
}
$str .= "<tr><td class=bg_menu{$no}>{$menu[$key][$i][0]}{$span1}{$menu[$key][$i][1]}{$span2}</a></td></tr>";
}
}

return $str;
}

unset($menu);

for ($m=0; $m<count($topmenus); $m++) {
for($s=0;$s<count($submenus["$m"]);$s++) {
$menu["{$topmenus[$m][mu_id]}"]["$s"] = array("{$submenus["$m"]["$s"][url]}", "{$submenus["$m"]["$s"][subject]}", 0,"color:#330000");
}
}

?>

//#############메뉴 출력 부분입니다.

<table cellpadding="0" cellspacing="0" border="0">
<form name=main_menu>
<tr>
<td align=left>
<? for ($i=0; $i<count($topmenus); $i++) { ?>

<?=disp_top_menu($i)?>
<?=print_menu1($topmenus[$i][mu_id], 1);?>
&nbsp;&nbsp;
<? } ?>
</td>
</tr>
</form>
</table>

p.s:

$topmenus[0][url] 메뉴주소 (<a href='bbs/board.php?bo_table=free'>)
$topmenus[0][mu_id] 메뉴값 (0:홈, 1:커뮤니티, 2:자료실... )
$topmenus[$i][button_off] 메뉴 오프 이미지값 (<img src='img/main1_off.jpg'>)
$topmenus[$i][button_on] 메뉴 온 이미지값
$topmenus[$i][button_over] 메뉴 마우스 오버시

적용사이트는 링크 #1입니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

좋은메뉴 감사합니다.
head 부분에 적용시키나요? 적용 시키는 부분이 궁금합니다..

게시판 목록

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
글쓰기