http://www.xeschool.com/xe/step3_8


메뉴판을 보여주세요!

XE 레이아웃 식당에서 일어난 일

메뉴 변수XE 레이아웃 식당에서 종업원이 손님에게 메뉴판을 가져왔습니다. 그런데 XE 레이아웃 식당은 특이한 메뉴판을 가지고 있네요. 오른쪽 그림처럼 메뉴 변수 상자안에 메뉴들을 한가득 담아가지고 왔습니다. 무엇을 선택할 지 손님이 골라야 한다는 것인데요, 우리가 흔히 보았던 메뉴판과는 너무나 다릅니다.

손님이 종업원에게 묻습니다.
손님 : "아니, 우리가 원하는 메뉴판은 가로방향이든 세로방향이든 쉽게 보고 선택할 수 있는 메뉴 구성입니다. 이렇게 변수 상자에 담아서 선택하라고 하면 어떻하지요?" 
종업원 : "저희는 청결한 음식을 항상 손님에게 제공합니다. 그리고 이 변수 상자는 얼마전에 손님께서 미리 예약해 두신 것이고 저희는 다만 그것을 이용할 뿐입니다."

미리 예약해 둔 변수 상자?

맞습니다. 종업원이 메뉴의 이름을 담아 온 상자는 우리가 얼마전에 info.xml 문서를 만들면서 메뉴 이름을 담기위해 미리 만들어 두었던 변수 이름이었습니다. "레이아웃 정보 파일 만들기"의 마지막 부분의 메뉴 옵션을 참고하세요.

loop를 이용해 메뉴 정렬하기

XE 코어 제어판에서 메뉴관리 모듈 프로그램을 이용해 메뉴를 만들게 되면 info.xml 문서에서 우리가 만들어 두었던 메뉴 변수 이름에 그 값들을 모두 받아오게 됩니다. 그리고 이 값들은 배열(array)의 형태로 담겨집니다. 배열로 담겨진 변수는 그대로 사용할 수 없습니다. 따라서 XE 템플릿 문법을 이용해 배열을 분해하여 우리가 원하는 메뉴의 형태로 리스트(list)를 만들어야 합니다.

<div class="gnb">
<ul>
   <li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
      <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
         <ul cond="$val1['list']">
            <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
               <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
         </ul>
   </li>
</ul>
</div>

xe_official 기본 레이아웃의 메뉴를 구성하는 div의 gnb 클래스 부분입니다. 스마트 헤더 로그인과 마찬가지로 UL 리스트를 만들어주는 것이 같습니다. 새로운 문법을 사용하여 인라인 템플릿 문법으로 리스트(li)를 생성하고 있습니다. UL 안에 LI는 한개 뿐이지만,loop 반복 구문을 사용해서 메뉴의 갯수 만큼 만들어 주는 것이지요. 첫번째 리스트(li)는 1차 메뉴를 가리킵니다. XE 메뉴를 생성할 때 첫번째 항목으로 생성된 메뉴를 가리키며 각 메뉴에는 필요한 경우 2차 메뉴를 배열로 포함하고 있습니다. 만약 1차 메뉴에서 하위 메뉴가 있는 경우에는 초록색 UL LI 리스트가 만들어 지는 것이지요. UL 안에 인라인 형태로 조건문 cond="$val1['list']"을 넣어서하위 메뉴를 담은 배열 변수($val)가 있다면 표시하라 는 의미입니다.

2차 메뉴의 표시방법은 1차 메뉴의 표시방법과 같은데 그럼 1차 메뉴를 자세히 살펴보면, 리스트(li)를 메뉴의 갯수만큼 반복해서 표시하는데 loop에 들어있는 구문은 조건이 아니고 $main_menu 변수 상자에 담겨져 있는 배열의 값(list)들을 각각 $key1, $val1변수에 나누어 담고 {$val1['link']}에서 표시하라! 는 의미입니다.

image

그러면 위와 같이 CSS의 도움을 받아 가로방향으로 메뉴의 갯수만큼 표시 됩니다. 표시만 된 것으로 끝나면 많이 아쉽습니다. 따라서 조건 구문을 이용해서 class="active"|cond="$val1['selected']" 즉, 현재의 페이지 모듈 이름으로 선택된 값이 있는 경우(selected의 값은 1, 선택되지 않았다면 0)에는 클래스(class) 속성에 active을 더해주어라. 그러면 CSS 문서에서 active의 속성을 덧붙여 표시할 것이라는 의미입니다.

image

선택된 메뉴 리스트(li)의 CSS 속성에는 .active 가 더해져서 위와 같이 다른 메뉴와 구분할 수 있는 처리가 가능하게 되는 것이지요. 각 메뉴의 링크 설정은 XE 구문 {$val1['href']} 를 이용해 이동할 모듈의 mid를 찾아가게 됩니다. 뒤에 이어지는 링크 타겟의 조건 구문은 메뉴 생성시에 새창으로 열 것인지에 대한 조건값을 확인합니다. 만약 새창으로 연다고 했으면 Y, 아니면 N 입니다.

위에서 설명드린 것처럼 2차 메뉴는 1차 메뉴의 조건 구문과 같은 방법으로 리스트를 생성합니다. 정리해 보면 info.xml 문서에서 만들었던 메뉴 변수의 이름($main_menu)으로 메뉴 모듈에서 만들어지는 메뉴의 전체 값을 배열로 받고, 레이아웃 문서에서는 배열로 넘겨받은 메뉴를 다시 원상태로 분해하여 각각의 모듈 아이디를 찾아 갈 수 있도록 사용하는 것입니다.

참고로 info.xml 문서에서 name="bottom_menu"를 추가했다면 $bottom_menu 변수 상자에 담아 오는 메뉴의 값들도 위와 같은 방법으로 다시 분해하여 사용해야 겠지요? 스스로 시도해 보시기 바랍니다. 그리고 만약 메뉴 리스트에서 하위 메뉴의 구성을 보이게 하고 싶지 않은 경우에는 2차 메뉴를 표시하는 UL LI 부분을 삭제하시면 됩니다. 기본 제공되는 xe_official 레이아웃에서는 스크립트의 도움을 받아 2차 메뉴를 드롭다운 메뉴로 구성하고 있습니다. 즉 마우스로 오버 되었을때만 아래 방향으로 펼쳐 보이는 것이지요. 메뉴의 표현과 구성 방법은 자유롭게 설정하여 사용합니다.

이 게시물을...