그룹은 가로, 게시판은 세로 배열 자동메뉴 G4, G3 > 그누4 팁자료실

그누4 팁자료실

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

그룹은 가로, 게시판은 세로 배열 자동메뉴 G4, G3 정보

그룹은 가로, 게시판은 세로 배열 자동메뉴 G4, G3

본문

odong0.com님께서 공개하신 G4 세로형 자동메뉴를 참고해서 가로형으로 수정하였습니다.
odong0.com님의 세로형 위치 http://www.sir.co.kr/bbs/tb.php/g4_tiptech/877

*그룹은 가로, 게시판은 세로 배열된 레이어 형태의 속칭 '자동메뉴'에 대하여,,
- 메뉴 전체를 수동으로 코딩하지 않고 '디비를 읽어 들여 뿌려준다'는 의미로 사용된것 같습니다.

예전부터 관심을 가지고 있던 메뉴형태인데
초보로서 엄두가 나질않아 sir에서 관련 글들만 스크랩해두었다가 비오시는날 하루 꼬박 작업했습니다.
-부족하지만 성의로 봐주십사 하는 넋두리,,

그룹은 접근권한 설정 옵션에 따라 그룹이름순으로 가로로 배열되며,
게시판은 목록보기 권한설정 순서로 세로 배열됩니다.

특정 그룹이나 게시판으로 이동하면 클래스값이 적용되어 그 그룹이나 게시판이
다르게 표시되므로 스타일 시트에서 따로 지정해 주어야 됩니다.(g6man님께서 알려주셨습니다)

소규모 사이트에서 손쉽게 적용시키기는 이런 방법의 메뉴 구성도 괜찮은듯 합니다.
테스트 결과 ie,ff에서 모두 잘 작동하는듯 합니다.

# 그룹에 속한 게시판이 하나도 없을때 msie에서 스크립트 오류 발생하나 정상작동합니다.
- 고수님께서 쓰~윽 한번 봐주시면 고맙겠습니다.

미리보기
G4
- 아래 링크에서 _gnusr_gr_bo_hv.php 부분
http://gnusr.com/g4/gnusr/test/menu_test.php
G3
http://www.gnusr.com/g3/?gur=work

원하는 위치에 <? include_once("/경로/메뉴파일명"); ?> 하시고,
소스코드(소스가운데 ca_id 를 검색하셔서 ca_id=>gr_id로 변경해주세요)
<?
#################################################################
# 그누보드3,4 - 파이어폭스, 아이이 (그누보드3 사용자-아랫쪽 덧붙임)
# 그룹은 가로, 게시판은 세로 배열된 속칭 자동메뉴
# 해당 그룹이나 게시판으로 이동시 스타일값이 적용되므로 개인에 맞게 수정
# 소스가운데 ca_id=>gr_id로 변경, 경로는 적절히 필요한 대로 변경
# 피드백 http://gnusr.com/g4/bbs/tb.php/future/10
#################################################################

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

$gr_height = 20; // 그룹 메뉴 높이
$bo_layer_top = 14;  // 보드 레이어 상단 위치 그룹메뉴 높이1/2 정도
$bo_layer_left = -70;  // 보드 레이어 왼쪽마진
$bo_layer_width = 120;// 보드 레이어 너비
$bo_layer_tr_height = 20; // 보드 레이어 높이
$bo_layer = ""; // 보드 레이어 임시저장 변수

$line_shadow = "<td width=1 background='$g4[path]/gnusr/images/bg/line_shadow02.gif'></td>";
echo "<table width='220' height='{$gr_height}' border='0' bgcolor='#99AECE'><tr>\n";

// 그룹 접근 권한에 따라 그룹메뉴 보이기 여분필드 gr_1 순으로 정렬
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_1";
// 제외그룹설정 root님
//$sql = " select * from $g4[group_table] where gr_id not in ('etc', 'link') order by gr_1";

$result = sql_query($sql);
while ($row=mysql_fetch_array($result)) {
{
//그룹링크
$gr_href = "<a href='$g4[path]/?ca_id=$row[gr_id]' class='menu' onfocus='this.blur()'>$row[gr_subject]</a>";
$gr_href_on = "<a href='$g4[path]/?ca_id=$row[gr_id]' class='menu_on' onfocus='this.blur()'>$row[gr_subject]</a>";
// 그룹별 보드 표시
$bo_layer = "";
$m_over = "";
$m_out  = "";
$menulayer_id  = "";

// 게시판 목록보기 권한설정순 정렬
$sql2 = " SELECT bo_subject, bo_table from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') order by bo_subject ";
$result2 = sql_query($sql2);
for ($j=0; $row2=mysql_fetch_array($result2); $j++) {
$bo_layer .= "<tr height='$bo_layer_tr_height'><td style='border-bottom-width:1;border-bottom-color:#dddddd;border-bottom-style:dotted;'>";
if ($row2[bo_table] == $bo_table)
$bo_layer .= "&middot; <a href='$g4[bbs_path]/board.php?bo_table=$row2[bo_table]' class='menu_on' onfocus='this.blur()'>$blue_bullet $row2[bo_subject]</a></td></tr>";
else
$bo_layer .= "&middot; <a href='$g4[bbs_path]/board.php?bo_table=$row2[bo_table]' class='' onfocus='this.blur()'>$row2[bo_subject]</a></td></tr>";
}
mysql_free_result($result2);
if ($bo_layer) {
$m_over = "menulayer_{$row[gr_id]}.style.display=''; ";
$m_out  = "menulayer_{$row[gr_id]}.style.display='none'; ";
$menulayer_id  = "menulayer_{$row[gr_id]}";
}

if ($row[gr_id] == $ca_id)
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='top_menu_btn'>$gr_href_on</td>\n";
else
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='top_menu_btn'>$gr_href</td>\n";
//echo $line_shadow;
}
// 보드 레이어 위치 설정
//$pos = $bo_layer_top + ($bo_layer_tr_height);
//$pos = $bo_layer_top + ($bo_layer_tr_height * ($i-100));
if ($bo_layer) {
//echo "<td>";absolute
echo "<td>";
echo "<div id='{$menulayer_id}' style='margin-top:{$bo_layer_top}px; margin-left:{$bo_layer_left}px; width:{$bo_layer_width}px; display:none; position:absolute;'>";
echo "<table border=0 cellpadding=1 cellspacing=0 bgcolor=#4B4B4B width=100% onmouseover=$m_over onmouseout=$m_out><tr><td>";
echo "<table border=0 width=100% bgcolor=#FFFFFF>$bo_layer</table>";
echo "</td></tr></table>";
echo "</div>";
echo "</td>\n";
//echo "</td></tr><tr>\n";
}
}
echo "</tr></table>\n";

