웹마스터 팁

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

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

 

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/

 

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

제목 글쓴이 날짜
XE 루트로 옮기기 완벽 가이드 [/xe/ 로부터 벗어나자!] ver 1.1 [107] file LI-NA 2013.02.26
기본 Content 위젯에 댓글 New표시하기 [10] 조슈아킴 2010.05.08
에디터 비활성화 문제 해결했습니다! [2] 엘로이스 2013.09.13
1.8 XEDITION 에서 로그인xe 사용하여 네이버 로그인 연동하기 [7] file karutian 2015.04.10
CSS + HTML 메뉴 마루디자인 2016.03.10
호스팅 변경이나 이전시 썸네일 문제 점검사항 맥노턴 2016.03.07
[속도 향상] 불필요한 애드온 끄기 다미아빠 2016.03.06
외부 이미지 저장 애드온 [7] file samsara 2013.03.26
서버의 파일권한 맞추기. 마루디자인 2016.03.01
외부페이지에서 매개변수 사용하기 [2] JnCsoft 2008.04.07
외부 페이지에서 XE 기능을 추가 할때 410contents 2016.02.25
PHP7에서 XE설치시 텍스트 다 깨져서 나올 때 꼬부기 2016.02.23
CentOS 6.x 에서 OpenSSL Heartbleed 취약점 업데이트 마루디자인 2016.02.23
댓글에 대댓글 달리면 수정 불가능하게 하기 [8] 불금 2015.06.17
Linux(CentOS) APM 컴파일 설치 (중급) [1] rwind 2016.02.01
(포인트) 레벨별 포인트 계산 기능 추가 [4] file Simulz 2007.11.19
(CSS) IE8용 웹조각 기능 file Simulz 2009.03.26
XE위키 모듈: 숫자 문서의 짧은 주소 문제와 미디어위키 문법 사용시 내부링크 문제 해결하기 Gunmania 2016.02.12
가상사이트 페이지별 개별 레이아웃 적용하기 Xiso 2016.01.31
warning: call time pass by reference 에러 해결 방법 [6] ezi 2011.07.28