네개의 탭마다 각각 다른 최신글 메뉴(최신글3, 보드목록1) 너비 175

특징:
우선 이미지를 사용하지 않아 썰렁합니다.
디자인 잘하시는 분들은 탭버튼등을 이미지로 대체하시면 됩니다.

네개의 특정탭 (기본적으로 세개의 게시판 최신글과 해당 그룹 보드목록이 올라옴-첨삭가능)을 갖는 메뉴세트입니다.
좁은 공간에서 유용하게 사용될 수 있습니다.
비슷한 기능의 메뉴가운데 불여우와 익스에서 마진값이 조금씩 다르게 먹히는 문제로 사용하지 못했는데,
이것은 레이어를 사용하지 않아 자연스럽게 원하는 위치에 넣을 수 있고 불여우, 익스에서 잘 작동합니다.
미리보기 http://montessori.pe.kr/g4/?ca_id=work

압축을 풀면 basic_sm 스킨 폴더와 mon.js, _tab_menu.php 세개의 파일이 있습니다.

1.mon.js 파일을 페이지 헤드에 불러들인다.
<script language="javascript" src="경로/mon.js"></script>
2._tab_menu.php 파일을 원하는 위치에 업로드한다.
3.원하는 위치에 경로에 맞게 다음과 같이 메뉴를 불러들인다.
<? include_once("경로/_tab_menu.php"); ?>
4._tab_menu.php 에 사용된 최신글 스킨(basic_sm)을 skin/latest 폴더에 업로드한다.

*** _tab_menu.php 에서 개인에 맞게 메뉴이름, 최신글 게시판, 해당그룹을 지정해주셔야 합니다.

ps) 고수님들께서 검토해보시고 조언해주신다면 고맙겠습니다.
디자이너 분들께서는 어디서 많이 본듯한 메뉴일지도 모르겠습니다.


+++++++++++++++++++++++++++mon.js+++++++++++++++++++++++++++
//Tab 메뉴를 위해
var hotCookieName = "tab_list";

function getStrCookie(sName)
{
// 쿠키읽기..
var aRec, aCook = document.cookie.split("; ");
for (var i=0; i<aCook.length; i++)
{
aRec = aCook[i].split("=");
if (sName.toLowerCase()==aRec[0].toLowerCase())
{
return aRec[1];
}
}
return "";
}

function setHotCookie (name, value)
{
document.cookie = name + "=" + escape( value ) + "; domain=.montessori.pe.kr; path=/;"
}

function funchotInit()
{
if ( getStrCookie( hotCookieName ) == "1" )
{
go_to_bbsList();
}
else if ( getStrCookie( hotCookieName ) == "2" )
{
go_to_galleryList();
}
else if ( getStrCookie( hotCookieName ) == "3" )
{
go_to_studyList();
}
else
{
go_to_pdsList();
}
}

function go_to_pdsList()
{
document.getElementById('bbs_div').style.display = "none";
document.getElementById('study_div').style.display = "none";
document.getElementById('gallery_div').style.display = "none";
document.getElementById('pds_div').style.display = "inline";
setHotCookie(hotCookieName,"0");
}

function go_to_bbsList()
{
document.getElementById('pds_div').style.display = "none";
document.getElementById('study_div').style.display = "none";
document.getElementById('gallery_div').style.display = "none";
document.getElementById('bbs_div').style.display = "inline";
setHotCookie(hotCookieName,"1");
}

function go_to_galleryList()
{
document.getElementById('pds_div').style.display = "none";
document.getElementById('bbs_div').style.display = "none";
document.getElementById('study_div').style.display = "none";
document.getElementById('gallery_div').style.display = "inline";
setHotCookie(hotCookieName,"2");
}

function go_to_studyList()
{
document.getElementById('pds_div').style.display = "none";
document.getElementById('bbs_div').style.display = "none";
document.getElementById('gallery_div').style.display = "none";
document.getElementById('study_div').style.display = "inline";
setHotCookie(hotCookieName,"3");
}


//모서리 둥근 테이블
function roundTable(objID) {
var obj = document.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;

// get parent node
Parent = obj.parentNode;
objTmp = document.createElement('SPAN');
Parent.insertBefore(objTmp, obj);
Parent.removeChild(obj);

// get attribute
bdcolor = obj.getAttribute('rborder');
bgcolor = obj.getAttribute('rbgcolor');
radius = parseInt(obj.getAttribute('radius'));
if (radius == null || radius < 1) radius = 1;
else if (radius > 6) radius = 6;

MAX = radius * 2 + 1;

/*
create table {{
*/
Table = document.createElement('TABLE');
TBody = document.createElement('TBODY');

Table.cellSpacing = 0;
Table.cellPadding = 0;

for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = document.createElement('TD');

styleWidth = '1px'; styleHeight = '1px';
if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
else if (radius > 2) {
if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
}

if (styleWidth != null) TD.style.width = styleWidth;
if (styleHeight != null) TD.style.height = styleHeight;

if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
else if (tdIDX > Space && Space < MAX - tdIDX - 1) TD.style.backgroundColor = bgcolor;

if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
TR.appendChild(TD);
}
TBody.appendChild(TR);
}

/*
}}
*/

Table.appendChild(TBody);

// insert table and remove original table
Parent.insertBefore(Table, objTmp);
}
//

+++++++++++++++++++++++++_tab_menu.php+++++++++++++++++++++++++

