안녕하세요?

일단은 이부분은 어렵긴한데, 설명드리겠습니다.

 

1. 서브 스킨에  좌측메뉴 부분에 아래의 소스 코드를 사용합니다.

///////////////////////////////////////////////////////////////////////////////////

<aside>
   <p>{$shop_base[shop_name]} <i></i></p>
   <h1>{$nav[path][$navCode][0][subject]}</h1>
   {GROUP_snb}
  </aside>

///////////////////////////////////////////////////////////////////////////////////

서브 스킨에  좌측메뉴 부분에 아래의 소스 코드를 사용합니다.

그리고 상단에 제일 첫줄에

{GROUP_init}

그룹을 추가합니다.

 

2. {GROUP_init} 와  {GROUP_snb} 을 만들면 됩니다.

{GROUP_snb}에는 좌측메뉴 하나를 프로그램 마법사로 생성하셔서 비슷한걸로... 아래 소스를 붙여 넣습니다.

/////////////////////////////////////////////////////////////////////////////

 

{@
$program_set[start_code] = $NAVI_INFO[parent];
$nav = program_load(NAVI_CATEGORY_MENU);
@}

<div class="pm-navigation_snb" id="pm-navigation_snb">
 <!-- 1 Depth -->
 <ul class="dep1">
  <!--@foreach($nav[sub_menu] as $k=>$v)-->
   {@
   $liClass = ($v[code]==$NAVI_INFO[code]) ? "on" : "";
   $liClass .= ($v[sub_menu]) ? " existSub" : "";
   @}
   <li cond="$v[visible]" class="{$liClass}"|cond="$liClass">
    <a href="{$v[link_url]}" target="{$v[link_target]}"|cond="$v[link_target]">
     <!--@if($v[bt1_img_url])-->
      <img src="{$v[bt1_img_url]}" onmouseover="this.src='{$v[bt2_img_url]}'"|cond="$v[bt2_img_url]" onmouseout="this.src='{$v[bt1_img_url]}'"|cond="$v[bt2_img_url]" alt="{$v[subject]}" />
     <!--@else-->
      {$v[subject]}
     <!--@end-->
     <i cond="$v[sub_menu]">toggle</i>
    </a>
    <!-- 2 Depth -->
    <div cond="$v[sub_menu]">
     <ul class="dep2">
      <!--@foreach($v[sub_menu] as $k2=>$v2)-->
      <li cond="$v2[visible]" class="on"|cond="$v2[code]==$NAVI_INFO[code]">
       <a href="{$v2[link_url]}" target="{$v2[link_target]}"|cond="$v2[link_target]">
        <!--@if($v2[bt1_img_url])-->
         <img src="{$v2[bt1_img_url]}" onmouseover="this.src='{$v2[bt2_img_url]}'"|cond="$v2[bt2_img_url]" onmouseout="this.src='{$v2[bt1_img_url]}'"|cond="$v2[bt2_img_url]" alt="{$v2[subject]}" />
        <!--@else-->
         {$v2[subject]}
        <!--@end-->
       </a>
      </li>
      <!--@end-->
     </ul>
    </div>
    <!-- // 2 Depth -->
   </li>
  <!--@end-->
 </ul>
 <!-- // 1 Depth -->
</div>

<script>
jQuery(function($){
 var
  $index = $('#pm-navigation_snb > ul')
 ;

 // toggle submenu
 $index.find('> li > a').on('click', function(){
  var $this = $(this).parent();
  if ($this.hasClass('existSub'))
  {
   var $subMenus = $this.parent().children('li');
   if (!$this.hasClass('on'))
   {
    $subMenus
     .removeClass('on')
     .find('ul.dep2').slideUp(200)
    ;
    $this
     .addClass('on')
     .find('ul.dep2').slideDown(200)
    ;
   }
   else
   {
    $subMenus
     .removeClass('on')
     .find('ul.dep2').slideUp(200)
    ;
   }
   return false;
  }
 });
 $index.find('> li.on .dep2').show();
});
</script>

//////////////////////////////////////////////////////////////////////////////////////////

 

그리고 {GROUP_init}는 일반을 생성하셔서 아래 소스를 붙여 넣어 주세요.

//////////////////////////////////////////////////////////////////////////////////////////

 

{@
$program_set[start_code] = "00000000";
$nav = program_load(NAVI_CATEGORY_MENU);
$navCode = $NAVI_INFO[code];
$navNum = $NAVI_INFO[position_arr];
@}

<script type="text/javascript">
function log(o)
{
 console.log(o);
}

// twitter share
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

// facebook share
;(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

//////////////////////////////////////////////////////////////////////////////////////////

 

 

 

3. 그리고 PC버전의 CSS에 가서 아래의 소스를 붙여 넣습니다.

//////////////////////////////////////////////////////////////////////////////////////

/* 서브메뉴 색상 */
$snbTextColor : #85898c; /* 텍스트 색상 */
$snbTextOver : #ff6700; /* 텍스트 오버 색상 */

 

/* 서브 네비게이션 */
.pm-navigation_snb {
 .dep1 {
  margin:0; padding:0; list-style:none; 
  > li {
   margin:0 0 1px;
   > a {
    display:block; position:relative; padding:9px 0; color:$snbTextColor; font-size:18px; font-weight:bold;
    i {
     display:block; overflow:hidden; position:absolute; right:12px; top:50%; width:10px; height:10px;  margin-top:-6px; text-indent:-9999px;
     &:after, &:before { content:''; display:block; position:absolute; background:$snbTextColor; }
     &:after { width:100%; height:2px; left:0; top:50%; margin-top:-1px; }
     &:before { height:100%; width:2px; left:50%; top:0; margin-left:-1px; }
    }
    &:hover { color:$snbTextOver; }
   }
   .dep2 {
    display:none; padding:5px 0;
    margin:0; padding:0; list-style:none; 
    > li {
     > a {
      display:block; padding:6px 15px; color:$snbTextColor; font-size:16px; font-weight:bold;
      &:hover { color:$snbTextOver; }
     }
    }
    &.on { display:block; }
   }
   &.on > a {
    color:$snbTextOver;
    i:before { display:none; }
   }
  }
 }
}
///////////////////////////////////////////////////////////////////////////////////////////////////

 

 

직접 작업해드리는게 아니라서 설명에 미흡할수 있으니 고려하시면서 봐주시길 바랍니다.

월래 기존의 소스를 다른곳에 붙여 넣어서 적용할땐 충돌 되는 class가 없는지 확인해가면 오류도 잡아 가며

반응형은 또 각 페이지 마다 잡아 줘야 하기 때문에 손이 많이 가기때문에 어렵습니다.

적용하는 방법만 설명만 요청하셔서 설명을 해드리지만 작은 오류가 있을수 있습니다.

감사합니다.