[레이아웃 팁] n차 메뉴 무한 구현하기

스킨 제작에 손 놓은지 오래 되서 이런 팁이 요즘 쓰일만할지 모르겠네요.

1. 레이아웃에서 서브 메뉴가 몇 차 이든 다 뿌려줄 수 있습니다.
   3~4차 메뉴까지만 지원하더라도 레이아웃 코드가 복잡해지지만 이 방법은 간단한 코드로 무한대 지원합니다.
2. 메뉴가 링크 형태일 때도 '그 메뉴가 선택'된 것처럼 보일 수 있습니다.
   예를들어 다음과 같은 메뉴 구조에서 /free/2345 링크에 들어가면 [홈 > 게시판 > 자유게시판 > 게시판 규칙] 으로 메뉴 선택이 됩니다.
   • 홈
   • 게시판[href=/board]
     • 공지사항
     • 자유게시판[href=/free]
       • 글 쓰기 전에 읽어주세요 [href=/free/1111]
       • 자주 묻는 질문과 답변 [href=/free/1234]
       • 게시판 규칙 [href=/free/2345]
     • 질문게시판
   • 지원/문의
3. 인덱스 페이지의 mid 값을 생략합니다.
   예: <a href="/index">홈</a> 대신 <a href="/">홈</a> 표기
4. 선택 메뉴의 분류 위치를 표기합니다.
   예: 홈 > 게시판 > 자유게시판

layout.html

{@
// 미리 선언
$menu_vars = array();
$L_CATEGORY = array();
}

<nav id="gnb" class="Wrapper mpReset">
{@
$menu_depth = 1;
$menu_vars[$menu_depth] = $gnb->list;
}
<include target="_navi.html" />
</nav>

_navi.html

<!--//
$menu_vars = array(); // 임시 배열를 생성합니다. (한번만 생성해도 됩니다)
$menu_depth = 1; // 1번 클래스부터 시작합니다. (.ul1 > .li1 > ... > .li3 > .ul4)
$menu_vars[$menu_depth] = $gnb->list; // 출력할 메뉴를 변수로 입력합니다.
-->

<ul class="ul{$menu_depth}">
<!--@foreach($menu_vars[$menu_depth] as $val)--><!--@if(strlen($val['link']))-->
<li  class="li{$menu_depth}{$val['selected']||getenv('REQUEST_URI')==$val['href']? ' on on'.$menu_depth:''}">
{@
if(($val['selected']||getenv('REQUEST_URI')==$val['href']) && !isset($L_CATEGORY[$menu_depth]))
$L_CATEGORY[$menu_depth]=$val;
}
<a href="{$val['href']}"|cond="$site_module_info->mid!=$val['url']" href="{getUrl()}"|cond="$site_module_info->mid==$val['url']" class="a{$menu_depth}{$val['selected']||getenv('REQUEST_URI')==$val['href']? ' on on'.$menu_depth:''}" target="_blank"|cond="$val['open_window']=='Y'"><!--@if($val['text']==$val['link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a>
<!--@if(is_array($val['list']) && count($val['list']))-->
{@
$menu_depth++;
$menu_vars[$menu_depth] = $val['list'];
}
<include target="_navi.html" />
{@
$menu_depth--;
}
<!--@end-->
</li>
<!--@endif--><!--@endforeach-->
</ul>

style.css

#gnb { }
#gnb .ul1 { }
#gnb .li1 { }
#gnb .a1 { }
#gnb .a1:hover,
#gnb .a1:focus { }
#gnb .a1 span { }
#gnb li.on1 { }
#gnb  a.on1 { }
#gnb li.sub { }
#gnb  a.sub { }
#gnb li ul { padding:0 0 0 15px; }
#gnb .ul2 { }
#gnb .ul2 li { }
#gnb .ul2 a { }
#gnb .ul2 a:hover,
#gnb .ul2 a:focus { }
#gnb .ul2 a span { }
#gnb .ul2 li.on { }
#gnb .ul2  a.on { }
#gnb .ul2 li.sub { }
#gnb .ul2  a.sub { }

본문 코드를 복붙하시면 특문이 포함되어서 잘 안 됩니다.
코드가 필요하신 분은 첨부 파일을 참고해주세요~