카테고리 가로형 + 레이어

   
   조회 5380  

오늘 하루종일 작업한-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, 지금 만나요
해외직구는 롯데카드해외직구몰
롯데카드 해외직구몰 OPEN! 입점기념 추가 캐시백, 몰테일 배송비 즉시할인까지!
믿고 맡겨주세요! 도비US!
구매대행 전문, 누구나 쉽고 편리하고 이용하기 쉬운 도비US! 믿고 맡겨주세요!
파워링크 AD   클릭초이스등록
눈까리 2007-06
디자인 수정한다음에 영카트 팁에 살짝 해야겟어요 ^^
디자인은 거의안되있습니다.. 아예 안되있죠 -_-;; 저 스타일은 그냥 막 가져다 붙인거구요 ㅎㅎ;
알맞게 수정하신다음에 쓰셔용~

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

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


제목Page 1/5
2016-05   46766   불당
2015-05   81801   불당
2016-07   41862   불당
2014-05   102926   불당
06-02   6714   불당
2007-03   7610   불당
2007-05   7774   불당
2007-03   9470   불당
2014-10   2192   동행
2014-01   4024   불당
2014-01   3098   불당
2009-01   27   불당
2008-01   5263   푸름빠덜
2007-12   5720   강백호
2007-11   5090   푸름빠덜
2007-09   4342   푸름빠덜
2007-07   4287   푸름빠덜
2007-07   6129   푸름빠덜
2007-07   629   불당
2007-07   4978   불당
2007-07   4102   불당
2007-06   6368   푸름빠덜
2007-06   4761  
2007-06   5381  
2007-06   7739  
2007-06   3854   불당
2007-05   773   불당
2007-05   10616   불당