CSS 가로 메뉴 정보
달력 CSS 가로 메뉴첨부파일
본문
- 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 -
다운 받으시고 '좋아요'를 잊으신 분께는 행운의 편지가 발송 될 수도 있습니다...ㅡ.,ㅡㅋ
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
21
댓글 전체
굳.. 제가 작업한거랑 비슷하네요 ㅜㅜ
수고하셨습니다. 선추해요.
good!!!
감사합니다!!!
일단 ㅊㅊ
수고하셨습니다.
머찌십니다.
좋아요
감사합니다..
좋아요~ 잘쓸께요~
좋으네요.. 감사히 잘 쓸께요
감사합니다.
좋아요. ^^
잘 써볼께요~
감사합니다.
잘쓸께요
초보적 질문입니다.
위에 설명대로 그대로 설치했는데, 메뉴 그룹의 연결은 잘되는데,
모든 하위 메뉴의 링크가 '/bbs/root' 로 잘못 연결됩니다.
어디가 잘못된 건지 알 수 없어서...HELP ME!!!
소스는 아래와 같음...
$bLink = (!empty($rowb['bo_10']))?$rowb['bo_10']:$g4[path].'/bbs/'.'board.php?bo_table=' .$rowb['bo_table']; //게시판 링크
위에 설명대로 그대로 설치했는데, 메뉴 그룹의 연결은 잘되는데,
모든 하위 메뉴의 링크가 '/bbs/root' 로 잘못 연결됩니다.
어디가 잘못된 건지 알 수 없어서...HELP ME!!!
소스는 아래와 같음...
$bLink = (!empty($rowb['bo_10']))?$rowb['bo_10']:$g4[path].'/bbs/'.'board.php?bo_table=' .$rowb['bo_table']; //게시판 링크
euc-kr에서는 사용이 불가능한건가요? ㅜㅜ
감사합니다아주 잘쓸꼐요
감사합니다 대박자료
감사합니다. 잘 쓰겠습니다.^^
감사합니다
메뉴