카테고리 가로형 + 레이어

   
   조회 5308  

오늘 하루종일 작업한-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");
?>
레이어 텐바이텐
감성디자인 텐바이텐이 추천하는 HOT상품 365일 특가 SALE, 지금 만나요
아동복 가을 신상 대량 입고
전상품 균일가 9900원 1+1 가을신상
지아미, 유아동 정장 패션
아동복, 자체제작, 남아 여아 정장, 세미정장-턱시도. 세일 최대 70% DC.
파워링크 AD   클릭초이스등록
눈까리 2007-06
디자인 수정한다음에 영카트 팁에 살짝 해야겟어요 ^^
디자인은 거의안되있습니다.. 아예 안되있죠 -_-;; 저 스타일은 그냥 막 가져다 붙인거구요 ㅎㅎ;
알맞게 수정하신다음에 쓰셔용~

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

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


제목Page 1/5
2015-09   63619   불당
2016-06   26695   불당
2016-05   28368   불당
2011-12   184602   불당
2015-09   60847   불당
2007-03   7898   불당
2007-03   7528   불당
2007-05   7685   불당
2014-10   2132   동행
2014-01   3942   불당
2014-01   3048   불당
2009-01   27   불당
2008-01   5190   푸름빠덜
2007-12   5660   강백호
2007-11   5011   푸름빠덜
2007-09   4290   푸름빠덜
2007-07   4234   푸름빠덜
2007-07   6049   푸름빠덜
2007-07   629   불당
2007-07   4890   불당
2007-07   4043   불당
2007-06   6247   푸름빠덜
2007-06   4692  
2007-06   5309  
2007-06   7672  
2007-06   3800   불당
2007-05   773   불당
2007-05   10200   불당