위 내용대로 적용을 해봤습니다.

이미지 리사이징 부분은 잘됩니다.

하지만,
각 게시판 글쓰기에서 회원 이름이 Array 로 입력되네요...

또한, 서브메뉴의 레이어 박스 크기가 고정되어 있어, 메뉴 갯수가 많은 그룹과 적은 그룹의 보여지는 부분에서 박스 크기를 메뉴 갯수에 맞추었으면 하는데,
좋은방법이 없을런지요..

이 메뉴 스킨에서 OnLoad 부분이 이미지 리사이즈와 관련되어 여러가지 적용하며 삽질중 입니다..^^

스크립트는 전무한 상태에서 접하다 보니 너무 어렵네요..

도움 부탁드립니다..^^

플록님의  gb_ypSlideRF.php에서 일부 수정된 내용입니다.
그룹괸리 gr_1 에 검색순서, gr_2에 메뉴링크를 적용했습니다..

==========================================================================

<? if (!defined("_GNUBOARD_")) exit;// gb_ypSlideRF.php - multi Style
##################################################################
# 라이브러리 - http://sir.co.kr/bbs/tb.php/g4_tiptech/5673 rolo님 라이센스(GNU General Public License)
# 라이브러리 및 스크립트의 라이센스 정책에 일치하는 경우에만 사용하십시오.
# ypSlideOutMenus.js 카피라이트와 gb_ypSlideRF.php 상단 주석 삭제금지
##################### by floc http://www.opensource.org/licenses/afl-2.0.php
 *
 * Revised:
 * - 08/29/2002 : added .hideAll()
 * - 04/15/2004 : added .writeCSS() to support more
 *                than 30 menus.
 *
 * --youngpup--
 *****************************************************/

ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 500//슬라이딩 속도 250
ypSlideOutMenu.hideDelay = 500//숨김 지연시간 1000
ypSlideOutMenu.minCPUResolution = 10//응답 감도 10

// constructor
function ypSlideOutMenu(id, dir, left, top, width, height)
{
    this.ie  = document.all ? 1 : 0
    this.ns4 = document.layers ? 1 : 0
    this.dom = document.getElementById ? 1 : 0
    this.css = "";

    if (this.ie || this.ns4 || this.dom) {
        this.id          = id
        this.dir        = dir
        this.orientation = dir == "left" || dir == "right" ? "h" : "v"
        this.dirType    = dir == "right" || dir == "down" ? "-" : "+"
        this.dim        = this.orientation == "h" ? width : height
        this.hideTimer  = false
        this.aniTimer    = false
        this.open        = false
        this.over        = false
        this.startTime  = 0

        // global reference to this object
        this.gRef = "ypSlideOutMenu_"+id
        eval(this.gRef+"=this")

        // add this menu object to an internal list of all menus
        ypSlideOutMenu.Registry[id] = this

        var d = document

        var strCSS = "";
        strCSS += '#' + this.id + 'Container { visibility:hidden; '
        strCSS += 'left:' + left + 'px; '
        strCSS += 'top:' + top + 'px; '
        strCSS += 'overflow:hidden; z-index:10000; }'
        strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
        strCSS += 'width:' + width + 'px; '
        strCSS += 'height:' + height + 'px; '
        strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
        strCSS += '}'

        this.css = strCSS;

        this.load()
    }
}

ypSlideOutMenu.writeCSS = function() {
    document.writeln('<style type="text/css">');

    for (var id in ypSlideOutMenu.Registry) {
        document.writeln(ypSlideOutMenu.Registry[id].css);
    }

    document.writeln('</style>');
}

ypSlideOutMenu.prototype.load = function() {
    var d = document
    var lyrId1 = this.id + "Container"
    var lyrId2 = this.id + "Content"
    var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
    if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
    var temp

    if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
    else {
        this.container  = obj1
        this.menu      = obj2
        this.style      = this.ns4 ? this.menu : this.menu.style
        this.homePos    = eval("0" + this.dirType + this.dim)
        this.outPos    = 0
        this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen

        // set event handlers.
        if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
        this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
        this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")

        //set initial state
        this.endSlide()
    }
}
   
