링크
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 (1103) http://webdesignerwall.com/tutorials/css3-dropdown-menu (2161)
스킨 자료실에 훌륭한 가로 메뉴 플러그인 들이 있길래 저도 호기심에 한번 다른 디자인에 붙여 보았습니다.
일단 디자인은 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 한 파일에 스타일시트도 포함시켰는데요. 소스가 지저분하다고 생각하시면 별도의 파일로 뽑아내셔도 좋을 것 같습니다.
일단 디자인은 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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 14021 | |
| 14002 | |
| 13901 | |
| 13880 | |
| 13878 | |
| 13867 | |
| 13863 | |
| 13851 | |
| 13845 | |
| 13844 | |
| 13837 | |
| 13829 | |
| 13825 | |
| 13812 | |
| 13802 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기