그누보드용, 이미지를 사용하지 않은 css3 가로 메뉴 > 그누4 플러그인

그누4 플러그인

그누보드에는 여러가지 기능 추가가 쉽도록 제작 되었습니다.
플러그인의 저작권은 해당 플러그인 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
플러그인 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

그누보드용, 이미지를 사용하지 않은 css3 가로 메뉴 정보

그누보드용, 이미지를 사용하지 않은 css3 가로 메뉴

첨부파일

menu.php (7.3K) 297회 다운로드 2012-10-06 20:17:31

본문

스킨 자료실에 훌륭한 가로 메뉴 플러그인 들이 있길래 저도 호기심에 한번 다른 디자인에 붙여 보았습니다.

일단 디자인은 http://webdesignerwall.com 에 올라왔던 이미지를 사용하지 않는 css3 드롭다운 메뉴를 그대로 사용했구요. 출처는 아래의 링크를 참조하시면 되겠습니다.
http://webdesignerwall.com/tutorials/css3-dropdown-menu

기능적인 요소는
처음엔 東問西答 님의 CSS 가로메뉴 ( http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=134800 ) 를 보고나서,
다시 시하님의 카테고리 지원하는 상단 자동 메뉴의 소스를 거의 그대로 사용했습니다.
( 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 )

첫번째 이미지가 적용된 모습이고, 두번째 이미지는 CSS3 호환 브라우저와 호환되지 않는 브라우저에서 각각 어떻게 보이는지를 보여주는 원 출처의 스크린샷 이미지 입니다.


사용하실 때는 head.sub.php에서  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">

그 다음엔 그누보드 설치 경로 같은 곳에 올리시고 head.php 같은 곳에 아래 처럼 한번 인클루드 해주시면 됩니다.
<? include_once("$g4[path]/menu.php"); ?>


* 원래 시하님의 카테고리 지원 스킨에는 각 게시판의 여분필드 10 값을 읽어서 메뉴의 링크로 사용하는 기능이 있었습니다만, 마침 테스트하던 게시판이 그 필드를 사용하는 게시판이어서 주석처리를 했습니다. (원래는 게시판이 아닌 페이지로의 링크를 구상하셨던 것 같네요.) 그 기능을 사용하시려면 바로 윗줄과 대치해서 사용하시면 됩니다.
* 편이상 menu.php 한 파일에 스타일시트도 포함시켰는데요. 소스가 지저분하다고 생각하시면 별도의 파일로 뽑아내셔도 좋을 것 같습니다.
추천
4

댓글 전체

전체 3,524 |RSS
그누4 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT