코딩에는 문외한이라 이것저것 시행착오를 거쳐가며 알아낸 방법입니다.

생초보 기준이니 코딩을 잘 모르는 분들께도 도움이 될 수 있으리라 생각합니다.

 

0.

 

 우선 기본적으로 롤오버를 적용하는 방법은

 소마세월 님의 팁과 같습니다.

 http://www.xpressengine.com/15977640 

 

 

1. js 파일 문제

 

 한데, 공식 레이아웃 스킨 v2에는 js 폴더가 없습니다.

 처음부터 난항이죠.

 그러나 직접 js 파일을 만들면 됩니다!

 

// 2nd menu
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'");
}

 

이 들어간 js파일을 제작하신 뒤,

 

 (xe설치폴더)/layouts/xe_official_v2/js/

 

안에 넣어주시면 됩니다. 저같은 경우에는 js파일의 파일명을 xe_official_v2.js 로 하였습니다.

 

 

2. js 파일의 연결

 

 레이아웃 편집에서 js 파일을 로딩하는 코드를 넣으셔야 합니다.

 레이아웃 파일 편집의 HTML 편집 창에서,

 찾아보기 쉽게 맨 윗줄에 다음을 넣은 뒤 저장을 누르세요.

 

<!--// js 파일 import -->
<!--%import("./js/xe_official_v2.js")-->

 

 

3. 롤오버를 위한 코드 적용

 

ⓐ 기본 코드 삽입

 앞서도 말했듯 기본적으로 롤오버를 적용하는 방법은

 소마세월 님의 팁과 같습니다.

 http://www.xpressengine.com/15977640 

 

 위의 링크를 클릭하셔서 우선 시키는대로 적용을 해보세요.

 

 

ⓑ 서브메뉴의 출력 위치 문제 해결 방법

 

 그런데, 이 경우 롤오버되는 서브메뉴의 위치가 다 동일하기 때문에 보기가 좋지 않습니다.

 그래서 각 메뉴별로 서브메뉴 출력 위치를 조정하는 팁이 나왔습니다.

 

 http://www.xpressengine.com/16904420 (봄처녀 님의 팁)

 

 그런데 막상 XE 공식 레이아웃 스킨 v2 에 적용해보면,

 위에서 제시된 팁에 메뉴명이 제대로 인식되지 않는 경우가 발생하더군요.

 

<!--@if($val['text']=='메인메뉴1')-->
<div class="subMenu1">
<!--@elseif($val['text']=='메인메뉴2')-->
<div class="subMenu2">
<!--@else-->
<div class="subMenu1">
<!--@end-->

 조건문이 위와 같이 되어있는데,

 여기에서 메인메뉴명을 제대로 잡지 못하는 문제가 생기는 겁니다.

 

 고민을 하다보니 조건문에서 함수를 $val['text']로 사용하지 말고,

 $idx 를 사용하는 방법이 있겠더군요.

 코드를 살펴보시면 아시겠지만, 소마세월님의 팁에서 $idx에는 1차 메뉴의 순서대로 값이 부여됩니다.

 

 따라서, 봄처녀님의 팁에서 붙여넣어야 할 문구는 다음과 같이 수정되어야 합니다.

 

<!--히든 레이어 메뉴-->
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--2차메뉴-->
<div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;!<--@end-->">
<!--@if($idx==1)-->
<div class="subMenu1">
<!--@elseif($idx==2)-->
<div class="subMenu2">
<!--@elseif($idx==3)-->
<div class="subMenu3">
<!--@elseif($idx==4)-->
<div class="subMenu4">
<!--@elseif($idx==5)-->
<div class="subMenu5">
<!--@elseif($idx==6)-->
<div class="subMenu6">
<!--@elseif($idx==7')-->
<div class="subMenu7">
<!--@elseif($idx==8')-->
<div class="subMenu8">
<!--@else-->
<div class="subMenu1">
<!--@end-->
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
<!--@if($val1['selected'])--><!--@end-->
<a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->
<!--@end-->
</div></div>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
<!--히든 레이어 메뉴 끝-->
 

 

ⓒ 메인 메뉴의 위치 변경 문제 해결 방법

 

 이건 가외의 얘기입니다만,

 공식 레이아웃 스킨 v2에서는 위의 팁을 적용할 경우 메인 메뉴의 위치가 미묘하게 바뀝니다...

 이걸 해결하기 위해서는, 메인메뉴 출력부분을 <div>로 감싸 위치를 잡아주면 되더군요.

<div class="mainmenu" style="position:absolute; left:0px; top:-25px; width:750px;height:24px;">
            {@ $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-->>{$val['text']}</a></li>
            <!--@end-->
            {@$idx++}
            <!--@end-->
            <!-- main_menu 1차 끝 -->
</div>

 보시는 바와 같이 1차 메뉴르 출력하는 소스 앞 뒤로 빨간 글씨로 된 부분을 삽입하시면 됩니다.

 정확한 위치는 left: 와 top: 뒤의 숫자를 가지고 조정하실 수 있습니다.

 

 

4. CSS 수정팁

 

.subMenu{position:absolute; left:0px; top:12px;width:750px;height:20px;}
.subMenu1{padding-left:-10px;}
.subMenu2{padding-left:-10px;}
.subMenu3{padding-left:100px;}
.subMenu4{padding-left:150px;}
.subMenu5{padding-left:220px;}

 

 저 같은 경우에는 css 파일을 위와 같이 적용했습니다.

 중요한 부분은 subMenu{} 부분입니다.

 메뉴 아래 공간을 차지하므로 배경색 부분을 없애주는 편이 좋겠더군요.

 위치는 저렇게 잡으시면 별 문제가 없을 겁니다.

 

 

 

 실제 적용례는 다음과 같습니다.

 http://www.fangal.org/xe/

 

 공식스킨에 롤오버 기능이 없어 고생하는 분들께 도움이 되었길 빕니다.