CSS 가로 메뉴 > 그누4 스킨

그누4 스킨

스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y
그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.

CSS 가로 메뉴 정보

달력 CSS 가로 메뉴

첨부파일

menu1.zip (8.5K) 1301회 다운로드 2012-10-03 08:55:34

본문

- CSS 가로 메뉴(UTF-8) -

1) 게시판 그룹별 가로 메뉴입니다. 게시판 그룹 단위로 생성된 게시판을 자동으로 불러오게 됩니다.
현재 사용자가 임의로 추가할 수 있는 메뉴 그룹 두 개가 샘플로 생성되어 있습니다.
필요 없을 경우 "menu.php" 파일에서 아래 예제의 주석으로 감싼 소스를 삭제하시면 출력되지 않으며, 사용자 추가 메뉴 그룹 설정은 "menu.php" 파일 상단에 주석으로 표시해 두었으므로 참고하셔서 추가 및 삭제하면 되겠습니다.

ex1: <!-- 사용자 추가 메뉴 그룹1 -->, <!-- //사용자 추가 메뉴 그룹1 -->
ex2: <!-- 사용자 추가 메뉴 그룹2 -->, <!-- //사용자 추가 메뉴 그룹2 -->


2) DTD를 선언하셔야 정상 작동합니다. 초기 작업시 IE6은 배제하고 작업되었으나, 혹여 IE6이 필요하신 분을 위해 비록 기본 디자인과는 다르게 표현되지만, IE6에서 출력되는 소스를 포함시켰습니다. IE6을 포함한 소스의 모습은 캡쳐 화면에서 두 번째 그림입니다.(※IE6을 포함한 소스의 관련 파일은 파일명 앞에 'ie6_' 이 붙어 있습니다.)
참고로 'IE6을 배제한 소스'와  'IE6을 포함한 소스'를 IE6에서 볼 때 차이점은 아래와 같으며, 그외 다른 브라우저에서는 동일하게 보입니다.

→ IE6을 포함한 소스:
  1. 소스 지저분함
  2. IE6에서 서브 메뉴 왼쪽 출력 위치 조절이 안 됨
  3. 마우스 오버시 글자 색상을 별도로 지정할 수 없음
  4. IE6에서 다른 브라우저와 달리 배경색 부분 높이가 길어지는 관계로 메뉴 배경색을 이미지로 처리함

→ IE6을 배제한 소스:
  1. 소스 덜 지저분함
  2. IE6에서 서브 메뉴 출력되지 않음


ex(DTD선언 예제):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">


3) 사용된 소스는 시하님의 "카테고리 지원하는 상단 자동메뉴" 소스를 차용하였습니다.
시하님 감사드립니다...(--)(__)

→ 소스 차용한 시하님 스킨: http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=111946&sca=&sfl=wr_subject%7C%7Cwr_content&stx=gnb&sop=and


4) 게시판을 여러 그룹으로 생성하지 않고 단일 그룹으로 생성하여 사이트를 운영하시는 분들을 위해 수동으로 메뉴 그룹과 서브 메뉴를 추가 및 삭제 할 수 있도록 "menu_user.php" 파일로 수동 그룹별 메뉴 파일을 함께 압축해 드렸습니다.
메뉴의 추가 및 삭제는 주석을 참고하시면 어렵지 않으리라 생각됩니다.(※샘플로 5개 그룹이 생성되어 있습니다) 사용방법은 "menu1" 폴더를 그누보드가 설치된 곳에 올리신 후 폴더 안에 있는 "menu.php" 파일 또는 "menu_user.php" 파일을 include로 호출하면 되겠습니다.

ex1: <?php include "$g4[path]/menu1/menu.php"; ?>
ex2: <?php include "$g4[path]/menu1/menu_user.php"; ?>


5) 캡쳐 화면은 색상을 달리하여 임의로 적용한 예제입니다. 현재 소스에 적용된 색상은 캡쳐 맨 위의 그림이며, 아래 예제를 참고하여 적절히 수정하면 되겠습니다.
참고로 'IE6을 포함한 소스'는 아래 예제에서 '$tnav_bg' 이 부분이 없으며 이미지로 배경색을 표현하도록 되어 있습니다.

→ 캡쳐용 출력 예제 디자인 소스(※캡쳐 화면에서 세 번째 예제):
$tnav_bg = '#000'; //메뉴 배경색
$tnav_sub_round = '#000'; //서브 메뉴 테두리 색상(※테두리를 없애려면 '#fff' 로 변경)
$tnav_main = array('20','#fff','#000'); //주 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상')
$tnav_sub = array('10','#000','#888','none'); //서브 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상','메뉴 마우스 오버시 밑줄 여부')

→ 캡쳐용 출력 예제 디자인 소스(※캡쳐 화면에서 네 번째 예제):
$tnav_bg = '#001070'; //메뉴 배경색
$tnav_sub_round = '#fff'; //서브 메뉴 테두리 색상(※테두리를 없애려면 '#fff' 로 변경)
$tnav_main = array('14','#fff','#001070'); //주 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상')
$tnav_sub = array('6','#001070','#f00','none'); //서브 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상','메뉴 마우스 오버시 밑줄 여부')
$sub_left = array('8','12','52','232'); //서브 메뉴 왼쪽 출력 위치(※게시판 그룹 수에 비례하여 style에 추가하여 사용하고 입력 순서는 순차적으로)

→ 캡쳐용 출력 예제 디자인 소스(※캡쳐 화면에서 다섯 번째 예제):
$tnav_bg = '#2865b0'; //메뉴 배경색
$tnav_sub_round = '#fff'; //서브 메뉴 테두리 색상(※테두리를 없애려면 '#fff' 로 변경)
$tnav_main = array('14','#fff','#2865b0'); //주 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상')
$tnav_sub = array('6','#2865b0','#000','underline'); //서브 메뉴 관련 설정(※입력 순서: '메뉴 좌우 여백','메뉴 색상','메뉴 마우스 오버시 색상','메뉴 마우스 오버시 밑줄 여부')
$sub_left = array('8','12','52','232'); //서브 메뉴 왼쪽 출력 위치(※게시판 그룹 수에 비례하여 style에 추가하여 사용하고 입력 순서는 순차적으로)


- WARNING -
다운 받으시고 '좋아요'를 잊으신 분께는 행운의 편지가 발송 될 수도 있습니다...ㅡ.,ㅡㅋ
추천
21
  • 복사

댓글 전체

초보적 질문입니다.

위에 설명대로 그대로 설치했는데, 메뉴 그룹의 연결은 잘되는데,

모든 하위 메뉴의 링크가 '/bbs/root' 로 잘못 연결됩니다.

어디가 잘못된 건지 알 수 없어서...HELP ME!!!

소스는 아래와 같음...

$bLink = (!empty($rowb['bo_10']))?$rowb['bo_10']:$g4[path].'/bbs/'.'board.php?bo_table=' .$rowb['bo_table']; //게시판 링크
© SIRSOFT
현재 페이지 제일 처음으로