ypSlideOutMenu.showMenu = function(id)
{
    var reg = ypSlideOutMenu.Registry
    var obj = ypSlideOutMenu.Registry[id]
   
    if (obj.container) {
        obj.over = true

        // close other menus.
        for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)

        // if this menu is scheduled to close, cancel it.
        if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }

        // if this menu is closed, open it.
        if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
}

ypSlideOutMenu.hideMenu = function(id)
{
    // schedules the menu to close after <hideDelay> ms, which
    // gives the user time to cancel the action if they accidentally moused out
    var obj = ypSlideOutMenu.Registry[id]
    if (obj.container) {
        if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
        obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
    }
}

ypSlideOutMenu.hideAll = function()
{
    var reg = ypSlideOutMenu.Registry
    for (menu in reg) {
        ypSlideOutMenu.hide(menu);
        if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
    }
}

ypSlideOutMenu.hide = function(id)
{
    var obj = ypSlideOutMenu.Registry[id]
    obj.over = false

    if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
   
    // flag that this scheduled event has occured.
    obj.hideTimer = 0

    // if this menu is open, close it.
    if (obj.open && !obj.aniTimer) obj.startSlide(false)
}

ypSlideOutMenu.prototype.startSlide = function(open) {
    this[open ? "onactivate" : "ondeactivate"]()
    this.open = open
    if (open) this.setVisibility(true)
    this.startTime = (new Date()).getTime()
    this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}

ypSlideOutMenu.prototype.slide = function() {
    var elapsed = (new Date()).getTime() - this.startTime
    if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
    else {
        var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
        if (this.open && this.dirType == "-")      d = -d
        else if (this.open && this.dirType == "+")  d = -d
        else if (!this.open && this.dirType == "-") d = -this.dim + d
        else                                        d = this.dim + d

        this.moveTo(d)
    }
}

ypSlideOutMenu.prototype.endSlide = function() {
    this.aniTimer = window.clearTimeout(this.aniTimer)
    this.moveTo(this.open ? this.outPos : this.homePos)
    if (!this.open) this.setVisibility(false)
    if ((this.open && !this.over) || (!this.open && this.over)) {
        this.startSlide(this.over)
    }
}

ypSlideOutMenu.prototype.setVisibility = function(bShow) {
    var s = this.ns4 ? this.container : this.container.style
    s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
    this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
    return parseInt(this.style[c])
}

// events
ypSlideOutMenu.prototype.onactivate    = function() { }
ypSlideOutMenu.prototype.ondeactivate  = function() { }

</script>

<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
        if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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];}}
}
function MM_swapImage() {
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<style type="text/css">
#globalMenu { /*메뉴 가장자리를 감싸는 영역*/
height:25px;
margin:0 0 0 0; /*시계방향 top, right, bottom, left 공통*/
padding:0 0 0 0;
border:0px solid white;
background-color:transparent;
position:relative;
}
#groupMenu { /*그룹메뉴 영역*/
float:left;
width:110px;
height:25px;
margin:0 0 0 0;
border-width:0 0 0 0 ;
border-style:/*dashed*/solid;
border-color:#FEFFED/*white*/;
background-color:transparent;
position:relative;
}
a.groupName { /*그룹제목 스타일*/
padding-top:5px;
color:green;
font-weight:bold;
height:25px;
text-align:center;
cursor:pointer;
display:block; /*포인터 영역 확대*/
}

/*각 그룹의 게시판 메뉴위치 relative */
#boardDiv {
  position:relative;
  }

.boardLayer { /*전체 게시판 레이어 영역*/
width:122px;
height:inherit;
border-top:1px solid orange;/*맨위 테두리만 여기서 설정*/
background-color:transparent;/*배경색상으로 입체효과 가능 - 색상을 주어 서브메뉴의 영역 확인가능*/
z-index:999;
}

.boardSubject { /*각 게시판 제목 스타일*/
/*height:15px; */
width:120px;
/*각 영역에서 나머지 테두리는 여기서 설정 ?=>FF*/
border-right:1px solid orange;
border-bottom:1px solid orange;
border-left:1px solid orange;
background-color:white; 
padding:3 0 1 0;
margin-bottom:0px;/*각 영역사이 마진 - 입체감을 주러면 줘보라*/
}