mysql_free_result($result);
?>

<?
/**********************************************************************************/
//그누보드3 사용자 여기서 부터 시작
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$gr_height = 20; // 그룹 메뉴 높이
$bo_layer_top = 14;  // 보드 레이어 상단 위치 그룹메뉴 높이1/2 정도
$bo_layer_left = -70;  // 보드 레이어 왼쪽마진
$bo_layer_width = 120;// 보드 레이어 너비
$bo_layer_tr_height = 20; // 보드 레이어 높이
$bo_layer = ""; // 보드 레이어 임시저장 변수

echo "<table width='400' height='{$gr_height}' border='0' bgcolor='#99AECE'><tr>\n";

$line_shadow = "<td height='$gr_height' background='./gnusr/images/bg/line_shadow02.gif'></td>";
//$line_shadow = "<td width=0 height='$gr_height' bgcolor='#FFFFFF'></td>";
//$bar = "<td width=1 height='$gr_height'>|</td>";

// 그룹 접근 권한에 따라 그룹메뉴 보이기 여분필드 gr_1 순으로 정렬
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $cfg[table_group] AS a LEFT JOIN $cfg[table_group_member] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_subject";
// 제외그룹설정 root님
//$sql = " select * from $cfg[table_group] where gr_id not in ('', '') order by gr_subject";

$result = sql_query($sql);
while ($row=mysql_fetch_array($result)) {
{
//그룹링크
$gr_href="<a href='?gur=$row[gr_id]' class='menu' onfocus='this.blur()'>$row[gr_subject]</a>";
$gr_href_on = "<a href='?gur=$row[gr_id]' class='menu_on' onfocus='this.blur()'>$row[gr_subject]</a>";
// 그룹별 보드 표시
$bo_layer = "";

$m_over = "";
$m_out  = "";
$menulayer_id  = "";

// 게시판 목록보기 권한설정순 정렬
$sql2 = " SELECT bo_subject, bo_table from $cfg[table_board] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') order by bo_subject ";

$result2 = sql_query($sql2);
for ($j=0; $row2=mysql_fetch_array($result2); $j++) {
$bo_layer .= "<tr height='$bo_layer_tr_height'><td style='border-bottom-width:1;border-bottom-color:#dddddd;border-bottom-style:dotted;'>";
// ·  <a href='$g4[bbs_path]/board.php?bo_table=$row2[bo_table]'>$row2[bo_subject]</a></td></tr>
if ($row2[bo_table] == $bo_table)
$bo_layer .= "&middot; <a href='?doc=$cfg[bbs_dir]/gnuboard.php&bo_table=$row2[bo_table]' class='menu_on' onfocus='this.blur()'>$blue_bullet $row2[bo_subject]</a></td></tr>";
else
$bo_layer .= "&middot; <a href='?doc=$cfg[bbs_dir]/gnuboard.php&bo_table=$row2[bo_table]' class='' onfocus='this.blur()'>$row2[bo_subject]</a></td></tr>";
}
mysql_free_result($result2);
if ($bo_layer) {
$m_over = "menulayer_{$row[gr_id]}.style.display=''; ";
$m_out  = "menulayer_{$row[gr_id]}.style.display='none'; ";
$menulayer_id  = "menulayer_{$row[gr_id]}";
}

if ($row[gr_id] == $gur)
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='top_menu_btn'>$gr_href_on</td>";
else
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='top_menu_btn'>$gr_href</td>";
echo $line_shadow;
//echo $bar;
}
// 보드 레이어 위치 설정
//$pos = $bo_layer_top + ($bo_layer_tr_height);
//$pos = $bo_layer_top + ($bo_layer_tr_height * ($i-100));
if ($bo_layer) {
//echo "<td>";absolute
echo "<td>";
echo "<div id='{$menulayer_id}' style='margin-top:{$bo_layer_top}px; margin-left:{$bo_layer_left}px; width:{$bo_layer_width}px; display:none; position:absolute;'>";
echo "<table border=0 cellpadding=1 cellspacing=0 bgcolor=#4B4B4B width=100% onmouseover=$m_over onmouseout=$m_out><tr><td>";
echo "<table border=0 width=100% bgcolor=#FFFFFF>$bo_layer</table>";
echo "</td></tr></table>";
echo "</div>";
echo "</td>\n";
//echo "</td></tr><tr>\n";
}
}
//echo "</tr>";

mysql_free_result($result);



//사용시 아래 두줄은 php구문 밖으로 빼낼것
<td width='150'>그누보드 3.43 patch</td></tr>
</table>
*/
?>
추천
5

