XpressEngine과 관련된 팁이나 강좌를 소개하는 게시판입니다.
자신이 생각하기에는 아주 사소한 내용이라도 누군가에게는 큰 도움이 될 수 있습니다.
XE 원 소스 코드를 수정하는 팁은 당장은 도움이 될지 몰라도 결국 XE 업그레이드를 하지 못하게 되니 팁을 올리시는 분이나 팁을 적용하시는 분이나 모두 주의 부탁드립니다.
글 수 1,165
![[레벨:5]](http://www.xpressengine.com/modules/point/icons/default/5.gif "포인트:2770point (52%), 레벨:5/30"){kind=icon}
반도체맨(라이센스는, 제로보드xe의 소스를 수정했으니 GPL2인지 3인지 잘 모르겠네요)
메뉴 모듈에 간단한 기능을 추가하였습니다.
menu.zip
간단한 설명
긴 설명
메뉴 모듈에 간단한 기능을 추가하였습니다.
menu.zip
간단한 설명
추가된 기능
어떻게 써요?
아래의 여러 페이지들은 모두 같은 레이아웃 파일에서 같은 설정을 사용하고 있습니다.
아래에 서브 매뉴 보이시죠?
이렇게 만들었습니다.
서브메뉴 이미지를 같이 사용하면 훨신 간단하게 레이아웃을 만들고 관리할 수 있습니다.
(사실 해당 홈페이지에서는 메인 이미지와 서브이미지를 반대로 사용한 경우도 있습니다)
어떻게 써요?
아래의 여러 페이지들은 모두 같은 레이아웃 파일에서 같은 설정을 사용하고 있습니다.
아래에 서브 매뉴 보이시죠?
이렇게 만들었습니다.
서브메뉴 이미지를 같이 사용하면 훨신 간단하게 레이아웃을 만들고 관리할 수 있습니다.
(사실 해당 홈페이지에서는 메인 이미지와 서브이미지를 반대로 사용한 경우도 있습니다)
긴 설명
왜 만들었나요?
이전 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의 시스템에 익숙하지 않은 사용자들이 일일이 페이지를 수정하지 않아도 원하는 기본 디자인의 페이지를 쉽게 만들 수 있게 하였습니다.
상당히 많은 사이트에서 유사한 방식의 디자인/레이아웃(위쪽에 메인 메뉴, 좌측이나 우측에 다른 이미지를 사용하는 서브 메뉴)을 사용하고 있다는 점을 생각해 볼때 많은 사람들에게 유용할 자료라고 생각합니다.
-
- Picture 2-sk.png [File Size:141.4KB/Download:93]
- Picture 3-sk.png [File Size:164.3KB/Download:39]
- Picture 3.png [File Size:178.6KB/Download:31]
- Picture 4.png [File Size:170.8KB/Download:25]
- Picture 5.png [File Size:157.6KB/Download:20]
- Picture 6.png [File Size:157.6KB/Download:23]
- Picture 7.png [File Size:161.1KB/Download:25]
- Picture 3-sk2.png [File Size:179.1KB/Download:20]
- menu.zip [File Size:44.7KB/Download:350]
엮인글 '1'
http://www.xpressengine.com/17320295/0f1/trackback
제로보드 XE 모듈 기능 추가 - 메뉴 모듈 - Parker Falcon :: Grooving on the paper
메뉴 모듈의 기능을 몇 가지 추가하였습니다. 아래에 붉은색 테두리를 친 부분인데요, 활용 방법은 아래와 같습니다. 이렇게 하나의 메뉴 아이템으로 서브메뉴 이미지까지 처리할 수 있게 변경하였습니다. 원본 소스가 GPL이고, 이 개작도 GPL입니다. http://www.zeroboard.com/17320295
댓글 '23'
![[레벨:2]](http://www.xpressengine.com/modules/point/icons/default/2.gif "포인트:575point (47%), 레벨:2/30"){kind=icon}
닭장군
![[레벨:30]](http://www.xpressengine.com/modules/point/icons/default/30.gif "포인트:82280point, 레벨:30/30"){kind=icon}
비나무![[레벨:6]](http://www.xpressengine.com/modules/point/icons/default/6.gif "포인트:4090point (72%), 레벨:6/30"){kind=icon}
HomeBox™
네 설명이 많이 부족했습니다 ㅠㅠ
레이아웃에서 윗부분을 사용하실때는 보통 $menu['link']를 사용하셨습니다.
마찬가지로 서브메뉴 이미지가 필요하시다면 $menu['mini_link']를 사용하시면 됩니다.
좌측메뉴 $val[mini_link] 부분인 "유니안"을 표현하는 소스 부탁합니다.
이 부분은 감도 안옵니다. -_-;;
이 부분은 감도 안옵니다. -_-;;
에..뭐랄까 제로보드 기본 레이아웃에 보면
1.
처음에 상단 메뉴 출력하면서 선택된 메뉴만 따로 저장해 두는 부분이 생깁니다.
2.
그리고 왼쪽에 뿌리는 메뉴는 $menu_1st(지금은 유니안 이 menu_1st)를 가지고 이용하는데요.
ZBXE기본 스킨에서는 제목 없이 $menu_1st에 속해있는 서브 메뉴만 출력합니다.
3.
그러면 그 앞에 $menu_1st의 ['mini_link']를 넣어주면 됩니다.
1.
처음에 상단 메뉴 출력하면서 선택된 메뉴만 따로 저장해 두는 부분이 생깁니다.
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->2.
그리고 왼쪽에 뿌리는 메뉴는 $menu_1st(지금은 유니안 이 menu_1st)를 가지고 이용하는데요.
ZBXE기본 스킨에서는 제목 없이 $menu_1st에 속해있는 서브 메뉴만 출력합니다.
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
<!-- main_menu 3차 생략 -->
</li>
{@$idx++}
<!--@end--><!--@end-->3.
그러면 그 앞에 $menu_1st의 ['mini_link']를 넣어주면 됩니다.
{$menu_1st['mini_link']}
![[레벨:15]](http://www.xpressengine.com/modules/point/icons/default/15.gif "포인트:21250point (35%), 레벨:15/30"){kind=icon}
guny![[레벨:7]](http://www.xpressengine.com/modules/point/icons/default/7.gif "포인트:5000point (43%), 레벨:7/30"){kind=icon}
착한악마ㅡㅡ;;;조그만 더 친절해 주시만 알될까요...ㅜ,.ㅜ 잘 모르겠네요.적용을 해보려고 해도..
일단 메뉴 파일 은 모듈 폴더에 올리고 ...모듈에서 업데이트 하고.....
메뉴 가서 이미지 넣고 하는데.............................................자세한 그림과 친절한 설명이 자세히..나오면 좋겠습니다.
레이아웃에서도.......어떻게 바꾸는지.....어느부분을............초보에게는 너무 어렵습니다.................꼭..사용하고 싶은데.....
소스를 이곳 고치고 저곳 고치고 해서...................ㅎㅎㅎ 아니면 레이아웃 예시..파일이라도 있으면 좋겠네요...^^
그럼 좋은 팁 감사드리면서 다음 버전이 이기능이 추가 되었으면 하는 일인입니다....감사합니다..
일단 메뉴 파일 은 모듈 폴더에 올리고 ...모듈에서 업데이트 하고.....
메뉴 가서 이미지 넣고 하는데.............................................자세한 그림과 친절한 설명이 자세히..나오면 좋겠습니다.
레이아웃에서도.......어떻게 바꾸는지.....어느부분을............초보에게는 너무 어렵습니다.................꼭..사용하고 싶은데.....
소스를 이곳 고치고 저곳 고치고 해서...................ㅎㅎㅎ 아니면 레이아웃 예시..파일이라도 있으면 좋겠네요...^^
그럼 좋은 팁 감사드리면서 다음 버전이 이기능이 추가 되었으면 하는 일인입니다....감사합니다..
상기 팁을 100% 테스트할 수 있는 우야노님의 레이아웃 스킨에 적용한 파일을 첨부하니 테스트해 보십시오.
우야노님 1차메뉴에 따라다니는 2차메뉴 --> http://www.zeroboard.com/?mid=zbxe_user_tip&search_target=title&search_keyword=%EB%A9%94%EB%89%B4&document_srl=16790587
수정전 layout.html 파일도 포함하였으니 비교해 보십시오.
좌측 1차메뉴용으로 104번째줄 추가 {$menu_1st['mini_link']}
상단 2차메뉴용으로 60번~61번째에 있는 $val['text'] 를 $val['mini_link']로 2곳 변경하였습니다. 일단은 되는 것 같습니다.
저도 초보라 반도체맨님 설명보고 통밥(?)으로 수정한거라 참고만 하십시오. ^^
우야노님 1차메뉴에 따라다니는 2차메뉴 --> http://www.zeroboard.com/?mid=zbxe_user_tip&search_target=title&search_keyword=%EB%A9%94%EB%89%B4&document_srl=16790587
수정전 layout.html 파일도 포함하였으니 비교해 보십시오.
좌측 1차메뉴용으로 104번째줄 추가 {$menu_1st['mini_link']}
상단 2차메뉴용으로 60번~61번째에 있는 $val['text'] 를 $val['mini_link']로 2곳 변경하였습니다. 일단은 되는 것 같습니다.
저도 초보라 반도체맨님 설명보고 통밥(?)으로 수정한거라 참고만 하십시오. ^^
(실제로는 수작업으로 trac따라서 변경하였습니다... )