상단 2차 메뉴를 세로로 슬라이딩되게 하는 방법을 앞서 올렸는데요.
앞서 방법은 익스에서는 정상적으로 작동을 하는데 파폭이나 크롬에서는 작동을 하지 않더군요.
그래서 익스, 파폭, 크롬에서 모두 잘 작동히는 방법을 올립니다.
xe_official 레이아웃을 기준으로 설명합니다.
1. layout.html파일을 아래와 같이 수정합니다.
[수정전]
<!-- GNB -->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="/{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']} <!--@endif--><!--@endforeach-->
</ul>
[수정후]
<!-- 2차 세로메뉴 --> <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])--> <!--@if($val['selected'])--> {@ $menu_1st = $val } <!--@end--> <!--@end--><!--@end--> <ul id="gnb1" class="gnb1"> {@$_idx = 0} {@$idx = 1} <!--@foreach($main_menu->list as $key => $val)--> <!--@if($val['selected']&&$val['url']==$mid)-->{@$_menu_depth=1}<!--@end--> <!--@if($val['link'])--> <li class="{$_colorset_list[$_idx]} <!--@if($val['selected'])-->selected<!--@end--> <!--@if($idx==0)-->first-child<!--@end-->"> <a <!--@if($val['list'])-->rel="dropmenu{$idx}"<!--@end--> href="/{$val["href']}" <!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->> <> <!--@else--> {$val['link']} <!--@end--> </a> </li> {@$_idx++} {@$idx++} <!--@if($_idx>=count($_colorset_list))-->{@$_idx=0}<!--@end--> <!--@end--> <!--@end--> </ul> <!-- dropdown sub_menu --> {@ $gnb1_count = 1;} <!--@foreach($main_menu->list as $key => $val)--> <!--@if($val['list'])--> <!-- 권한이 없는 것을 제외한 메뉴 수 구하기 --> {@ $menuCount = 0;} <!--@foreach($val['list'] as $k => $v)--> <!--@if($v['text']!='')--> {@ $menuCount++;} <!--@end--> <!--@end--> <div id="dropmenu{$gnb1_count}" class="dropmenudiv" > <div class="boxBorder"> <ul> {@ $menuIndex = 1;} <!--@foreach($val['list'] as $k => $v)--> <!-- 권한이 없는 것을 제외한 메뉴가 아닐 경우에만 출력 --> <!--@if($v['text']!='')--> <li <!--@if($menuCount==$menuIndex)-->class="last"<!--@end-->><a href="/{$v["href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"< {@ $menuIndex++;} <!--@end--> <!--@end--> </ul> </div> </div> <!--@end--> {@$gnb1_count++;} <script type="text/javascript">cssdropdown.startchrome("gnb1")</script>
2. layout.html파일의 상단에 아래의 코드를 삽입합니다.
<!--%import("js/chrome.js")-->
chrome.js 다운받은 파일을 ./layouts/moonhouse/js 폴더에 올립니다.
3. default.css 파일에 아래의 소수 추가합니다.
.gnb1 { position:absolute; top:162px; left:20px; height:50px; overflow:hidden; white-space:nowrap; margin-bottom:10px; z-index:9; }
.gnb1 li { float:left; padding-right:40px; list-style:none;}
.gnb1 li a { display:block; float:left; height:32px; text-decoration:none !important; color:#ffffff; font:1.2em arial, sans-serif; white-space:nowrap; text-decoration:none; font-weight:bold; }
.gnb1 li a span { display:inline-block; padding-top:10px; }
.dropmenudiv { font: normal 13px Verdana; margin: 0px 0 0 0px; padding: 0; position: absolute; left: 0; top: 0px; list-style-type: none; visibility: hidden; z-index: 100;}
.dropmenudiv .boxBorder { background:#fff; border:2px solid #bbbbbb; }
.dropmenudiv a { display:block; font:12px dotum; padding:10px 15px; color:#53605f; }
.dropmenudiv a:hover { background:#efefef; color:#192221; text-decoration:none; }
.dropmenudiv li { border-bottom:1px dashed #e2e2e2; }
.dropmenudiv li.last{ border-bottom:none; }
.dropmenudiv ul { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }

좋은 정보네요,
감사합니다~