댓글 26개

감사합니다.
공개해주셨군요..

개인적으로 사용하시는 메뉴를 탐내고 있었는데 ^^;; 가로를 따로 구현하고 그리고 메뉴를 3단계로 해 두셔서..
그것 또한 구현하려니..  저걸 때다 붙이고 저걸.... 하는 생각만.. 하고 있습니다.
여하튼 이런 피땀의 결정체들이 나올수록 일반유저는 정말 좋은듯 합니다.
속칭 '삽질'한 결과일뿐 입니다.
한분이라도 필요한 분이 계시다면 다행이구요.

*말씀하신 제홈에 사용중인 메뉴는 공개된 sir head.php 를 약간 수정해서 사용하는 것입니다.
- 공개소스 위치 http://www.sir.co.kr/bbs/tb.php/g4_tiptech/1015
- 수정된 부분은 그룹구현부의 이미지를 --> 그룹명을 디비에서 가져와서 텍스트 타입으로 보여주도록 한것 밖에 없습니다.

메뉴 전체 소스코드입니다.
(여기 빠져있는 function, switch, sub array 등은 환경설정화일에, 스타일은 layout.css에 넣어서 사용합니다.)
<?
/************************************************************
#### sir v11 pulldown_menu 050901 공개된 소스를 일부 수정함
### http://www.sir.co.kr/bbs/tb.php/g4_tiptech/1015 depth2
### CSS 에서 자유롭게 레이아웃을 잡기위해 모듈화 필요함
### function, switch, array 부분은 _gnusr.php에 복사, 스타일은 layout.css에 복사
*************************************************************/
?>

<table width=500 cellpadding=0 cellspacing=0 border=0 align=right>
<tr>
<td height=25 bgcolor='#99AECE' style='padding-left:0px;' onmouseover="layer_view('','','','','')">

<script language="JavaScript">
function disp_menu(id) {
<?
foreach($menu as $key=>$value)
{
echo "document.getElementById('menu_{$key}').style.display = 'none';\n";
}
?>
document.getElementById(id).style.display = '';
}
</script>


<table width=250 align="" cellpadding=0 cellspacing=0 border=0 class='top_menu_btn'>
<?
////이미지를 사용하지 않음
// 스위치
//$on_off =  ($menu1 == "$row[gr_id]") ? "on" : "off";//class=menu_{$on_off}응용가능
//$on_off1 =  ($menu1 == "photonews") ? "on" : "off";
//$on_off2 =  ($menu1 == "community") ? "on" : "off";
//$on_off3 =  ($menu1 == "pifan") ? "on" : "off";
//$on_off4 =  ($menu1 == "community") ? "on" : "off";

//그룹목록을 디비 읽어서 올라오도록 변경
$line_shadow = "<td width=1 background='$g4[path]/gnusr/images/bg/line_shadow02.gif'></td>";
echo "<tr>";
//echo $line_shadow;
// 그룹 접근 권한에 따라 그룹메뉴 보이기 여분필드 gr_1 순으로 정렬
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_1";
// 제외그룹설정 root님
//$sql = " select * from $g4[group_table] where gr_id not in ('etc', 'link') order by gr_1";
/* // 제외그룹설정 morning님
$sql = " select * from $g4[group_table]
where gr_id <> ''
and gr_id <> 'etc'
and gr_id <> 'link'
order by gr_1";
*/
$result = sql_query($sql);
while ($row=mysql_fetch_array($result)) {
echo "<td width='80' height='25' onmouseover=\"disp_menu('menu_{$row[gr_id]}');\" align='center'>";
//echo "<td width='70' height='25' onmouseover=\"disp_menu('menu_{$row[gr_id]}');\" align='center'>";
//onmouseover=\"layer_view('id_$key', 'pulldown_$key', 'view', 0, 5);\"
//g6man님 해당그룹 선택시 표시
if ($row[gr_id] == $ca_id)
echo "<a href='$g4[path]/?ca_id=$row[gr_id]' class='menu_on' onfocus='this.blur()'>$row[gr_subject]</a>";
else
echo "<a href='$g4[path]/?ca_id=$row[gr_id]' class='menu' onfocus='this.blur()'>$row[gr_subject]</a>";
echo "</td>";
echo $line_shadow;
}
echo "</tr>";

//주메뉴 텍스트 직접 코딩 방식
/*
echo "
<table width=280 cellpadding=0 cellspacing=0 align=left border=0>
<tr align=center>
<td width=70 height=25 onmouseover=\"disp_menu('menu_community');\"><a href='$g4[path]/?ca_id=community' class=menu><b>커뮤니티</b></a></td>
<td width=70 height=25 onmouseover=\"disp_menu('menu_montessori');\"><a href='$g4[path]/?ca_id=montessori' class=menu><b>몬테소리</b></a></td>
<td width=70 height=25 onmouseover=\"disp_menu('menu_capture');\"><a href='$g4[path]/?ca_id=capture' class=menu><b>조형자료</b></a></td>
<td width=70 height=25 onmouseover=\"disp_menu('menu_work');\"><a href='$g4[path]/?ca_id=work' class=menu><b>웹스터디</b></a></td>
</tr>
</table>";

//이미지 타입 주메뉴
echo "<a href='$g4[path]/gnuboard4.php'><img src='$g4[path]/img/menu{$on_off1}_01.gif' border=0 width=76 height=25 onmouseover=\"disp_menu('gnuboard');\"></a>";
echo "<a href='$g4[path]/youngcart.php'><img src='$g4[path]/img/menu{$on_off2}_02.gif' border=0 width=66 height=25 onmouseover=\"disp_menu('youngcart');\"></a>";
echo "<a href='$g4[bbs_path]/board.php?bo_table=pr_request'><img src='$g4[path]/img/menu{$on_off3}_03.gif' border=0 width=76 height=25 onmouseover=\"disp_menu('product');\"></a>";
echo "<a href='$g4[path]/community.php'><img src='$g4[path]/img/menu{$on_off4}_04.gif' border=0 width=76 height=25 onmouseover=\"disp_menu('community');\"></a>";
*/

