그누보드용, 이미지를 사용하지 않은 css3 가로 메뉴 정보
그누보드용, 이미지를 사용하지 않은 css3 가로 메뉴관련링크
첨부파일
본문
일단 디자인은 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
4
댓글 전체
good!!!
오. 역시!!
이제야 보았는데요 상당히 깔끔하네요.... 좋은 정보 감사합니다
좋네요.. 그림의 떡이지만..
