웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
메뉴 모듈 기능 조금 추가
2008.09.29 02:55
(라이센스는, 제로보드xe의 소스를 수정했으니 GPL2인지 3인지 잘 모르겠네요)
메뉴 모듈에 간단한 기능을 추가하였습니다.
menu.zip
간단한 설명
긴 설명
메뉴 모듈에 간단한 기능을 추가하였습니다.
menu.zip
간단한 설명
추가된 기능
![Picture 2-sk.png](/files/attach/images/121/295/320/017/Picture%202-sk.png)
어떻게 써요?
아래의 여러 페이지들은 모두 같은 레이아웃 파일에서 같은 설정을 사용하고 있습니다.
![Picture 7.png](/files/attach/images/121/295/320/017/Picture%207.png)
![Picture 6.png](/files/attach/images/121/295/320/017/Picture%206.png)
![Picture 5.png](/files/attach/images/121/295/320/017/Picture%205.png)
![Picture 4.png](/files/attach/images/121/295/320/017/Picture%204.png)
아래에 서브 매뉴 보이시죠?
![Picture 3.png](/files/attach/images/121/295/320/017/Picture%203.png)
이렇게 만들었습니다.
서브메뉴 이미지를 같이 사용하면 훨신 간단하게 레이아웃을 만들고 관리할 수 있습니다.
![Picture 3-sk2.png](/files/attach/images/121/295/320/017/Picture%203-sk2.png)
(사실 해당 홈페이지에서는 메인 이미지와 서브이미지를 반대로 사용한 경우도 있습니다)
![Picture 2-sk.png](/files/attach/images/121/295/320/017/Picture%202-sk.png)
어떻게 써요?
아래의 여러 페이지들은 모두 같은 레이아웃 파일에서 같은 설정을 사용하고 있습니다.
![Picture 7.png](/files/attach/images/121/295/320/017/Picture%207.png)
![Picture 6.png](/files/attach/images/121/295/320/017/Picture%206.png)
![Picture 5.png](/files/attach/images/121/295/320/017/Picture%205.png)
![Picture 4.png](/files/attach/images/121/295/320/017/Picture%204.png)
아래에 서브 매뉴 보이시죠?
![Picture 3.png](/files/attach/images/121/295/320/017/Picture%203.png)
이렇게 만들었습니다.
서브메뉴 이미지를 같이 사용하면 훨신 간단하게 레이아웃을 만들고 관리할 수 있습니다.
![Picture 3-sk2.png](/files/attach/images/121/295/320/017/Picture%203-sk2.png)
(사실 해당 홈페이지에서는 메인 이미지와 서브이미지를 반대로 사용한 경우도 있습니다)
긴 설명
왜 만들었나요?
이전 menu 모듈에서는 각 menu_item에 normal/hover/active 의 엘리멘트들이 하나만 등록될 수 있었습니다. 간단한 환경에서는 큰 문제 없이 사용 가능하였으나,
하나의 menu_item의 각 항목(normal/hover/active)별로 이미지가 하나만 더 있었다면 레이아웃을 제작할 때 훨신 더 편리했을 경우가 있었습니다.
그리하여 몇 번 고민 한 끝에 간단하게 menu 모듈을 수정하였습니다.
새롭게 추가 된 기능
크게 다른 내용은 없습니다만, normal_btn / hover_btn / active_btn 이외에 mini_normal_btn / mini_hover_btn / mini_active_btn이 추가 되었습니다. 이것으로 인하여, 각 메뉴 항목별로 두가지 종류의 그림을 (일반 그림과 서브메뉴로 쓰이게 될 그림)사용할 수 있게 되었습니다.
그리고 해당 컬럼의 추가를 관리 페이지에서 모듈 업데이트를 통해서 할 수 있게 menu.class.php파일도 수정하였습니다.
무엇을 할 수 있나요?
[그림]
제가 사용한 사이트를 보시면 이해하기 쉬울 것 입니다.
일반적인 사이트와 같이 주제별로 페이지가 나뉘어 져 있고, 각 페이지는 공통적인 레이아웃을 사용하였습니다. 다만 왼쪽에 해당 주제와 하부메뉴가 출력되는 형태이었습니다.
만약 레이아웃 윗쪽에 기본적으로 등장하는 메뉴와 다른 그림을 사용하려고 한다면, 각 페이지에 따로 넣어주어야 되고, 따로 관리되어 한 번에 관리하기 불편하였을 것 입니다.
하지만 이렇게 만들게 된다면 해당 레이아웃의 상단에는 일반 메뉴를 평소와 같이 출력하고, 죄측에는 서브메뉴로 사용할 이미지를(mini_normal_btn등)사용하면, 레이아웃 차원에서 한번에 관리할 수 있으며, 제로보드XE의 시스템에 익숙하지 않은 사용자들이 일일이 페이지를 수정하지 않아도 원하는 기본 디자인의 페이지를 쉽게 만들 수 있게 하였습니다.
상당히 많은 사이트에서 유사한 방식의 디자인/레이아웃(위쪽에 메인 메뉴, 좌측이나 우측에 다른 이미지를 사용하는 서브 메뉴)을 사용하고 있다는 점을 생각해 볼때 많은 사람들에게 유용할 자료라고 생각합니다.
이전 menu 모듈에서는 각 menu_item에 normal/hover/active 의 엘리멘트들이 하나만 등록될 수 있었습니다. 간단한 환경에서는 큰 문제 없이 사용 가능하였으나,
하나의 menu_item의 각 항목(normal/hover/active)별로 이미지가 하나만 더 있었다면 레이아웃을 제작할 때 훨신 더 편리했을 경우가 있었습니다.
그리하여 몇 번 고민 한 끝에 간단하게 menu 모듈을 수정하였습니다.
새롭게 추가 된 기능
크게 다른 내용은 없습니다만, normal_btn / hover_btn / active_btn 이외에 mini_normal_btn / mini_hover_btn / mini_active_btn이 추가 되었습니다. 이것으로 인하여, 각 메뉴 항목별로 두가지 종류의 그림을 (일반 그림과 서브메뉴로 쓰이게 될 그림)사용할 수 있게 되었습니다.
그리고 해당 컬럼의 추가를 관리 페이지에서 모듈 업데이트를 통해서 할 수 있게 menu.class.php파일도 수정하였습니다.
무엇을 할 수 있나요?
[그림]
제가 사용한 사이트를 보시면 이해하기 쉬울 것 입니다.
일반적인 사이트와 같이 주제별로 페이지가 나뉘어 져 있고, 각 페이지는 공통적인 레이아웃을 사용하였습니다. 다만 왼쪽에 해당 주제와 하부메뉴가 출력되는 형태이었습니다.
만약 레이아웃 윗쪽에 기본적으로 등장하는 메뉴와 다른 그림을 사용하려고 한다면, 각 페이지에 따로 넣어주어야 되고, 따로 관리되어 한 번에 관리하기 불편하였을 것 입니다.
하지만 이렇게 만들게 된다면 해당 레이아웃의 상단에는 일반 메뉴를 평소와 같이 출력하고, 죄측에는 서브메뉴로 사용할 이미지를(mini_normal_btn등)사용하면, 레이아웃 차원에서 한번에 관리할 수 있으며, 제로보드XE의 시스템에 익숙하지 않은 사용자들이 일일이 페이지를 수정하지 않아도 원하는 기본 디자인의 페이지를 쉽게 만들 수 있게 하였습니다.
상당히 많은 사이트에서 유사한 방식의 디자인/레이아웃(위쪽에 메인 메뉴, 좌측이나 우측에 다른 이미지를 사용하는 서브 메뉴)을 사용하고 있다는 점을 생각해 볼때 많은 사람들에게 유용할 자료라고 생각합니다.
태그 연관 글
- [2018/11/15] 묻고답하기 메시지 모듈 삭제후 계속 나타나는 태그
- [2017/03/09] 묻고답하기 list.html에서 letter-spacing 수정 문의드립니다 *2
- [2017/01/12] 묻고답하기 admin 페이지 메뉴 오류 *2
- [2016/10/13] 묻고답하기 어드민 페이지 메뉴 *2
- [2016/03/25] 묻고답하기 레이아웃에서 변수선언시 모듈에서의 이용 *3
댓글 23
제목 | 글쓴이 | 날짜 |
---|---|---|
아이디/비번 찾기 메일 깨지는 현상 해결 [3] | 짱돌의세상 | 2007.11.06 |
UTF-8과 Euc-kr 동시에 사용하기 [10] | 써니a | 2007.11.05 |
도메인 연결시에 화면 깨짐/스크롤시 화면 깨짐 간단해결법.
[4]
![]() | YdoubleU | 2007.11.05 |
제로보드xe 연동 프리하드2 설치방법 [8] | hoaopoyoy | 2007.11.03 |
IE6 메인화면 밀리는 문제...우연히 해결...^^ | 김태상473 | 2007.11.03 |
메뉴에 "회원 정보 보기" 걸기. [4] | font | 2007.11.03 |
백지화면이 뜰때는~ | 하나로45 | 2007.11.02 |
apmsetup5를 이용한 zbxe 설치 및 복구 [2] | 무도사 | 2007.11.02 |
랜덤으로 (최근) 게시물 추출하기.. [13] | 지허 | 2007.11.02 |
설치확인 후 빈오류창뒤 다시 처음화면으로 넘어갈때...
[1]
![]() | 지연아빠 | 2007.11.01 |
댓글 입력폼이 너무 무겁게 느껴질때 [2] | 비지니스 | 2007.10.31 |
로그인/로그아웃 화면 첨부합니다. 이미지 변경법좀 ...
[1]
![]() | 홍제헌 | 2007.10.30 |
게시판 상단의 css 옆의 마크 안나오게 하는방법좀 알려주세여!
[4]
![]() | 홍제헌 | 2007.10.30 |
IIS 5.x 6.0 에서 PHP 성능을 높여보자... | 핑크플로이드 | 2007.10.30 |
ZBXE용 도쿠위키 연동소스 코드 [7] | 베니 | 2007.10.29 |
게시판 정렬순서 오름차순 내림차순 옵션 만들기 [1] | 지허 | 2007.10.29 |
달력으로 게시판 글 검색하기(블로그 말고)
[4]
![]() | 핑크플로이드 | 2007.10.27 |
(글) 서명 높이 줄이고 스크롤바 생성 [4] | Simulz | 2007.10.26 |
(글) 등록 시간을 변경해 봅시다.
[4]
![]() | Simulz | 2007.10.26 |
게시물 작성시 날짜 지정하기
[14]
![]() | JAMSUN2 | 2007.10.24 |