?>
</table>

</td>
<td bgcolor='#99AECE' width='50%' align='right'>
<span style='padding-right:10px;' class='small'>
<?
//나스카님 관리자 접속 체크 셀렉트 문을 콕 찍어서-오른쪽 여백활용
?>
</span>
</td>
</tr>
<tr>
<td colspan=2 height=20 style='padding-left:0px;'>
<?
//서브위치
$pulldown = $submenu = "";
foreach($menu as $k=>$v)
{
if ($k==$menu1 && $menu[$k][0])
echo "<span id='menu_$k' style='display:;'>\n";
else
echo "<span id='menu_$k' style='display:none;'>\n";
$bar = "";
$i = 0;
foreach($menu[$k] as $key=>$value)
{
if ($i==0)
{
echo "\t<span style='padding-left:{$value}px;'></span>\n";
}
else
{
$target = "";
if ($menu[$k][$key][0][2])
$target = " target=_blank ";

$style = "";
if ($key==$menu2)
$style = "font-weight:bold; color:#45436c;";
echo
$bar . "\t<a href='{$menu[$k][$key][0][0]}' {$target}><span id='id_$key' onmouseover=\"layer_view('id_$key', 'pulldown_$key', 'view', 0, 0);\" style='cursor:pointer; {$style}'>{$menu[$k][$key][0][1]}</span></a>\n";
//$bar . "\t<a href='{$menu[$k][$key][0][0]}' {$target}><span id='id_$key' onmouseover=\"layer_view('id_$key', 'pulldown_$key', 'view', 0, 5);\" style='cursor:pointer; {$style}' >{$menu[$k][$key][0][1]}</span></a>\n";
$bar = " | ";

$pulldown .= "<table id='pulldown_$key' cellpadding=0 cellspacing=0 style='display:none; position:absolute;' onpropertychange=\"selectBoxHidden('pulldown_$key')\">";
$pulldown .= "<tr><td class=bg_line1></td></tr>";
$pulldown .= print_menu($k, $key, 1);
$pulldown .= "<tr><td class=bg_line1></td></tr>";
$pulldown .= "</table>\n";

if ($k==$menu1 && $key==$menu2)
{

$line_shadow = "<tr><td height=1 width=100 background='$g4[path]/gnusr/images/bg/line_shadow02.gif'></td></tr>";
//
$sqlsub = " select gr_id, gr_subject from $g4[group_table] where gr_id = '$ca_id'";
$resultsub = sql_query($sqlsub);
while ($rowsub=mysql_fetch_array($resultsub)) {
$up_dir = "<a href='$g4[path]/?ca_id=$menu_$k' onfocus='this.blur()'>$rowsub[gr_subject]</a>";
}
//
$sub_dir = "<a href='{$menu[$k][$key][0][0]}' onfocus='this.blur()'>{$menu[$k][$key][0][1]}</a>";

$submenu .= "<table  id='r_tb_mon_nav_pulldown_sub' radius='3' rborder='#F0F0F0' rbgcolor='transparent' width='175' height='20' border='0' cellspacing='0' cellpadding='0'>";
//$submenu .= "<tr><td bgcolor='silver' height='25' class='left_menu_btn'>$up_dir</td></tr>";
$submenu .= "$line_shadow";
$submenu .= "<tr><td bgcolor='silver' height='20' class='left_menu_sub'>$up_dir / $sub_dir</td></tr>";
$submenu .= "<tr><td height='7'></td></tr>";
$submenu .= print_menu($k, $key, 2);
$submenu .= "<tr><td></td></tr>";
$submenu .= "</table><script>roundTable(\"r_tb_mon_nav_pulldown_sub\");</script>\n";
// $submenu .= "<table class='' width=100% height=5 cellpadding=0 cellspacing=0 border=0><tr><td></td></tr></table>";
$submenu .= "<div style='height:5px;'></div>";
/*
$submenu .= "<table cellpadding=0 cellspacing=0 background='{$g4[path]}/img/ca_bg.gif'>";
//$submenu .= "<table cellpadding=0 cellspacing=0>";
$submenu .= "<tr><td class=bg_title><font color=#45436c><a href='{$menu[$k][$key][0][0]}'><b>{$menu[$k][$key][0][1]}</b></a></font></td></tr>";
$submenu .= print_menu($k, $key, 2);
$submenu .= "<tr><td class=bg_line2></td></tr>";
$submenu .= "<tr><td><img src='{$g4[path]}/img/ca_bottom.gif'></td></tr>";
$submenu .= "</table>\n";
*/
}
}
$i++;
}
echo "</span>\n";
}
echo $pulldown;
?>

</td>
</tr>
</table>
<!-- / -->
감사합니다. 어떻게 표현해야 될지.. ^^;;
제 홈피 메뉴가 바뀌겠군요.. 구현해 말아로 고민했는데..
감사합니다.
안녕하세요 우선 감사드립니다. 초보라 조금만 더 자세히 알려주시면 감사하겠습니다.

고수님들 알려주세요
현재 적용시킨 사이트인데, 링크가 안되는데 알려주세요.
http://www.sarang-online.info/gnuboard4

