네개의 탭마다 각각 다른 최신글 메뉴(최신글3, 보드목록1) 너비 175 정보
네개의 탭마다 각각 다른 최신글 메뉴(최신글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 = " <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>
추천
0
0
댓글 14개
좋은 팁이네요.....감사합니다..
멋진 팁이네요.
메뉴가 많을경우 안성맞춤입니다.
일단 저장해 놓습니다.
감사합니다.
메뉴가 많을경우 안성맞춤입니다.
일단 저장해 놓습니다.
감사합니다.
나중에 클럽에서 쓰면 멋지겠습니다. 감사합니다. ㅎ
Myth님 바다님 hanpedro님 감사합니다.
뉴스사이트에 적용하려고 찾던중 유용하겠다 싶어 정리해본 메뉴입니다.
mon.js에서 '//모서리 둥근 테이블' 하위 관련 스크립트는
_tab_menu.php에서 최상위 테이블의 둥근모서리를 위한 것으로 필요치 않으시면 벗겨내셔도 무방합니다.
최신글 스킨 역시 취향에 맞는 것으로 바꿔쓰셔도 좋겠습니다.
그리고 각종 class값 엮시 개인에 맞게 바꿔주시고요.
..나름대로 소스에 군기를 잡는편인데 실력이 일천한 관계로 고수님들께서 보시면 어떨까 싶습니다.
뉴스사이트에 적용하려고 찾던중 유용하겠다 싶어 정리해본 메뉴입니다.
mon.js에서 '//모서리 둥근 테이블' 하위 관련 스크립트는
_tab_menu.php에서 최상위 테이블의 둥근모서리를 위한 것으로 필요치 않으시면 벗겨내셔도 무방합니다.
최신글 스킨 역시 취향에 맞는 것으로 바꿔쓰셔도 좋겠습니다.
그리고 각종 class값 엮시 개인에 맞게 바꿔주시고요.
..나름대로 소스에 군기를 잡는편인데 실력이 일천한 관계로 고수님들께서 보시면 어떨까 싶습니다.
좋은팁 감사합니다. ^^
++++_tab_menu.php 에서 해당그룹 $gr_id 설정법 좀 자세히 갈켜주세요....게시판 3개 + 최신글은 잘 표현되나 해당그룹의 게시판이 링크되지 않는데 그룹명이 만약 free 라면 어디를 바꿔야 할 찌를 전혀 감 잡을 수 없습니다.....초초보의....간절한..... 부탁~~~~
$sql = " select gr_id, gr_subject from $g4[group_table] where gr_id = '$ca_id'"; 에서
$ca_id를
$gr_id로 대체하시면 메뉴가 놓여있는 그룹의 게시판들이 로드됩니다.
일반페이지 또는 특정 그룹의 게시판을 불러오려면 직접 그룹이름(free)을 대입하면 됩니다.
$ca_id를
$gr_id로 대체하시면 메뉴가 놓여있는 그룹의 게시판들이 로드됩니다.
일반페이지 또는 특정 그룹의 게시판을 불러오려면 직접 그룹이름(free)을 대입하면 됩니다.
네개의 탭마다 각각 다른 최신글 메뉴(최신글3, 보드목록1) 너비 175
멋지네요..수고하셨습니다
오호...
이렇게 깜찍한 내용이 있었네요~*
gnu3.xx 버전에서 잠깐 사용했던,
까만도둑님의 팁(게시판만 적용)을
g4에 끌어와 봤는데~*^^*
이렇게 깜찍한 내용이 있었네요~*
gnu3.xx 버전에서 잠깐 사용했던,
까만도둑님의 팁(게시판만 적용)을
g4에 끌어와 봤는데~*^^*
고맙습니다 ^^
아... 이 팁을 다시 보게 되다니...
멋진 팁인데 아직 적용도 못해보고 있는 팁*^^*
멋진 팁인데 아직 적용도 못해보고 있는 팁*^^*
감사합니다^^
좋은팁 잘봤습니다.