a.boardName { /*게시판 제목 링크 스타일*/
width:120px; /*block 설정시 너비 빼먹으면 msie에서 안먹힘*/
padding-left:10px;
font:12px 굴림;
display:block; /*포인터 영역 확대*/
}
/*현재 사용 안 함*/
a.on:link, a.on:visited, a.on:active { /*해당 그룹 강조*/
color:#45436c;
}
a.on:hover { /**/
color:orange;
}
a.off:link, a.off:visited, a.off:active { /*일반 그룹*/
color:green;
}
a.off:hover { /**/
color:orange;
}
</style><?
if ($is_admin == 'super') {
$menu_order = '400' ;
} else if ($member[mb_level] >= 8) {
$menu_order = '300' ;
} else {
$menu_order = '100' ;
}
// rolo님 메뉴스킨 라이브러리 참조, 일반적인 조건으로 쿼리
// 그룹 정렬 - gr_1 오름 차순
// 제외 그룹 - 접근사용 yes, 게시판이 없는 그룹, 제외 게시판만 있는 그룹
// 게시판 정렬 - 전체 검색 오름 차순
// 제외 게시판 - 전체 검색 사용 no, 목록열람 레벨

$list = array();

// 위 에서 명시한 그룹외에 제외시키고자 하는 그룹을 수동으로 추가
$exc = "('그룹아이디1', '그룹아이디2', '그룹아이디3')";

$sql= "select G.gr_id, G.gr_2, G.gr_subject, B.bo_table, substring_index( bo_subject, ';', 1) bo_subject from $g4[group_table] G inner join $g4[board_table] B using (gr_id)  where G.gr_1 > 0 and G.gr_id not in {$exc} and B.bo_order_search < $menu_order order by bo_order_search ";

$result = sql_query($sql);

for ($i=0; $row = sql_fetch_array($result); $i++) {
        $list[$row['gr_id']]['gr_subject'] = $row['gr_subject'];
      $list[$row['gr_id']]['gr_2'] =  "$g4[bbs_path]/board.php?bo_table=$row[gr_2]" ;
$list[$row['gr_id']]['gr_id'] = $row['gr_id'];//id값 활용을 위한 테스트 라인
$list[$row['gr_id']]['bbs'][] = array( 'bo_table'=> $row['bo_table'], 'bo_subject'=>$row['bo_subject']);
}

// 그룹별 서브메뉴 개별 환경설정시 아래를 반드시 참고해야 합니다.
// 다양한 옵션을 이용하려면 이 개별 환경설정을 사용해야 합니다.
// 1, 위 반복문의 첫줄 주석을 풀어줍니다.
// 2, 아래 세줄의 주석을 풀고 메뉴가 링크된 페이지로 가서 그룹 배열값을 얻는다.
//foreach( $list as $key => $value)
//$grId[] = $value['gr_id']; //분류 구분
//print_r2 ($grId);// 3, 이 줄과 반복문의 주석처리된 줄은 배열값을 얻은후 다시 주석처리 합니다.
?>
<script language="javascript">
//###### 그룹별 서브메뉴 개별 환경설정 시작
//# 일괄 환경설정시 모두 주석처리합니다.
// 4, 위에서 얻은 그룹 배열값을 참고해서 그룹별 서브메뉴의 시작위치,x좌표,y좌표,너비,높이만 설정
//  var <?=$grId[0]?> = new ypSlideOutMenu("<?=$grId[0]?>", "right", 0, 1, 122, 105)
//  var <?=$grId[1]?> = new ypSlideOutMenu("<?=$grId[1]?>", "up", 0, 1, 122, 147)
//  var <?=$grId[2]?> = new ypSlideOutMenu("<?=$grId[2]?>", "down", 0, 1, 122, 308)
//###### 개별 환경설정 끝

//###### 전체그룹 서브메뉴 일괄 환경설정 시작
//# 개별 환경설정시 모두 주석처리합니다.
//# 가장 넓고 높은 그룹을 기준으로 너비와 높이를 설정하면 됩니다.
//# 이경우 보이지 않는 이 영역에 마우스가 올라가 있으면 서브메뉴가 사라지지 않습니다.
//# 매우 귀찮거나 메뉴 크기가 크게 다르지 않을때, 테스트 외에는 권장하지 않는 방법입니다.
<?
//일괄설정
foreach( $list as $value) {
//------------------------- 서브메뉴 아이디,액션,x좌표,y좌표,너비,높이만 설정
?>
  var <?=$value['gr_id']?> = new ypSlideOutMenu("<?=$value['gr_id']?>", "down", 0, 2, 122, 400);
<?
}
?>
  ypSlideOutMenu.writeCSS();
</script><?

//$gBtnpath = "이미지 폴더 경로" ."/". "gBtn";/* 그룹 버튼 이미지 폴더 gBtn */
$gBtnpath = "$g4[path]/images/top_menu";/* 그룹 버튼 이미지 폴더 gBtn */
if (is_dir($gBtnpath)) {
?><div style="dispaly:none" onLoad="MM_preloadImages('<? foreach( $list as $key=> $value) { echo"{$gBtnpath}/{$key}_off','{$gBtnpath}/{$key}_on')";}?>"></div><?
}



// ## group
$menu_size= count( $list);
foreach( $list as $key=> $value) {

    ?><div id='groupMenu'><?
    if (!is_dir($gBtnpath)) {/* 이미지 폴더가 없다면 텍스트 스타일(기본) */
$gr_url = $value['gr_2'];
        $style = "";
        if ($key == $gr_id)//해당 그룹 강조
        $style = "style='font-weight:bold; color:#45436c;'";
        $gr_subject = "<span $style>" . cut_str(get_text($value['gr_subject']),20,"") . "</span>";

    ?><span id='<?=$key?>' class='grTsub'><a href='<?=$gr_url?>' onmouseover="ypSlideOutMenu.showMenu('<?=$key?>')" onmouseout="ypSlideOutMenu.hideMenu('<?=$key?>')" class='groupName'><?=$gr_subject?></a></span><?

    }
    else {
$gr_url = $value['gr_2'];
        /* 이미지 폴더가 있다면 이미지로 표시(옵션)
        * 기본 이미지 - 그룹아이디_1.gif *
        * 롤오버 이미지 - 그룹아이디_2.gif */
        ?><span id='<?=$key?>' class='grIsub'><a href='<?=$gr_url?>' onmouseover="ypSlideOutMenu.showMenu('<?=$key?>');" onmouseout="ypSlideOutMenu.hideMenu('<?=$key?>')" class='groupName'><?
        if ($key == $gr_id){//해당 그룹 표시
            ?><img src="<?=$gBtnpath?>/<?=$key?>_on" width="110" height="110" border=0 name="<?=$key?>" alt="<?=$key?>"></a></span><?
        }else{
            ?><img src="<?=$gBtnpath?>/<?=$key?>_off" width="110" height="110" border=0 name="<?=$key?>" alt="<?=$key?>"></a></span><?
        }
    }

    ?><div id='boardDiv'>
    <div id="<?=$key?>Container">
    <div id="<?=$key?>Content" class="boardLayer"><?
    // # board         
foreach( $value['bbs'] as $bbs) {   

        $style = "style='font-weight:bold;'";
        if ($bbs['bo_table'] == $bo_table)//해당 게시판 강조
$style = "style='font-weight:bold; color:red;'";
$bo_subject = "<span $style>" . cut_str(get_text($bbs['bo_subject']),20,"") . "</span>";

    ?><div class='boardSubject'><a href='<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bbs['bo_table']?>' class='boardName'><?=$bo_subject?></a></div><?

    }

    ?></div></div></div>
    </div><?// group end
}//foreach 주메뉴 끝
   
?></div><!-- global end -->
<div style='clear: both;'></div><!-- 메뉴끝 줄 바꿈, 겹침 방지 -->
<?//print_r2 ($list);?>

====================================================================
플로님이 알려주신 내용을 적용해 보니 잘 됩니다..^^

혹시 이상이 없는지 검토 부탁드립니다..^^

플록님께 감사드립니다..^^