위의 내용을 auto_menu.php로 만들었고, head.php에 <? include_once("$g4[path]/auto_menu.php"); ?> 하여 삽입하였습니다.
링크는 아래 소스를 사용하여 되었습니다.
다음은 그룹과 그룹사이에 공간을 두고 싶은데 가능할까요 알려주세요
그리고 마우스 롤오버를 사용하고 싶은데 어떻게 하면 될까요...

<?
#################################################################
# 그누보드3,4 - 파이어폭스, 아이이 (그누보드3 사용자-아랫쪽 덧붙임)
# 그룹은 가로, 게시판은 세로 배열된 속칭 자동메뉴
# 해당 그룹이나 게시판으로 이동시 스타일값이 적용되므로 개인에 맞게 수정
# 소스가운데 ca_id=>gr_id로 변경, 경로는 적절히 필요한 대로 변경
# 피드백 http://gnusr.com/g4/bbs/tb.php/future/10
#################################################################

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


<style type=text/css>

a.menu_top:link, a.menu_top:visited, a.menu_top:active {
color:#45436c;

}

a.menu_top:hover, {
color:orange;
font-weight:bold;
}

a.menu_top_on:link, a.menu_top_on:visited, a.menu_top_on:active {
color:#45436c;
font-weight:bold;
}

a.menu_top_on:hover {
color:orange;
font-weight:bold;
}

</style>




<?
$gr_height = 20; // 그룹 메뉴 높이
$bo_layer_top = 8;  // 보드 레이어 상단 위치 그룹메뉴 높이1/2 정도
$bo_layer_left = -70;  // 보드 레이어 왼쪽마진
$bo_layer_width = 200;// 보드 레이어 너비
$bo_layer_tr_height = 20; // 보드 레이어 높이
$bo_layer = ""; // 보드 레이어 임시저장 변수


echo "<table width='200' height='{$gr_height}' cellspacing='0' cellpadding='5' border='0' bordercolor='#33CCFF' bgcolor='#33ccff'><tr>\n";

//그룹 사이 구분셀 보여주려면
$line_shadow = "<td width='1' bgcolor='#33ccff'></td>\n";
echo $line_shadow; // 첫 구분선

// 그룹 접근 권한에 따라 그룹메뉴 보이기 여분필드 gr_1 순으로 정렬
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_1";
// 제외그룹설정 root님
//$sql = " select * from $g4[group_table] where gr_id not in ('etc', 'link') order by gr_1";

$result = sql_query($sql);
while ($row=mysql_fetch_array($result)) {
{
//그룹링크
$gr_href = "<a href='#' class='menu_top' onfocus='this.blur()'>$row[gr_subject]</a>";
$gr_href_on = "<a href='#' class='menu_top_on' onfocus='this.blur()'>$row[gr_subject]</a>";
// 그룹별 보드 표시
$bo_layer = "";
$m_over = "";
$m_out  = "";
$menulayer_id  = "";

// 게시판 목록보기 권한설정순 정렬
$sql2 = " SELECT bo_subject, bo_table from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') order by bo_order_search ";
$result2 = sql_query($sql2);
for ($j=0; $row2=mysql_fetch_array($result2); $j++) {
$bo_layer .= "<tr height='$bo_layer_tr_height'><td style='border-bottom-width:1;border-bottom-color:#dddddd;border-bottom-style:dotted;'>";
if ($row2[bo_table] == $bo_table)
$bo_layer .= "&middot; <a href='$g4[bbs_path]/board.php?bo_table=$row2[bo_table]' class='menu_top_on' onfocus='this.blur()'>$row2[bo_subject]</a></td></tr>";
else
$bo_layer .= "&middot; <a href='$g4[bbs_path]/board.php?bo_table=$row2[bo_table]' class='' onfocus='this.blur()'>$row2[bo_subject]</a></td></tr>";
}
mysql_free_result($result2);
if ($bo_layer) {
$m_over = "menulayer_{$row[gr_id]}.style.display=''; ";
$m_out  = "menulayer_{$row[gr_id]}.style.display='none'; ";
$menulayer_id  = "menulayer_{$row[gr_id]}";
}

if ($row[gr_id] == $ca_id)
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='menu_top_on'>$gr_href_on</td>\n";
else
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='menu_top'>$gr_href</td>\n";
//echo $line_shadow;
}
// 보드 레이어 위치 설정
//$pos = $bo_layer_top + ($bo_layer_tr_height);
//$pos = $bo_layer_top + ($bo_layer_tr_height * ($i-100));
if ($bo_layer) {
//echo "<td>";absolute
echo "<td>";
echo "<div id='{$menulayer_id}' style='margin-top:{$bo_layer_top}px; margin-left:{$bo_layer_left}px; width:{$bo_layer_width}px; display:none; position:absolute;'>";
echo "<table border=0 cellpadding=1 cellspacing=0 bgcolor=#4B4B4B width=100% onmouseover=$m_over onmouseout=$m_out><tr><td>";
echo "<table border=0 width=100% bgcolor=#FFFFFF>$bo_layer</table>";
echo "</td></tr></table>";
echo "</div>";
echo "</td>\n";
//echo "</td></tr><tr>\n";
}
}
echo "</tr></table>\n";

mysql_free_result($result);
?>
수고 많으셨습니다.
링크를 보니 메뉴는 문제없이 잘 적용하신것 같습니다.
그룹과 그룹사이 간격을 조절하는 방법은 여러가지가 있겠지만,
if ($row[gr_id] == $ca_id)
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='menu_top_on'>$gr_href_on</td>\n";
else
echo "<td width=70 align='center' onmouseover=$m_over onmouseout=$m_out height='$gr_height' class='menu_top'>$gr_href</td>\n";
에서 셀 너비를 늘려주면 간격이 확보될듯합니다.
이 메뉴와 관련해서 문제가 있다면 제게 쪽지주시기 바랍니다.

