웹마스터 팁
공식 레이아웃 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차 적용 실패...
다시 시도 합니다...
제목 | 글쓴이 | 날짜 |
---|---|---|
제어판의 관리자 메뉴 확장해서 보기
[1]
![]() | amd짱좋아 | 2010.06.27 |
LNB위젯사용하지 않고 초간단 페이지 인식 메뉴 만들기
![]() | 쥰지 | 2010.06.09 |
하단 사이트맵 원하는 메뉴만 띄우기 [2] | 제이닷 | 2010.06.02 |
XE 일일이 메뉴출력하지 말고 XE함수들로 한번에 처리하세요! [1] | 소렌트. | 2010.04.11 |
메뉴에 연결된 링크 모듈이 있는지 없는지 여부에 따라 메뉴의 링크 생성
[1]
![]() | teryboy | 2010.03.17 |
메뉴목록이 너무 많아 메뉴를 가로 전역에 걸쳐 넣고 싶으십니까? 또는... [3] | 유샤인 | 2010.03.04 |
공식 레이아웃 v2 스킨에서 롤오버 메뉴 적용하기. [6] | 노기욱 | 2010.02.01 |
Flash swf 플래쉬 때문에 로그인이나 메뉴가 감추어졌을때에...
[5]
![]() | 태림씨야! | 2010.01.23 |
1.2.6 버전에서 메뉴추가 안되시는 분들 읽어보세요... [6] | Crazyhouse.cn | 2009.10.19 |
오른쪽 서브메뉴영역 제목 이미지로 나타내기
[6]
![]() | hbeen | 2009.09.11 |
활성 메뉴 위젯
![]() | 박송휘 | 2009.09.10 |
xe_official_v2 xe공식레이아웃v2 관리자메뉴 나타나게 하기. [11] | Habile | 2009.07.24 |
트리메뉴(dtree) 대충 정리
[11]
![]() | 한이73 | 2009.07.19 |
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기
[5]
![]() | 엔시아- | 2009.07.16 |
회원 팝업메뉴에서 작성글 클릭시 다른 아이디 검색 안되게 하기 [3] | 절망린 | 2009.07.03 |
게시판 메뉴에 새글 알림 표시 띄우기
[13]
![]() | 보거스내친구 | 2009.06.21 |
관리자모드에서 메뉴 항상 펼치기
[1]
![]() | 아드레날린 | 2009.06.09 |
페이지 및 게시판 메뉴 경로
[2]
![]() | 자반튀김 | 2009.04.15 |
Smarty 한글 메뉴얼 공개합니다. [1] | 미니미 | 2009.03.04 |
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] | 만쓰별(정만) | 2009.01.24 |
오! 분명 좋은자료^^ 감사요