서브메뉴의 3,4차 메뉴가 2차메뉴 마우스on시 아래로 슬라이딩되게 하는 Tip입니다.
http://www.xpressengine.com/?mid=download&package_srl=18731734
위 링크 친절뺀질이님의 레이아웃소스에서 JQuery 예제부분을 참조했습니다.
https://moonhouse.co.kr/zbxe/266116 의 문하우스레이아웃스킨을 예제로 설명드립니다.
1. jquery-latest.js 파일을 ./layouts/moonhouse/js/폴더에 업로드합니다.
2. ./layouts/moonhouse/layout.html를 수정합니다.
<!--%import("js/jquery-latest.js")--> 추가
트리메뉴부분 소스를 아래와 같이 수정합니다.
<!-- 트리메뉴 -->
<!--@if($layout_info->Lm == 'Y')-->
<!-- sub_menu 2차 시작 -->
<!--@if($menu_1st)-->
<div id="lnb_t" class="iePngFix" />
<h1>{$menu_1st['link']}</h1>
</div>
<ol id="lnb" class="secondMenu" >
{@ $idx = 1 }
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_2nd = $val }
<!--@end-->
<li class="<!--@if($val['selected'])-->on<!--@end--> list{$idx}">
<a <!--@if($val['href'])-->
href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end--><!--@end-->>
<img src="/images/{$layout_info->colorset}/bullet14.gif" align="absmiddle"> {$val['link']}</a>
<!-- main_menu 3차 시작 -->
<!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<!--@if($v['selected'])-->
{@ $menu_3th = $v }
<!--@end-->
<li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
<img src="/images/submenu_bul1.png" align="absmiddle"> {$v['link']}</a>
<!-- main_menu 4차 시작 -->
<!--@if($v['list'] && ($v['expand']=='Y'||$v['selected']) )-->
<ul>
<!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['link'])-->
<!--@if($v['selected'])-->
{@ $menu_4th = $v4 }
<!--@end-->
<li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v4['href']}" <!--@if($v4['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
<img src="/images/submenu_bul1.png" align="absmiddle"> {$v4['link']}</a></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<script type="text/javascript">
$(document).ready(function() {
$("ol.secondMenu li.list{$idx}").hover(function() {
$("ol.secondMenu li ul").addClass("off");
$("ol.secondMenu li.list{$idx} ul").removeClass("off");
$("ol.secondMenu li.list{$idx} ul").slideDown('fast').show();
$("ol.secondMenu li ul.off").slideUp('slow');
})
});
</script>
{@$idx++}
<!--@endif--><!--@endforeach-->
</ol>
<div id="lnb_b" class="iePngFix" />
</div>
<!--@end-->
<!--@end-->
3. 해당칼라의 css파일을 수정합니다.(예:blue.css)
./layouts/moonhouse/css/blue.css에서 아래 해당줄을 찾아서 display:block;을 display:none;으로 수정하면 됩니다.
#lnb li ul { position:relative; overflow:hidden; width:200px; display:none; }