추가로 링크의 최신글 '도원이가 있는 풍경, 공부합시다'등을 보면
최신글이 너비값을 갖지못하고 세로로 길게 떨어집니다.(파이어폭스)
소스를 보니 최신글 스킨의 테이블이 깨어진것 같습니다.
참고하셔서 수정하셔야 할것 같습니다.
플록님 감사합니다. 완전 초보라 이해 바랍니다. 셀 너비를 어떻게 늘려주어야 되는지 위의 소스로 예를 하나 부탁드립니다.

그리고 최신글 테이블 깨어진것 ... 잘은 모르지만 열심히 들어다보고, 수정하다가 잘 안되면 문의할께요.

아무튼 감사드립니다.
플록님 욕심이 생기는데 그누보드 탑에서의 메뉴처럼 그룹별 라인하구, 마우스 롤오버 칼라 바꾸는 현상은 어떻게 해야되는지요.

http://www.sir.co.kr/bbs/tb.php/g4_tiptech/1015 소스를 알려주얻 모르는 초보라
플록님 바쁘시겠지만 부탁드립니다.
파이어폭스에서 테이블이 깨어진 현상 잡았습니다.
플록님 사실전은 파이어폭스도 몰랐는데 님 덕분에 파이어폭스를 알게되었구, 이제는 테스트도 여러군데로 해야되게 되었네요.
가족홈피를 올해는 꼭 만들어서 좋은 자료(미국생활 관련-여기 미국온지 4년 되어, 한국에서 몰랐던 또는 잘못알고있는 것들을 올리려고 해요)와 가족이 보다 많은 커뮤니케이션을 보관하구 싶어요.
플록님 상단 자동 메뉴가 마음처럼 디자인되지 않는데 도와주세요....

감사합니다
최근에 작업한 CSS스타일 메뉴입니다.
기능은 같고 테이블 태그를 쓰지않고 스타일시트로 구현된 것이 특징입니다.
다른곳은 손대지 마시고 아래 <style>로 시작된 부분에 간략한 주석을 달았으므로 적절히 수정하면서 보여지는 형태를 조절해보세요.
일단 전체메뉴와 그룹메뉴 테두리를 1로 설정된 상태입니다.
일일이 모두 설명 드리는것보다,
이곳 '팁&강좌'에 있는 스타일시트(CSS) 도움말 파일을 내려받아 속성을 키워드로 검색해가면서 참고하시면 도움이 되실겁니다.

앞으로 작업을 하다보면 테이블로 레이아웃을 작성하는것에 한계를 느끼게 될것입니다.
CSS는 반드시 익혀야할 필수적인 부분이므로 겸사겸사해서 공부삼아 구현해 보시면 많은 도움이 될것입니다.

충분히 숙지하시고 잘 안되는 부분이 있다면 코멘트 주시기 바랍니다.
이메뉴가 http://phosay.com/g4/?gur=gallery 맨위에 달려있으므로 참고하세요.

메뉴의 호출방법 - 메뉴를 보여줄 위치에 적절히 수정해서 불러옵니다.
    <!-- top menu -->
    <div style='
    width:900;
    position:absolute; top:0; left:0;
    border: 0px solid silver;
    background-color:gray;
    float:left;
    padding:0 0 0 0;
    z-index:50;
    '>
    <? include_once("경로/_phosay_gh_bv_css.php"); ?>
    </div>


여기서 부터 _phosay_gh_bv_css.php 메뉴 전체 소스입니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
/////////////////////////////////////////////////////////////////////
// FF,msie호환 그룹 및 게시판 자동메뉴 - 플록
// CSS로 구현 그룹 및 게시판의 수직,수평 배열의 융통성 확보

//global start
echo "<div id='global'>\n";
    //접근가능그룹 여분필드 1 순서로 추출
    $sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_1";
    $result = sql_query($sql);
    for ($i=0; $row=sql_fetch_array($result); $i++){
    //group
    echo "<div id='group'>\n";
    if ($row[gr_id] == $gur) {// 해당 그룹 스타일 및 링크
        echo "<span class='group_subject' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\"><a href='$g4[bbs_path]/group.php?gr_id=$row[gr_id]' class='on' >$row[gr_subject]</a></span>\n";
    } else { // 그외 그룹 스타일 및 링크
        echo "<span class='group_subject' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\"><a href='$g4[bbs_path]/group.php?gr_id=$row[gr_id]' class='off' >$row[gr_subject]</a></span>\n";
    }

    //board
    echo "<div id='$row[gr_id]' class='board' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\">\n";
    //게시판 권한 설정 적용, 전체 검색사용에 체크된 게시판만 검색순서에 따라 추출
    $sql1 = " select bo_subject, bo_table from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') and bo_use_search = '1' order by bo_order_search";
    $result1 = sql_query($sql1);
    for ($i1=0; $row1=sql_fetch_array($result1); $i1++) {
        //해당 게시판일때 스타일 적용
        if ($row1[bo_table] == $bo_table){
            echo "<span class='board_subject'><a href='$g4[bbs_path]/board.php?bo_table=$row1[bo_table]' class='on'>$row1[bo_subject]</a></span>\n";
        }else{ //나머지 게시판의 스타일
            echo "<span class='board_subject'><a href='$g4[bbs_path]/board.php?bo_table=$row1[bo_table]' class='block'>$row1[bo_subject]</a></span>\n";
        }

    }
    echo "</div>\n"; //board end
    echo "</div>\n"; //group end
}
echo "</div>\n"; // global menu end
echo "<div style='clear: both;'></div>"; // 메뉴끝 줄 바꿈, 겹치기 방지
?>

