컬렉터 레이아웃에서는 지원하지 않는 기능입니다. 두가지 기능을 구현하시려면 소스를 추가 수정하여 가능은 합니다만 별도로 의뢰를 하셔야 하는 부분입니다. 그러나 방법을 알려드리자면...
(맨 밑 이미지는 적용된 예 입니다.) 1) 사이드바 전체 메뉴 주석 처리된 사이드바 메뉴를 찾으셔서 사이드바 메뉴 전체를 아래 코드로 대체합니다. 그리고 css를 추가합니다. <!-- 사이드바 메뉴--> <div class="lnb_wrap"> <ul class="nav navbar-nav2" style="margin:30px 0; border:1px solid #eaeaea;"> <block loop="$main_menu->list=>$key1,$val1" cond="$val1['text']"> <!--@if($val1['link']!="||||")--> <li class="<!--@if($val1['list'])-->dropdown <!--@end--><!--@if($val1['selected'])-->active<!--@end-->"|cond="$val1['list'] || $val1['selected']" style="border-bottom:1px solid #eaeaea;"> <a href="{$val1['href']}"<!--@if($val1['list'])--> class="dropdown-toggle" data-toggle="dropdown" <!--@end--> target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']} <!--@if($val1['list'])--> <span class="caret pull-right" style="margin-top:8px;"></span><!--@end--></a> <ul cond="$val1['list']" class="dropdown-menu"> <block loop="$val1['list']=>$key2,$val2" cond="$val2['link']"> <!--@if(strpos($val2['href'],'dropdown-header')!== false)--> <li class="dropdown-header">{$val2['link']}</li> <!--@elseif($val2['link']!="----")--> <li class="<!--@if($val2['list'])-->dropdown-submenu <!--@end--><!--@if($val2['selected'])-->active<!--@end-->"|cond="$val2['list'] || $val2['selected']"> <a tabindex="-1" href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']} <!--@if($val2['list'])--> <span class="caret"></span><!--@end--></a> <!-- 3차메뉴 시작--> <ul class="main depth3" cond="$val2['list']"> <li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"> {@ $depth3 = explode('-', $val3['link']); trim($depth3[0]); trim($depth3[1]); } <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$depth3[0]}</a> </li> </ul> <!-- // 3차메뉴 종료--> </li> <!--@else--> <li class="divider"></li> <!--@end--> </block> </ul> </li> <!--@else--> <li class="divider"></li> <!--@end--> </block> </ul> </div> <!-- //사이드바 메뉴 종료-->
아래 css 추가 .navbar-nav2 li a { color:#222222; } .navbar-nav2 { border-bottom:none !important; } .navbar-nav2 li a:hover,.navbar-nav2 > li.active > a:visited { color:#F05F40; }
2) 양쪽 따라다니는 광고 바디<body> 태그 밑에 아래 코드를 삽입하시고 css와 script를 추가합니다. 이 광고는 컬렉터 레이아웃이 반응형이고 양 옆 공간이 넓지않아 화면이 작으면 광고가 콘텐츠를 가리게 됩니다. 큰화면에서만 가능하게 하시던지 작은 화면에서는 사라지게 반응형 처리하시는게 좋겠습니다. <div class="coll_quickmenu"> <ul> <li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li> <li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li> </ul> </div> <div class="coll_quickmenu right"> <ul> <li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li> <li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li> </ul> </div> css 추가 .coll_quickmenu { position: absolute; top:0; left:; padding: 15px 15px; z-index:999; } .coll_quickmenu.right { position: absolute; top:0; right:0; padding: 15px 15px; z-index:999; } .coll_quickmenu ul li { list-style: none; margin-bottom: 15px; }
html 맨 밑에 추가
<!-- 사이드 퀵메뉴 javascript 시작 --> <script> (function($){ jQuery(document).ready(function(){
$(window).scroll(function(){ var scTop=$(this).scrollTop(); $(".coll_quickmenu").stop().animate({top:scTop+40+"px"}, 500); });
}); })(jQuery); </script> <!-- 사이드 퀵메뉴 javascript 종료 -->
여기에 파일을 끌어 놓거나 파일 첨부 버튼을 클릭하세요.
파일 크기 제한 : 0MB (허용 확장자 : *.*)
파일 업로드 중... (0%)
컬렉터 레이아웃에서는 지원하지 않는 기능입니다.
두가지 기능을 구현하시려면 소스를 추가 수정하여 가능은 합니다만
별도로 의뢰를 하셔야 하는 부분입니다.
그러나 방법을 알려드리자면...
(맨 밑 이미지는 적용된 예 입니다.)
1) 사이드바 전체 메뉴
주석 처리된 사이드바 메뉴를 찾으셔서 사이드바 메뉴 전체를 아래 코드로 대체합니다.
그리고 css를 추가합니다.
<!-- 사이드바 메뉴-->
<div class="lnb_wrap">
<ul class="nav navbar-nav2" style="margin:30px 0; border:1px solid #eaeaea;">
<block loop="$main_menu->list=>$key1,$val1" cond="$val1['text']">
<!--@if($val1['link']!="||||")-->
<li class="<!--@if($val1['list'])-->dropdown <!--@end--><!--@if($val1['selected'])-->active<!--@end-->"|cond="$val1['list'] || $val1['selected']" style="border-bottom:1px solid #eaeaea;">
<a href="{$val1['href']}"<!--@if($val1['list'])--> class="dropdown-toggle" data-toggle="dropdown" <!--@end--> target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}
<!--@if($val1['list'])--> <span class="caret pull-right" style="margin-top:8px;"></span><!--@end--></a>
<ul cond="$val1['list']" class="dropdown-menu">
<block loop="$val1['list']=>$key2,$val2" cond="$val2['link']">
<!--@if(strpos($val2['href'],'dropdown-header')!== false)-->
<li class="dropdown-header">{$val2['link']}</li>
<!--@elseif($val2['link']!="----")-->
<li class="<!--@if($val2['list'])-->dropdown-submenu <!--@end--><!--@if($val2['selected'])-->active<!--@end-->"|cond="$val2['list'] || $val2['selected']">
<a tabindex="-1" href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}
<!--@if($val2['list'])--> <span class="caret"></span><!--@end--></a>
<!-- 3차메뉴 시작-->
<ul class="main depth3" cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']">
{@
$depth3 = explode('-', $val3['link']);
trim($depth3[0]);
trim($depth3[1]);
}
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$depth3[0]}</a>
</li>
</ul>
<!-- // 3차메뉴 종료-->
</li>
<!--@else-->
<li class="divider"></li>
<!--@end-->
</block>
</ul>
</li>
<!--@else-->
<li class="divider"></li>
<!--@end-->
</block>
</ul>
</div>
<!-- //사이드바 메뉴 종료-->
아래 css 추가
.navbar-nav2 li a {
color:#222222;
}
.navbar-nav2 {
border-bottom:none !important;
}
.navbar-nav2 li a:hover,.navbar-nav2 > li.active > a:visited {
color:#F05F40;
}
2) 양쪽 따라다니는 광고
바디<body> 태그 밑에 아래 코드를 삽입하시고 css와 script를 추가합니다.
이 광고는 컬렉터 레이아웃이 반응형이고 양 옆 공간이 넓지않아 화면이 작으면 광고가 콘텐츠를 가리게 됩니다.
큰화면에서만 가능하게 하시던지 작은 화면에서는 사라지게 반응형 처리하시는게 좋겠습니다.
<div class="coll_quickmenu">
<ul>
<li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li>
</ul>
</div>
<div class="coll_quickmenu right">
<ul>
<li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://imgjungle.jungle.co.kr/ads/0218_jobevent_140x180.jpg" alt="" /></a></li>
</ul>
</div>
css 추가
.coll_quickmenu {
position: absolute;
top:0;
left:;
padding: 15px 15px;
z-index:999;
}
.coll_quickmenu.right {
position: absolute;
top:0;
right:0;
padding: 15px 15px;
z-index:999;
}
.coll_quickmenu ul li {
list-style: none;
margin-bottom: 15px;
}
html 맨 밑에 추가
<!-- 사이드 퀵메뉴 javascript 시작 -->
<script>
(function($){
jQuery(document).ready(function(){
$(window).scroll(function(){
var scTop=$(this).scrollTop();
$(".coll_quickmenu").stop().animate({top:scTop+40+"px"}, 500);
});
});
})(jQuery);
</script>
<!-- 사이드 퀵메뉴 javascript 종료 -->