<?
/*최신글을 사용하는 메뉴이므로 반드시*/
$g4_path = "../..";
include_once("$g4[path]/lib/latest.lib.php");
?>
<div id='tab_list' onload="funchotInit();">
<table id="r_tb_tab_menu" radius="3" rborder="#F0F0F0" rbgcolor="transparent" width='175' height="" border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center' valign='top'>
<!-- 공백 --><div style='height:5px;'></div>
<!-- 그룹메뉴 -->
<div id=pds_div style='dispaly: inline'>
<table cellspacing=0 cellpadding=0 width=97% border=0>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_galleryList();' onfocus='this.blur()'>좋은엄마</A></td>
<td align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_studyList();' onfocus='this.blur()'>나눔터</A></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='tab_list_on'>그룹메뉴</td>
<td align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_bbsList();' onfocus='this.blur()'>질문/답변</A>
</td>
</tr>
</table>
</td>
</tr>

<tr><td height='5' bgcolor=''></td></tr>
<tr>
<td width='97%'>
<table width='100%' align="center" cellpadding=0 cellspacing=0 class=''style="background: #FFFFFF">
<?
$blue_bullet="<img src='$g4[path]/gnusr/images/bullets/icon_nemo.gif' align='middle'>";
$line_shadow = "<td height=1 background='$g4[path]/gnusr/images/bg/line_shadow01.gif'></td></tr>";
$sql = " select gr_id, gr_subject from $g4[group_table] where gr_id = '$ca_id'";//해당그룹 $gr_id
$result = sql_query($sql);
while ($row=mysql_fetch_array($result)) {
//제외보드설정
$sql2 = " select * from $g4[board_table]
where gr_id = '$row[gr_id]'
and bo_table <> ''
and bo_table <> '제외보드2'
order by bo_subject ";
$result2 = sql_query($sql2);
$bar = "";
while ($row2=mysql_fetch_array($result2)) {
$new_time = date("Y-m-d H:i:s", time()-3600*$row2[bo_new]);
$sql3 = " select count(*) as cnt from $g4[write_prefix]$row2[bo_table] where wr_datetime >= '$new_time' ";
$row3 = sql_fetch($sql3);
if ($row3[cnt] > 0)
$new = "&nbsp;<img src='$g4[path]/gnusr/images/icon/icon_new.gif' border='0'>";
else
$new = "";
echo "<tr><td width=\"100%\" height='22' align='left' class='left_menu_btn'>";
echo "<a href='$g4[bbs_path]/board.php?bo_table=$row2[bo_table]' class='list_menu' onfocus='this.blur()'>$blue_bullet $row2[bo_subject]$new</a>";
echo "</td></tr>";
echo $line_shadow;
}
}
echo "</td></tr>";
?>
</table>
</td>
</tr>
</table>
</div>
<!-- /그룹메뉴 -->

<!-- qa -->
<div id=bbs_div style='display: none'>
<table cellspacing=0 cellpadding=0 width=97% border=0>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_galleryList();' onfocus='this.blur()'>좋은엄마</A></td>
<td align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_studyList();' onfocus='this.blur()'>나눔터</A></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_pdsList();' onfocus='this.blur()'>그룹메뉴</A></td>
<td align='center' class='tab_list_on'>질문/답변</td>
</tr>
</table>
</td>
</tr>

<tr><td height='5' bgcolor=''></td></tr>
<tr>
<td width='97%'>
<?=latest("basic_sm", qa, 10, 20);?>
</td>
</tr>
</table>
</div>
<!-- /qa -->

<!-- 좋은엄마 -->
<div id=gallery_div style='display: none'>
<table cellspacing=0 cellpadding=0 width=97% border=0>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='top_menu_btn tab_list'><A class='tab_menu' HREF='javascript:go_to_pdsList();' onfocus='this.blur()'>그룹메뉴</A></td>
<td align='center' class='top_menu_btn tab_list'><A class='tab_menu' HREF='javascript:go_to_bbsList();' onfocus='this.blur()'>질문/답변</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='tab_list_on'>좋은엄마</td>
<td align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_studyList();' onfocus='this.blur()'>나눔터</a></td>
</tr>
</table>
</td>
</tr>

<tr><td height='5' bgcolor=''></td></tr>
<tr>
<td width='97%'>
<?=latest("basic_sm", my_mom, 10, 20);?>

</td>
</tr>
</table>
</div>
<!-- /좋은엄마 -->

<!-- 나눔터 -->
<div id=study_div style='display: none'>
<table cellspacing=0 cellpadding=0 width=97% border=0>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='top_menu_btn tab_list'><A class='tab_menu' HREF='javascript:go_to_pdsList();' onfocus='this.blur()'>그룹메뉴</A></td>
<td align='center' class='top_menu_btn tab_list'><A class='tab_menu' HREF='javascript:go_to_bbsList();' onfocus='this.blur()'>질문/답변</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td width='50%' align='center' class='top_menu_btn tab_list'><A class='tab_menu' href='javascript:go_to_galleryList();' onfocus='this.blur()'>좋은엄마</A></td>
<td align='center' class='tab_list_on'>나눔터</td>
</tr>
</table>
</td>
</tr>

<tr><td height='5' bgcolor=''></td></tr>
<tr>
<td width='97%'>
<?=latest("basic_sm",recycle, 10, 20);?>
</td>
</tr>
<tr>
</tr>
</table>
</div>
<!-- /나눔터 -->
<!-- 공백 --><div style='height:5px;'></div>
</td>
</tr>
</table>
<script>roundTable("r_tb_tab_menu");</script>
</div>