<script language="JavaScript">
function getObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4. pearly님 공개 소스코드
    if(document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId);
    }
    else if (document.all && document.all(objectId)) {
    return document.all(objectId);
    }
    else if (document.layers && document.layers[objectId]) {
    return document.layers[objectId];
    } else {
    return false;
    }
}

function show(id) {
getObject([id]).style.visibility="visible";
}

function hide(id) {
getObject([id]).style.visibility="hidden";
}
</script>


<style>
/*여기서부터 시각적인 부분에 대한 수정을 해봅니다.
아래 소스에서 float, width 처럼 파란색으로 보여지는 속성을 키워드로
CSS 도움말 파일(팁&강좌에 있음)에서 검색해보면서 해당속성에 대한 옵션을 익힙니다.*/

#global { /*전체메뉴 가장자리를 감싸는 영역*/
float:left;/*왼쪽정렬*/
width:100%;/*너비 필요시 300px 혹은 300 처럼 픽셀로 지정가능*/
height:28px;/*메뉴 전체높이*/
margin:0 0 0 0; /*외부여유 - 시계방향 top, right, bottom, left 공통*/
padding:0 0 0 20;/*내부여유*/
border-width:1 1 1 1;/*테두리 두께*/
border-style:solid;/*테두리 스타일 dotted등 여러 스타일을 줄수있음*/
border-color:white/*테두리 색상 #000000처럼 주어도 무방*/;
background-color:transparent/*배경 색상 마찬가지*/;
position:relative;/*absolute; top:22; left:0; 상대,절대위치 설정 - 이곳 메뉴에서는 그대로 두고 메뉴를 불러오는 문서에서 전체 위치를 잡아주면 됩니다*/
}

#group { /*그룹메뉴 영역- 그룹제목에 테두리를 주고싶다면 border-width:1 1 1 1; */
float:left;
width:70; overflow:visible;/*그룹메뉴 너비, overflow:visible; 내용이 넘칠경우 영역을 밀어내며 표시됨 - 그외 여러옵션이 있음*/
height:25px;
padding:0 0 0 0;
border-width:1 1 1 1;
border-style:solid;
border-color:white;
background-color:transparent; /*배경투명*/
position:relative; top:0; left:0;
}
.group_subject { /*그룹제목 스타일*/
padding-top:5px;
color:silver;
font-weight:bold;
height:25px;
text-align:center;
cursor:pointer;
display:block;
}

.board { /*게시판 레이어 영역 z-index 상위 호출문서 에서 지정*/
border-width:1 1 1 1;
border-style:solid;
border-color:gray;
background-color:silver; 
padding:2 0 1 0;
visibility:hidden;
position:absolute; top:22; left:0;
}

.board_subject { /*게시판 제목 스타일*/
height:15px;
width:100px;
padding:6 0 2 10;
border-bottom-width:1;
border-bottom-color:#dddddd;
border-bottom-style:dotted;
display:block; /*포인터 영역 확대*/
}

a.block { /*게시판 제목 링크 스타일*/
width:100%; /*block 설정시 너비 빼먹으면 msie에서 안먹힘*/
height:100%;
display:block; /*포인터 영역 확대*/
}

a.on:link, a.on:visited, a.on:active { /*해당 그룹 강조*/
color:darkblue;
}
a.on:hover { /*마우스를 올렸을때 폰트 및 배경색상*/
color:#4B4B4B;
background-color:white;
padding:5 5 2 5;
}
a.off:link, a.off:visited, a.off:active { /*일반 그룹*/
color:silver;
}
a.off:hover { /*마우스를 올렸을때 폰트 및 배경색상*/
color:#4B4B4B;
background-color:white;
padding:5 5 2 5;
}
</style>
플록님 너무나 감사드립니다.
자세한 설명 너무 감사드립니다. 오늘 부터 css 입문합니다.
수정하여 보고 또 찾아오겠습니다.

감사합니다
플록님
http://www.sarang-online.info/gnuboard4/ 에 적용했습니다. 그런데

}
.group_subject { /*그룹제목 스타일*/
padding-top:5px;
color:silver;
font-weight:bold;
height:25px;
text-align:center;
cursor:pointer;
display:block;
}

}
a.off:hover { /*마우스를 올렸을때 폰트 및 배경색상*/
color:#4B4B4B;
background-color:white;
padding:5 5 2 5;
}
에서 padding 값으로 한참을 씨름하다가 질문하기로 했습니다.
그룹 TEXT를 padding 값으로 말구 상하 가운데로 오도록 할수없을까요
text-align:center; 이면서 valign="middle" 같은 것.
CSS 문구에서 찾아보았는데 제가 못 찾은것 같아요
혹 다른 것이 있다면 알려주세요

감사합니다
그룹은 여분필드 1에 입력한 숫자로 정렬되고, 게시판은 검색순서에 입력한 숫자로 정렬됩니다.
마우스를 올렸을때 그룹 div 영역 위쪽으로 확장되는 부분은
현재 상태에서 group_subject에
margin-top:10;정도 주시던가,
position:relative; top:얼마; left:얼마; 식으로 조절해보세요.
참고로 #group이 #global에 종속되듯이
position:relative;는 상위요소에 종속된 상태위치 즉 여기서는 #group에 종속된 위치에 자리하게 된다는 예기입니다.
하나의 결과를 얻는 방법은 다양하므로 연구해 보시기 바랍니다.

