웹마스터 팁

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

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

 

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/

 

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

제목 글쓴이 날짜
CentOS 에서 iptables 편집후 실행이 안될때 마루디자인 2015.03.17
[SocialXE] 트위터 로그인시 프로필 사진이 표시되지 않는 문제 해결하기 [3] file TUW 2013.02.03
카카오 API로 로그인창 만들어 봤어요~~ ^^ [6] file 컴박살 2015.02.12
싸이트 도메인 주소 뒤에 XE 디렉도리 없애기 [2] 리차드조 2015.03.09
회원정보보기를 팝업으로 띄우는 방법 콜롬보. 2015.03.13
인증메일이 안올경우 - 팁이라고 해야할지...소개라고 해야할짐 모르지만 [2] socialskyo 2015.03.07
input number 숫자만 입력받기 아이폰 예외처리 wnrtnsdl2 2015.03.12
아마존 상품API 소스中 상품정보 가져오는 소스 키스투엑스이 2015.03.10
[모듈 개발] 테이블 스키마 파일 이름은 테이블명과 동일하게 [3] 산하2 2014.05.12
css table generator Ansi™ 2015.03.04
Market 모듈에서 대표사진 필수 없애기 [3] garnecia 2015.03.03
주소를 지도링크하기 마루디자인 2015.03.04
도메인이 바뀐후 기본 URL을 바꿨지만 2차메뉴의 링크는 바뀌지 않은 경우. [9] Ryuj 2013.11.20
xpresseditor에 한글 글꼴 추가 [2] YJSoft 2013.10.25
XE 로그인을 아이디로 바꾸려는데 회원설정에서 회원가입 탭이 안보일때. 불금 2015.02.27
PDF 뷰어 팁 [4] 돼지코구뇽 2014.12.06
kakao Javascript SDK logout 컴박살 2015.02.25
특정 게시판에서는 스팸 ip 동작 안하게 하기 [4] Kxo 2015.02.22
htaccess 보안 팁 포럼위트 2015.02.24
300기가 Zboard4->XE 이전기 [14] file forest535 2015.02.13