이온디 마이노트 레이아웃의 왼쪽 사이드바의 CATEGORY 위젯에는
레이아웃에서 설정한 상단메뉴(main_menu)와 컨텐츠 메뉴(wnb)의 2차 메뉴가 출력되고 있습니다.
메뉴 부분의 코딩을 전혀 모르는 이온디 마이노트 1.4.4 까지는
기존에 있는 XE 공식 레이아웃 등에서 짜깁기 한 식의 코드를 사용했습니다.
아래 작성한 코드가 바로 1.4.4 때 까지는 왼쪽 사이드 영역에서 사용한 메뉴 코드입니다.
--------------------------------------------------------------------------------------------------------------------------------
<!-- 2차 메뉴 전에 선행된 1차 메뉴 숨김 -->
<ul style="display:none;">{@$loc=0}
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['selected'])-->
<li class="first_li<!--@if($val['selected'])-->{@$location[$loc]=$val}{@$loc++} selected<!--@end-->">
{@ $menu_1st = $val }
<!--@if($val['list'])-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<li class="second_li<!--@if($v['selected'])--> selected selected_2{@$location[$loc]=$v}{@$loc++}<!--@end-->"></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@endforeach-->
</ul>
<!-- main_menu 2차 시작 -->
<!--@if($menu_1st)-->
<ol id="lnb">
{@ $idx = 1 }
<!--@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차 시작 -->
<!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li>
<!--@endif--><!--@endforeach-->
</ul>
<!--@endif-->
</li>
{@$idx++}
<!--@endif--><!--@endforeach-->
</ol>
<!--@endif-->
</ul>
<ul id="lnb" loop="$wnb->list=>$key,$val" cond="$val['selected']">
<ul cond="$val['list']">
<li loop="$val['list']=>$key1,$val1"><a href="{$val1['href']}" target="_blank"|cond="$val['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
</ul>
--------------------------------------------------------------------------------------------------------------------------------
소스가 엉망입니다.
이런 코드를 이번에 1.4.5에서는 W3C의 validator 검사까지 만족시키기 위해 잘못 작성한 코드는 수정하고 있는 중입니다.
위에서 보다시피 2차 메뉴를 띄우기 위해 필요 없는 1차 메뉴를 선행시키고 화면에선 감추는 형식으로 코드를 작성했습니다.
바로 이 부분입니다.
<ul style="display:none;">{@$loc=0}
이렇게 UL 항목만 display:none 으로 하니 이 코드는 그대로 w3c의 웹문서 마크업 검사에서 들통이 난 것입니다.
<ul></ul> 만 있고 그 사이 있어야 할 <li>가 없었기 때문입니다.
이러한 에러를 없애기 위해 과감하게 사이드 영역의 2차 메뉴를 출력하는 코드를 재정비하게 되었습니다.
아래에서 사용한 코드가 바로 그것입니다.
------------------------------------------------------------------------------------------------------------------------
<ul id="lnb" loop="$wnb->list=>$key,$val" cond="$val['selected']">
<ul cond="$val['list']">
<li loop="$val['list']=>$key1,$val1"><a href="{$val1['href']}" target="_blank"|cond="$val['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
</ul>
<ul id="lnb" loop="$main_menu->list=>$key,$val" cond="$val['selected']">
<ul cond="$val['list']">
<li loop="$val['list']=>$key1,$val1"><a href="{$val1['href']}" target="_blank"|cond="$val['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
</ul>
------------------------------------------------------------------------------------------------------------------------
wnd의 2차 메뉴를 출력시키고, main_menu의 2차 메뉴를 출력시키는 동작을 합니다.
위의 너저분하고 알아먹기 힘든 소스가 이처럼 간단해졌습니다.
아직 메뉴 코드 작성이 간단하지 않아 일단은 이렇게라도 흔적을 남겨놓습니다.