수직정렬에 대한 중요한 부분을 지적하셨는데요,
valign="middle"같은 역할은 vertical-align: middle; 입니다.
다만 제가 알기로 현재까지 NN(넷스케이프 네비게이터)계열에서는 이속성이 이미지에 한하여 먹힌다는 슬픈현실? 로 알고있습니다.
아무튼 CSS에서 단순정렬보다 속성값을 정확히 입력해서 위치를 제어하는 최소한의 노력은 해야합니다.

저역시 CSS에 관심을 가지고 있고 가급적 활용해보려는 초보에 불과합니다.
http://phosay.com/g4/ 하위에 세개의 그룹메인에서 소스보기를 해보시면 썸네일 영역의 표를 제외하고 대부분 CSS를 사용해보고 있습니다. 연습 및 적용에 참고하시기 바랍니다.

참고로 코딩을
<!-- top menu -->
    <div style='
    width:900;
    position:absolute; top:0; left:0;
    border: 0px solid silver;
    background-color:gray;
    float:left;
    padding:0 0 0 0;
    z-index:50;
    '><? include_once("$gnusr[_comm]/_phosay_gh_bv_css.php"); /**/?>
    </div>
이런 방식으로 페이지 해당위치에 해보는 것은 좀도 효과적인 공부를 위한 방법이며,

숙지 되면 스타일시트 파일을 분리해서 링크하고
#top{
  width:900;
    position:absolute; top:0; left:0;
    border: 0px solid silver;
    background-color:gray;
    float:left;
    padding:0 0 0 0;
    z-index:50;}

 해당위치에는 id값을 넣어주는 방법으로 정리하면 될것입니다.
<div id='top'><? include_once("$gnusr[_comm]/_phosay_gh_bv_css.php"); ?></div>

같은 형태가 중복되는 경우에는 당연히 위 방법을 사용해서 간결하게 구성할수 있습니다.

오늘은 시작하시기 전에 clear:both; 한번 찾아보시고 시작해보세요,,
<div style='clear:both;'></div>
감사합니다. 그림파일 첨부를 할 수가 없어서 메일로 문의 드립니다.
어느새 플록님은 제 싸부가 되어버렸네요.
감사드립니다.
//그림] 001_02.jpg는 padding:0으로 하면 롤오버시 바탕 칼라는 먹는데, 글자가 상단에 치우치게 되어서....
//알려주신 vertical-align:middle; 값을 적용하지만 먹지가 않는데...

vertical-align:middle;은 잘 안된다고 말씀드린것이구요.

메일에서 두번째 그림 처럼 padding:0으로 하셨다면 .group_subject에 padding-top:5;를 주면 그룹 이름이 아래로 조금 내려오겠네요.

메뉴에 너무 집중하실 필요는 없을듯합니다.
참고로 배경에 이미지를 불러들이는 방법등 응용의 폭은 무궁무진 합니다.
전체적으로 CSS스타일을 이해하는것을 우선으로 하시고
좀던 진전된 다음에 이뿌게 데코레이션해도 늦지않을것입니다.

clear 에 대한 레퍼런스를 보면,
- float 속성으로 좌우측에 정렬된 요소가 있을 때의 처리 방식을 지정합니다.
  clear:both; 는 떠있는(floating) 요소가 왼쪽과 오른쪽에 위치할 수 없도록 지정합니다.
  따라서 요소가 새로운 줄에서 시작됩니다.

위치제어에 필요한 요소이고 간과하면 각 요소들이 겹치는등 단순한 속성이지만
각 요소 배치에 중요하기에 한번 찾아서 보시라고 드린 말씀입니다.

ps)

추가로 그룹 메뉴 영역에만 마우스 이벤트를 추가하는 스크립트를 써도 됩니다.

    //group
    echo "<div id='group' onMouseOver='this.style.backgroundColor=\"white\"' onMouseOut='this.style.backgroundColor=\"silver\"'>\n";

그리고 위 전체소스에서 누락된 부분으로,
해당 그룹 강조부분에 미쳐 수정되지 않은 부분도 아래처럼 바꿔 주셔야 적용됩니다.

    //if ($row[gr_id] == $gur) {// 해당 그룹 스타일 및 링크
    if ($row[gr_id] == $gr_id) {// 해당 그룹 스타일 및 링크

ps2)

예상 질문 관련 미리 올립니다.^^

그룹링크에 연결된 group.php에서 게시판을 세로 두줄로 나열하는 소스를 아래 올려놓았습니다.
bbs/group.php 백업후 group.php로 저장해서 테스트 해보세요.
소스내 최신글 스킨은 개인에 맞게 수정해야합니다.
http://gnusr.com/g4/bbs/tb.php/work/237

이제 그만 놀고 일하러 가야겠습니다.
플록님 너무나 감사드립니다
위의    echo "<div id='group' onMouseOver='this.style.backgroundColor=\"white\"' onMouseOut='this.style.backgroundColor=\"silver\"'>\n";
 수정으로 해결했습니다.

이제 메뉴에서 잠시 손을.. 님 이야기처럼 다른것을 해봐야겠습니다.
님의 테스트 갤러리에 우측에 메뉴 명칭은 잘 모르겠고 우측에 붙어서 왔다 갔다하는 메뉴 탐이 나내요..
열심히 공부해야겠습니다.

무지에서 조금이나마 플록님이 있어 매우 반갑습니다.

감사합니다.
전체 0 |RSS
그누4 팁자료실 내용 검색
  • 개별 목록 구성 번호 제목 작성자 작성일 추천 조회
  • 게시물이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT