[수정]연후하은아빠님의 CSS 메뉴를 수정했습니다.

*** 2012년 2월 27일 오후 7:45 수정했습니다. 이전의 버그를 잡고 또 스크린 크기에 따라 자동적으로 스크린 갭을 맞추어 부메뉴가 등장하도록 수정했습니다. 이전에 받으신 분들은 다시 받으시기 바랍니다. ***

연후하은아빠님께 먼저 감사의 말을 드립니다. 그런데 연후하은아빠님의 스킨이 이뻐보여 쓰려고 했는데 생각과는 다르게 고정식이고 또 소스를 보니 서브메뉴가 잘못되어 나오길래 원하는 형태로 바꾸어보았습니다. jquery를 이용하여 상메뉴에 마우스를 가져가면 서브메뉴가 자동적으로 그 아래 위치하도록 보여지도록 했습니다. 또한 메뉴설정도 데이터베이스에서만 가져오는 것이 아니라 가변적으로 설정할 수 있도록 했습니다. 또한 소스를 최대한 정리해서 보기 좋게 했습니다.

압축푼 파일을 그누보드가 설치된 폴더에 푼 후 적절한 위치에서 <?php include $g4['path'].'/topmenu.skin.php';?>이런식으로 하면 됩니다.


===============
사 용 법:
===============

1. PHP 변수
===========

먼저 메뉴를 형성한다. $menus에 원하는 메뉴의 값을 넣어준다. 형식은 다음과 같다.

$menus[] = array('text'=>'menu_1', 'href=>'#', 'sub'=>array(
array('text'=>'submenu_1', 'href'=>'#'),
array('text'=>'submenu_2', 'href'=>'#'),
array('text'=>'submenu_3', 'href'=>'#')
)
);
만일 서브 메뉴가 없다면 'sub'=>null 이렇게 잡아준다.

또한 데이터베이스에서 가져오길 원한다면 text와 href를 모두 *로 값을 준다. 다음과 같이 정한다.
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);

예)
만일 맨처음을 '홈으로' 메뉴를 만들고 그 다음에 데이터 베이스를 넣어주며
맨마지막 메뉴에는 데이터베이스에서 가져오는 것이 아니라 따로 만들기 원해서 '소식란'을 만들고
그 부메뉴로 '국내뉴스', '해외뉴스'이런식으로 한다면 다음과 같이 할 수 있다.

$menus[] = array('text'=>'홈으로', 'href'=>'#', 'sub'=>null);
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);
$menus[] = array('text'=>'소식란', 'href'=>'#',
'sub'=>array(
array('text'=>'국내뉴스', 'href'=>'#'),
array('text'=>'해외뉴스', 'href'=>'#')
)
);

이렇게 하면 메뉴가 아주 유동적으로 원하는 방식으로 그리고 데이터베이스에서 가져올 수 있다.

메뉴와 부메뉴 모두 데이터베이스에서 가져오는 경우 현재의 gr_id와 bo_table에 맞추어 메뉴와 부메뉴가 select된다. 그러나 임으로 만든 메뉴들은 선택이 되지 않는다. 그래서 얻어오는 변수가 두 종류가 있다. $curr_menu_group과 $curr_menu_sub 이 두 변수의 값이 주어지면 select가 된다.

예를 들어 위의 '소식란'과 '해외뉴스'가 현재 페이지고 메뉴에서 활성화시키려면 다음처럼 변수에 값을 주어 넘기면 topmenu.skin.php에서 처리한다:
$curr_menu_group = '소식란';
$curr_menu_sub = '해외뉴스';


2. javascript 변수
==================

javascript변수에서 수정이 필요한 것은 다섯 가지가 있다.

maxUlEndPos는 서브메뉴가 우측으로 너무 넘어가지 않도록 하기 위해 값을 준다.
만일 메뉴가 많은 경우 서브메뉴가 우측으로 넘어가버릴 수 있다. 그것을 방지하기 위해 서브메뉴가 위치할 부분의 너비의 최대값이 요구된다. 여기서 사용된 메뉴바의 크기가 1000이므로 940을 주었다. 직접 확인을 하면서 최대값을 주면 될 것 같다.

minLeft는 반대로 첫번째 메뉴의 서브메뉴가 좌측으로 너무 가지 않도록 하기 위한 것이다. 현재는 0 값을 주었다. 이것도 직접해보면서 정하여 최소값을 주면 된다.

sep_icon_width은 각 메뉴 사이를 분리하는 이미지의 크기를 말한다. 혹 다른 이미지로 교체하여 크기가 달라졌을 경우 사용한다. 현재 크기는 2이다.

IEgap은 IE에서의 화면 출력이 chrome이나 다른 브라우져에 비해 차이가 난다. 그것을 보상하기 위한 값이다. 현재 14를 주었다. 이것 역시 직접해서 확인을 해보면 될 것 같다.

마지막으로 screenGap은 전체적으로 서브메뉴가 틀어질 경우 사용한다. 현재는 브라우져의 크기에 따라 실행시 자동적으로 맞추도록 되어있기 때문에 특별히 쓸 일이 없을 것같다.