서브메뉴의 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; }

