Blooz Layout 3.2 레이아웃안에 들어있는 현재위치 메뉴부분 적용팁

제티스님의 요청에 의해( https://moonhouse.co.kr/zbxe/285111#comment_286770 )

Blooz Layout 3.2 레이아웃안에 들어있는 현재위치 메뉴부분의 적용을 팁으로 남깁니다.

Blooz님의 허락을 받지 않아서 어떨지 모르겠지만 이해하시겠죠. 문제가 된다면 삭제하겠습니다.

먼저 적용하시고 싶은 레이아웃의 layout.html 안에   {$content} 부분 상단에 아래의 소스를 붙여 넣기를 합니다.

    <div class="Menu_Position">
     <ul alt="" class="iePngFix">
    <li class="home" class="iePngFix"><a href="{$layout_info->logo_url}" class="iePngFix"><span>Home</span></a></li>
    <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
    <!--@if($val['selected'])-->
      <li class="iePngFix"><a href="{$val['href']}">{$val['text']}</a></li>
   {@ $menu_1st = $val }
    <!--@end-->
    <!--@endif--><!--@endforeach-->
      <!--@if($menu_1st)-->
   {@ $idx = 1 }
     <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
     <!--@if($val['selected'])-->
       <li class="iePngFix"><strong><a href="{$val['href']}">{$val['text']}</a></strong></li>
     
      <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
        <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
     <!--@if($v['selected'])-->
       <li class="iePngFix"><strong><a href="{$v['href']}">{$v['text']}</a></strong></li>
      
       <!--@if($v['list'] && ($v['expand']=='Y'||$v['selected']) )-->
      <!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['link'])-->
      <!--@if($v4['selected'])-->
        <li class="iePngFix"><strong><a href="{$v4['href']}">{$v4['text']}</a></strong></li>
           {@$idx++}
      <!--@endif-->
      <!--@endif--><!--@endforeach-->
       <!--@endif-->
     <!--@endif-->
     <!--@endif--><!--@endforeach-->
            <!--@endif-->
          <!--@end-->
        <!--@endif--><!--@endforeach-->
     <!--@endif-->
     </ul>
 <div class="bclear"></div>
 </div>

해당 css를 열어서 아래와 같이 추가합니다.

 /** Menu_Position **/
.Menu_Position { background:#000; height:30px; margin:0px 0px 5px 0px; }
.Menu_Position ul { margin:0; padding:0; list-style:none; }
.Menu_Position ul li { background:url(../images/common/menuPositionArrow.png) no-repeat right top;  _background:url(../images/common/menuPositionArrow.gif) no-repeat right top; float:left; height:30px; padding:0 20px 0 10px; }
.Menu_Position ul li a { font-size:12px; color:#c4c4c4; text-decoration:none; line-height:30px; vertical-align:middle; }
.Menu_Position ul li a:hover { color:#fff; }
.Menu_Position ul li.home a { background:url(../images/common/menuPositionHome.png) no-repeat left top; display:block; width:28px; height:30px; }
.Menu_Position ul li.home a:hover { background-position:left bottom; }
.Menu_Position ul li.home a span { display:none; }

images.zip 파일압축을 풀어서 ../images/common 폴더안에 올립니다.

제가 약간 수정을 한 것이기 때문에 원코드와는 약간 다릅니다.

그리고 원코드에는 3단메뉴까지 지원되는 것을 4단메뉴까지 지원되게 하였으며,

바탕이미지를 사용하지 않고 색상으로 대체하였습니다.