웹마스터 팁
공식 레이아웃 v2 스킨에서 롤오버 메뉴 적용하기.
2010.02.01 20:04
코딩에는 문외한이라 이것저것 시행착오를 거쳐가며 알아낸 방법입니다.
생초보 기준이니 코딩을 잘 모르는 분들께도 도움이 될 수 있으리라 생각합니다.
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차 메뉴의 순서대로 값이 부여됩니다.
따라서, 봄처녀님의 팁에서 붙여넣어야 할 문구는 다음과 같이 수정되어야 합니다.
<!--히든 레이어 메뉴--> ⓒ 메인 메뉴의 위치 변경 문제 해결 방법 이건 가외의 얘기입니다만, 공식 레이아웃 스킨 v2에서는 위의 팁을 적용할 경우 메인 메뉴의 위치가 미묘하게 바뀝니다... 이걸 해결하기 위해서는, 메인메뉴 출력부분을 <div>로 감싸 위치를 잡아주면 되더군요.
<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> 보시는 바와 같이 1차 메뉴르 출력하는 소스 앞 뒤로 빨간 글씨로 된 부분을 삽입하시면 됩니다. 정확한 위치는 left: 와 top: 뒤의 숫자를 가지고 조정하실 수 있습니다. 4. CSS 수정팁 .subMenu{position:absolute; left:0px; top:12px;width:750px;height:20px;} 저 같은 경우에는 css 파일을 위와 같이 적용했습니다. 중요한 부분은 subMenu{} 부분입니다. 메뉴 아래 공간을 차지하므로 배경색 부분을 없애주는 편이 좋겠더군요. 위치는 저렇게 잡으시면 별 문제가 없을 겁니다. 실제 적용례는 다음과 같습니다. 공식스킨에 롤오버 기능이 없어 고생하는 분들께 도움이 되었길 빕니다.
<!-- 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차 끝 -->
<!--히든 레이어 메뉴 끝-->
<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-->
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
</div>
.subMenu1{padding-left:-10px;}
.subMenu2{padding-left:-10px;}
.subMenu3{padding-left:100px;}
.subMenu4{padding-left:150px;}
.subMenu5{padding-left:220px;}
댓글 6
-
cranky02
2010.02.11 23:55
-
날개249
2010.02.12 18:36
텍스트말고 이미지로 뽑으려면 어떻게 해야하죠?
-
미카_Han
2010.03.21 10:11
<!--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-->이 부분을 아래와 같이 수정해서 사용해도 잘 작동하네요.
<!--2차메뉴-->
<div class="subMenu{$idx}" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->"> -
미카_Han
2010.03.21 10:35
롤아웃했을때 서브메뉴가 사라지게 하는건 어떻게 해야할까요...?
-
열심히살자!!!
2011.07.22 11:34
저도 롤아웃시가 무척 해결되길 기다립니다... -
막샷달인
2010.05.28 11:36
1차 적용 실패...
다시 시도 합니다...
제목 | 글쓴이 | 날짜 |
---|---|---|
트리메뉴(dtree) 대충 정리
[11]
![]() | 한이73 | 2009.07.19 |
xe_official_v2 xe공식레이아웃v2 관리자메뉴 나타나게 하기. [11] | Habile | 2009.07.24 |
활성 메뉴 위젯
![]() | 박송휘 | 2009.09.10 |
오른쪽 서브메뉴영역 제목 이미지로 나타내기
[6]
![]() | hbeen | 2009.09.11 |
1.2.6 버전에서 메뉴추가 안되시는 분들 읽어보세요... [6] | Crazyhouse.cn | 2009.10.19 |
Flash swf 플래쉬 때문에 로그인이나 메뉴가 감추어졌을때에...
[5]
![]() | 태림씨야! | 2010.01.23 |
공식 레이아웃 v2 스킨에서 롤오버 메뉴 적용하기. [6] | 노기욱 | 2010.02.01 |
메뉴목록이 너무 많아 메뉴를 가로 전역에 걸쳐 넣고 싶으십니까? 또는... [3] | 유샤인 | 2010.03.04 |
메뉴에 연결된 링크 모듈이 있는지 없는지 여부에 따라 메뉴의 링크 생성
[1]
![]() | teryboy | 2010.03.17 |
XE 일일이 메뉴출력하지 말고 XE함수들로 한번에 처리하세요! [1] | 소렌트. | 2010.04.11 |
하단 사이트맵 원하는 메뉴만 띄우기 [2] | 제이닷 | 2010.06.02 |
LNB위젯사용하지 않고 초간단 페이지 인식 메뉴 만들기
![]() | 쥰지 | 2010.06.09 |
제어판의 관리자 메뉴 확장해서 보기
[1]
![]() | amd짱좋아 | 2010.06.27 |
저니님의 업 다운 퀵메뉴 적용하기
[4]
![]() | nabul2 | 2010.09.05 |
[생초보팁] 서브메뉴 배경이미지 활용하기
[4]
![]() | 에혀라X | 2010.11.24 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
나왔다 드러갔다하는 메뉴..
[15]
![]() | Mr. JH | 2002.05.17 |
펼침 목록 메뉴 만들기! (나모) - 쭘's
[8]
![]() | 쭘's | 2003.03.25 |
쭘식 메뉴만들기 - 세로 슬라이드 메뉴
[11]
![]() | 쭘's | 2003.04.29 |
펼침메뉴소스 [12] | 이성헌 | 2003.06.08 |
오! 분명 좋은자료^^ 감사요