카테고리 가로형 + 레이어

   
   조회 5457  

오늘 하루종일 작업한-0-? ㅋㅋ 녀석을 보여드립니다.
그누보드에서 보셨던 메뉴레이어 보셨죠??
가로형 카테고리에 적용해 보았습니다...
출력형식은 이런형식이며
 
1차는세로로(1)   2차가로(1-1), 2차가로(1-2)
1차는세로로(2)   2차가로(2-1), 2차가로(2-1)
 
여기서
2차에 마우스 오버시 그누보드(sir.co.kr)에서처럼 레이어로 출력됩니다.
 
<?
include_once("./_common.php");
include_once("$g4[path]/head.sub.php");
$select_caid = substr($ca_id,0,2);
$sql = " select ca_id, ca_name
           from $g4[yc4_category_table]
          order by ca_id asc ";
$result = sql_query($sql);
$now_tbl_caid = $select_caid; //이전 ca_id와 현재 ca_id비교
$first_cnt = 0; //1차 카테고리 카운트
$second_cnt = 0; //2차카테고리 카운트
$tbl_caid_arr = Array();  //실제적으로 사용하는 ca_id 배열
for($i=0; $row=sql_fetch_array($result); $i++){
    $caid_len = strlen($row[ca_id]);
    $tbl_caid = substr($row[ca_id],0,$caid_len-2);
    $tbl_caid_len = strlen($tbl_caid);
    $more = sql_fetch("select count(ca_id) as cnt from $g4[yc4_category_table] where ca_id like '$row[ca_id]%' and length(ca_id) > '$caid_len' ");
    if($caid_len==2){ //1차
        $first_menu[$first_cnt] = $row;
        $first_cnt++;
    }
    if($caid_len==4){ //2차
        if($now_tbl_caid != $tbl_caid) $second_cnt=0;
        else $second_cnt++;
        $second_menu[$tbl_caid][$second_cnt] = $row;
        if($more[cnt]>0) $second_menu[$tbl_caid][$second_cnt][more] = true;
        $now_tbl_caid = $tbl_caid;
    }
    if($caid_len>=4){//2차부터 레이어 적용
        if(!in_array("$tbl_caid", $tbl_caid_arr)) array_push($tbl_caid_arr, "$tbl_caid");
        $tbl_over = " onMouseover=\"clear_time('{$tbl_caid}_hide');";
        $tbl_out = " onMouseout=\"menu_hide('', '$tbl_caid', false);";
        if($caid_len>=6){//3차
            $caid_over = substr($tbl_caid,0,$tbl_caid_len-2);
            $tbl_over .= "clear_time('{$caid_over}_hide');";
            $tbl_out .= "menu_hide('', '$caid_over', false);";
            if($caid_len>=8){//4차
                $caid_over2 = substr($tbl_caid,0,$tbl_caid_len-4);
                $tbl_over .= "clear_time('{$caid_over2}_hide');";
                $tbl_out .= "menu_hide('', '$caid_over2', false);";
                if($caid_len==10){// 맥시멈 5차
                    $caid_over4 = substr($tbl_caid,0,$tbl_caid_len-6);
                    $tbl_over .= "clear_time('{$caid_over4}_hide');";
                    $tbl_out .= "menu_hide('', '$caid_over4', false);";
                }
            }
        }
        $tbl_over .= "\"";
        $tbl_out .= "\"";
        $td_over="";
        $td_out="";
        if($more[cnt] > 0){
            $td_over = "onMouseover=\"menu_show('s{$row[ca_id]}', '$row[ca_id]', true, 118, -6);\"";
            $td_out = "onMouseout=\"menu_hide('', '$row[ca_id]', true);\"";
        }
        $tbl[$tbl_caid][top] = "<table border=0 width=123 cellpadding=0 cellspacing=0 id='$tbl_caid'  style='margin-top:5px;display:none;position:absolute;border-top:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;' $tbl_over$tbl_out>\n";
        $tbl[$tbl_caid][middle] .= "<tr><td id='s{$row[ca_id]}' $td_over $td_out style='font:normal 11px 돋움; line-height:20px; color:#DFDFDF; padding-left:12px; background-color:#505050;'><span style='float:left;'>{$row[ca_name]}</span>".($more[cnt]>0?"<span style='float:right;'>></span>":"")."</a></td></tr>\n<tr><td height=1 bgcolor='#404040'></td></tr><tr><td height=1 bgcolor='#606060'></td></tr>\n";
    } //end if :$caid_len>6
} // end for : $row=sql_fetch_array($result)
for($i=0; $i<count($tbl_caid_arr); $i++){
    echo $tbl[$tbl_caid_arr[$i]][top];
    echo $tbl[$tbl_caid_arr[$i]][middle];
    echo "</table>\n";
}
?>
<!-- 1차 2차 출력 -->
<table width=80% cellpadding=0 cellspacing=0>
<col width=80><col width=''>
<?
for($i=0; $i<count($first_menu); $i++){
    echo "\n<tr>
              <td><a href='$g4[shop_path]/list.php?ca_id={$first_menu[$i][ca_id]}'>{$first_menu[$i][ca_name]}</a></td>
              <td align=left>\n<table border=0 width=100%><tr>
         ";
    $first_caid = $first_menu[$i][ca_id];
    for($j=0; $j<count($second_menu[$first_caid]); $j++){
        $table_over = "";
        $table_out = "";
        $menu_caid = $second_menu[$first_caid][$j][ca_id];
        if($second_menu[$first_caid][$j][more]){
            $table_over = " onmouseover=\"menu_show('m{$menu_caid}', '$menu_caid', true, 0, 20);\"";
            $table_out = " onmouseout=\"menu_hide('', '$menu_caid', true);\"";
        }
        echo "\n<td id='m{$menu_caid}'$table_over$table_out>{$second_menu[$first_caid][$j][ca_name]}</td>";
     }
    echo "\n</tr></table>\n</td></tr>\n";
}
?>
</table>
<script language='javascript'>
function MM_preloadImages() { var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i, j=d.MM_p.length, a= MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; } } }
var _st = new Array(); // save_time
// 브라우저에서 오브젝트의 왼쪽 좌표
function get_left_pos(element) {
    var parentelement = null;
    var childelement = element;
    var left = element.offsetLeft;
    while((parentelement = childelement.offsetParent) != null) {
        left = left + parentelement.offsetLeft;
        childelement = parentelement;
    }
    return left;
}
// 브라우저에서 오브젝트의 상단 좌표
function get_top_pos(element) {
    var parentelement = null;
    var childelement = element;
    var top = element.offsetTop;
    while((parentelement = childelement.offsetParent) != null) {
        top = top + parentelement.offsetTop;
        childelement = parentelement;
    }
    return top;
}
// p_id = parent element(id)
// c_id = child element(id)
function set_time(p_id, c_id, flag, x, y) {
    if (flag == 'show') {
        flag = '';
        document.getElementById(c_id).style.left = get_left_pos(document.getElementById(p_id)) + x;
        document.getElementById(c_id).style.top  = get_top_pos(document.getElementById(p_id))  + y;
    } else if (flag == 'hide') {
        flag = 'none';
    }
    document.getElementById(c_id).style.display = flag;
}
function clear_time(x) {
    clearTimeout(_st[x]);
}
function menu_show(p_id, c_id, clr, x, y) {
    if (clr) {
        clear_time(c_id+'_hide');
    }
    _st[c_id+'_show'] = setTimeout("set_time('"+p_id+"', '"+c_id+"', 'show', "+x+", "+y+")", 50);
}
function menu_hide(p_id, c_id, clr) {
    var visual = '';
    if (clr) {
        clear_time(c_id+'_show');
    }
    _st[c_id+'_hide'] = setTimeout("set_time('"+p_id+"', '"+c_id+"', 'hide')", 50);
    //selectBoxVisible();
}
function _box(cont) {
    document.write("<table width=100% align=center style='border: #eeeeee 3px solid' cellpadding=7 cellspacing=0 style='margin-top:0px;margin-bottom:7px;'>");
    document.write("<tr><td style='line-height:150%'>");
    document.write(cont);
    document.write("</td></tr>");
    document.write("</table>");
}
</script>
<?
include_once("$g4[path]/tail.sub.php");
?>
SBS아카데미컴퓨터학원정다움
겨울방학 특강 시간표, 얼리버드 등록 수강료 할인 이벤트 진행중! 레이어
레이어 텐바이텐
감성디자인 텐바이텐이 추천하는 HOT상품 365일 특가 SALE, 지금 만나요
아기물티슈 물따로물티슈
아기 피부에 화학물질 바르지 말고 물로 닦아주세요, 노케미컬 신생아 물티슈
파워링크 AD   클릭초이스등록
눈까리 2007-06
디자인 수정한다음에 영카트 팁에 살짝 해야겟어요 ^^
디자인은 거의안되있습니다.. 아예 안되있죠 -_-;; 저 스타일은 그냥 막 가져다 붙인거구요 ㅎㅎ;
알맞게 수정하신다음에 쓰셔용~

약간 변형하면 완전 1자형 카테고리+레이어가 됩니다 ^^
레이돌이 2007-06
와우~~ 넘 소중한걸 알려주시네요..

감사합니다~~ ^^
이동국 2007-09
디자인해서 올리면 멋있겠네요...너무 머리가 터질것 같습니다..여기와보고..


제목Page 1/5
2015-05   84561   불당
2015-09   69432   불당
2016-05   30850   불당
2014-05   106747   불당
2016-06   29082   불당
2007-03   7707   불당
2007-03   9573   불당
2007-03   8036   불당
2014-10   2273   동행
2014-01   4125   불당
2014-01   3168   불당
2009-01   27   불당
2008-01   5343   푸름빠덜
2007-12   5786   강백호
2007-11   5174   푸름빠덜
2007-09   4436   푸름빠덜
2007-07   4354   푸름빠덜
2007-07   6209   푸름빠덜
2007-07   629   불당
2007-07   5069   불당
2007-07   4170   불당
2007-06   6500   푸름빠덜
2007-06   4817  
2007-06   5458  
2007-06   7815  
2007-06   3921   불당
2007-05   773   불당
2007-05   11074   불당