이전 자동메뉴와 기능은 똑같습니다.

이전 자동메뉴에 코멘트로 붙여놓았으나 스크롤 압박때문에 잘 못찾으시는지 가끔 물어보시는 경우가 있어 따로 올립니다.

그룹에 속한 게시판이 하나도 없을때 스크립트에러 나는문제 때문에 pearly님 스크립트 사용해서 수정했습니다.

이메뉴가 http://phosay.com/g4/?gur=gallery 맨위에 달려있으므로 참고하세요.

메뉴의 호출방법 - 메뉴를 보여줄 위치에 적절히 수정해서 불러옵니다.
    <!-- top menu -->
    <div style='
    width:900;
    position:absolute; top:0; left:0;
    border: 0px solid silver;
    background-color:gray;
    float:left;
    padding:0 0 0 0;
    z-index:50;
    '>
    <? include_once("경로/_phosay_gh_bv_css.php"); ?>
    </div>


여기서 부터 _phosay_gh_bv_css.php 메뉴 전체 소스입니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
/////////////////////////////////////////////////////////////////////
// FF,msie호환 그룹 및 게시판 자동메뉴 - 플록
// CSS로 구현 그룹 및 게시판의 수직,수평 배열의 융통성 확보

//global start
echo "<div id='global'>\n";
    //접근가능그룹 여분필드 1 순서로 추출
    $sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_1";
    $result = sql_query($sql);
    for ($i=0; $row=sql_fetch_array($result); $i++){
    //group
    echo "<div id='group'>\n";
    if ($row[gr_id] == $gr_id) {// 해당 그룹 스타일 및 링크
        echo "<span class='group_subject' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\"><a href='$g4[bbs_path]/group.php?gr_id=$row[gr_id]' class='on' >$row[gr_subject]</a></span>\n";
    } else { // 그외 그룹 스타일 및 링크
        echo "<span class='group_subject' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\"><a href='$g4[bbs_path]/group.php?gr_id=$row[gr_id]' class='off' >$row[gr_subject]</a></span>\n";
    }

    //board
    echo "<div id='$row[gr_id]' class='board' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\">\n";
    //게시판 권한 설정 적용, 전체 검색사용에 체크된 게시판만 검색순서에 따라 추출
    $sql1 = " select bo_subject, bo_table from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') and bo_use_search = '1' order by bo_order_search";
    $result1 = sql_query($sql1);
    for ($i1=0; $row1=sql_fetch_array($result1); $i1++) {
        //해당 게시판일때 스타일 적용
        if ($row1[bo_table] == $bo_table){
            echo "<span class='board_subject'><a href='$g4[bbs_path]/board.php?bo_table=$row1[bo_table]' class='on'>$row1[bo_subject]</a></span>\n";
        }else{ //나머지 게시판의 스타일
            echo "<span class='board_subject'><a href='$g4[bbs_path]/board.php?bo_table=$row1[bo_table]' class='block'>$row1[bo_subject]</a></span>\n";
        }

    }
    echo "</div>\n"; //board end
    echo "</div>\n"; //group end
}
echo "</div>\n"; // global menu end
echo "<div style='clear: both;'></div>"; // 메뉴끝 줄 바꿈, 겹치기 방지
?>

<script language="JavaScript">
function getObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4. pearly님 공개 소스코드
    if(document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId);
    }
    else if (document.all && document.all(objectId)) {
    return document.all(objectId);
    }
    else if (document.layers && document.layers[objectId]) {
    return document.layers[objectId];
    } else {
    return false;
    }
}

function show(id) {
getObject([id]).style.visibility="visible";
}

function hide(id) {
getObject([id]).style.visibility="hidden";
}
</script>


<style>
/*여기서부터 시각적인 부분에 대한 수정을 해봅니다.
아래 소스에서 float, width 처럼 파란색으로 보여지는 속성을 키워드로
CSS 도움말 파일(팁&강좌에 있음)에서 검색해보면서 해당속성에 대한 옵션을 익힙니다.*/

#global { /*전체메뉴 가장자리를 감싸는 영역*/
float:left;/*왼쪽정렬*/
width:100%;/*너비 필요시 300px 혹은 300 처럼 픽셀로 지정가능*/
height:28px;/*메뉴 전체높이*/
margin:0 0 0 0; /*외부여유 - 시계방향 top, right, bottom, left 공통*/
padding:0 0 0 20;/*내부여유*/
border-width:1 1 1 1;/*테두리 두께*/
border-style:solid;/*테두리 스타일 dotted등 여러 스타일을 줄수있음*/
border-color:white/*테두리 색상 #000000처럼 주어도 무방*/;
background-color:transparent/*배경 색상 마찬가지*/;
position:relative;/*absolute; top:22; left:0; 상대,절대위치 설정 - 이곳 메뉴에서는 그대로 두고 메뉴를 불러오는 문서에서 전체 위치를 잡아주면 됩니다*/
}

#group { /*그룹메뉴 영역- 그룹제목에 테두리를 주고싶다면 border-width:1 1 1 1; */
float:left;
width:70; overflow:visible;/*그룹메뉴 너비, overflow:visible; 내용이 넘칠경우 영역을 밀어내며 표시됨 - 그외 여러옵션이 있음*/
height:25px;
padding:0 0 0 0;
border-width:1 1 1 1;
border-style:solid;
border-color:white;
background-color:transparent; /*배경투명*/
position:relative; top:0; left:0;
}
.group_subject { /*그룹제목 스타일*/
padding-top:5px;
color:silver;
font-weight:bold;
height:25px;
text-align:center;
cursor:pointer;
display:block;
}

.board { /*게시판 레이어 영역 z-index 상위 호출문서 에서 지정*/
border-width:1 1 1 1;
border-style:solid;
border-color:gray;
background-color:silver;
padding:2 0 1 0;
visibility:hidden;
position:absolute; top:22; left:0;
}

.board_subject { /*게시판 제목 스타일*/
height:15px;
width:100px;
padding:6 0 2 10;
border-bottom-width:1;
border-bottom-color:#dddddd;
border-bottom-style:dotted;
display:block; /*포인터 영역 확대*/
}

a.block { /*게시판 제목 링크 스타일*/
width:100%; /*block 설정시 너비 빼먹으면 msie에서 안먹힘*/
height:100%;
display:block; /*포인터 영역 확대*/
}

a.on:link, a.on:visited, a.on:active { /*해당 그룹 강조*/
color:darkblue;
}
a.on:hover { /*마우스를 올렸을때 폰트 및 배경색상*/
color:#4B4B4B;
background-color:white;
padding:5 5 2 5;
}
a.off:link, a.off:visited, a.off:active { /*일반 그룹*/
color:silver;
}
a.off:hover { /*마우스를 올렸을때 폰트 및 배경색상*/
color:#4B4B4B;
background-color:white;
padding:5 5 2 5;
}
</style>