웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
|웹폰트(네이버 맑은 고딕, 나눔고딕) 적용하기 [1] | 다큰왕자 | 2014.03.18 |
호환성보기 명령어 모음 | 다큰왕자 | 2014.03.17 |
아이피, 도메인 차단하는 방법 | ByteCMC | 2014.03.16 |
모바일 웹 팁 | natureweb | 2014.03.13 |
css3를 이용한 button 입니다. | Ansi™ | 2014.03.13 |
XE 업로드 먹통시 1.7.8 버전 - 추가로 질문포함. [1] | artsmi.myid.net | 2014.03.12 |
관리자 비밀번호 분실시 phpmyadmin을 이용하여 재설정하는 방법 [6] | elancer | 2014.03.11 |
폰갭 처리시 뒤로가기 종료 처리 방법 | 웹빌드 | 2014.03.11 |
XE 어플 개발시 키보드위에 입력창 올리기 [4] | 웹빌드 | 2014.03.11 |
사이트접속시 모바일기기 접속이면 설정한 페이지로 이동시키기 | 홈피닥터 | 2014.03.09 |
홈페이지 주소창 상세 링크 안보이게 설정 | 헤이즈디자인 | 2014.03.09 |
xp어플 개발시 사진 회원 바로잡아 주는 함수 | 웹빌드 | 2014.03.09 |
게시판에 대해 닉네임,이름 등의 정렬을 추가하는 방법 [1] | sejin7940 | 2014.03.09 |
게시판 접속시에 첫(제일 최근) 게시물이 보여지게 하기 [16] | foret | 2014.03.08 |
날짜를 출력하는 간단한 소스입니다 | 낮은자 | 2014.03.07 |
[jQuery] 클릭하면 내용이 사라지는 방법 | 낮은자 | 2014.03.07 |
[초보]자신의 컴퓨터에 서버설치
[2]
![]() | 낮은자 | 2014.03.07 |
중국대륙 IP 차단방법 [5] | 낮은자 | 2014.03.07 |
한글, 영문, 숫자, 특수문자 체크하는 함수 | ByteCMC | 2014.03.07 |
자주 쓰이는 정규표현식 모음 | 투니페이퍼 | 2014.03.06 |