1, 해당 레이아웃에 layout.html을 열어서 변경전 스크립트 부문을 변경후로 바꿔줍니다.
변경전
<!--GNB-->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@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-->><img src={$val['text']}></a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@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-->><img src={$val['text']}></a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
변경후
<!--GNB--> <ul id="gnb"> <div class="headerM"> <!-- main_menu 1차 시작 --> {@ $idx = 1 } <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])--> <!--@if($val['selected'])--> {@ $menu_1st = $val } <!--@end--> <li onMouseOver="menu({$idx});" <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end--> <!--@if($val['selected'])--> style="color:{$layout_info->header_color};"<!--@end-->>{$val['text']}</a></li> <!--@end-->{@$idx++}<!--@end--> <!-- main_menu 1차 끝 --> </div> </ul> <!--//GNB--> <!--히든 레이어 메뉴--> <script language="javascript1.2"> var menuLen={$idx-1}; </script> {@ $idx = 1 } <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])--> <div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->"> <!--@foreach($val['list'] as $key1 => $val1)--> <!--@if($val1['text'])--> <a id="submenu1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a> <!--@end--> <!--@end--> </div> <!--@end--> {@$idx++} <!--@end--> <!--히든 레이어 메뉴 끝-->
2. 해당 스킨의 js파일을 열어서 아래의 스크립트를 추가합니다.
//메인서브메뉴 function menu(idx){ for (i=1;i<=menuLen;i++){ eval("document.getElementById('subMenu_"+i+"').style.display='none'"); } eval("document.getElementById('subMenu_"+ idx +"').style.display='block'"); }
3. 해당 스킨의 해당 칼라 css파일을 열어서 아래의 스크립트를 추가합니다.
/*메인서브메뉴*/ .subMenu {position:absolute; left:20px; top:132px; height:17px; repeat-x center middle; z-index:100;} #submenu1{text-decoration:none;color:#D1533A;padding-left:8px; line-height:2em; position:relative;white-space:nowrap; } #submenu1:hover,focus {color:#95A95F}
홈에 맞게 속성들을 수정하셔서 스타일을 추가해 주시면 됩니다.^^
참고로 제가 한마디 하면
1차 메뉴에 로그아웃시 히든메뉴가 있으면(ex:관리자메뉴) 로그온시는 이 스크립트가 작동을 하나 로그아웃시는 작동을 하지 않습니다. 히든메뉴의 속성을 전부보기로 바꾸고 내용만 히든시키세요.
이거 알아낸다고 하루종일 고민 했습니다.흑흑
감사 합니다.
좋은정보 홈피 이용에만 사용 하겠읍니다.