[문제점]
IE6에서 2차메뉴의 위치가 영 다른곳에서 나옵니다. 참고하시고 선택하세요.
위의 레이아웃에서 사용된 2차 롤오브메뉴의 소스만 뽑아서 분석해 봅니다.
자기가 원하는 레이아웃에 적용이 가능해서 많은 활용이 예상됩니다.
[적용방법]
1. 압축파일을 풀어서 js폴더안에 있는 mootools.js 와 pages.js를 자신이 변경하고자 하는 레이아웃의 js폴더안에 복사합니다.(예; /zbxe/layouts/xe_official/js)
css폴더안의 menu.css를 css폴더안에 복사합니다..(예; /zbxe/layouts/xe_official/css)
2. layout.html를 열어서 아래에 있는 빨간색소스를 추가합니다.
<!--// js 파일 import -->
<!--%import("js/mootools.js")-->
<!--%import("js/pages.js")-->
<!--%import("css/menu.css")-->
<!--// 레이아웃과 연동될 css 파일 import -->
<!--@if($layout_info->colorset == "white")-->
<!--%import("css/white.css")-->
<!--@elseif($layout_info->colorset == "black")-->
<!--%import("css/black.css")-->
<!--@else-->
<!--%import("css/default.css")-->
<!--@end-->
[수정후] 4. 사용하는 칼라의 css를 열어서(예; default.css) 위치를 조정합니다. 빨간색부분들이 메뉴들의 각부분 칼라들입니다. 알아보기 쉽게 색상명으로 적었습니다.
3. layout.html를 열어서 GNB부분을 빨간색소스를 대처합니다.
[수정전]
<!-- GNB -->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['selected'])-->class="on"<!--@end-->><a href="/{$val["href']}" <
<div class="navigation">
<ul><!--@foreach($main_menu->list as $key1 => $val1)--><!--@if($val1['selected'])-->class="active"<!--@end-->><a href="/{$val1["href']}" <!--@if($val1['list'])--><ul><!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['list'])--><ul><!--@foreach($val2['list'] as $key3 => $val3)--><!--@if($val3['list'])--><ul><!--@foreach($val3['list'] as $key4 => $val4)--><
이렇게 하면 일단은 메뉴가 슬라이딩메뉴로 변경이 되었습니다. 테스트...
5. 제가 편집한 menu.css파일입니다..navigation { position:relative; background:black; text-align:left; padding-left:0px; top:50px; height:50px; }
.navigation h2 { display: none; }
.navigation ul { position:relative; padding-top:10px; font-size:12px; right:20px; z-index:98; }
.navigation ul ul { position:absolute; right:auto; top:auto; font-size:11px; width:145px; margin:0px; padding:0px; display:none; z-index:99; }
.navigation ul li:hover ul { display:block; }
.navigation li { background:black; float:left; list-style-type:none; }
.navigation ul ul li { float: none; }
.navigation li a { color:white; padding:10px 10px 5px 10px; margin-right:5px; height:15px; text-decoration:none; display:block; overflow:hidden; }
* html .navigation li a { float:left; }
* html .navigation li ul { clear:left; }
* html .navigation li li a { float:none; }
.navigation li.last a { margin-right:0; }
.navigation li.active a { border-top:green 3px solid; }
.navigation li a:hover { border-top:green 3px solid; }
.navigation li:hover a { border-top:green 3px solid; }
.navigation li.active a { font-weight:bold; }
.navigation li a:hover { background:#d01a71; }
.navigation li ul li a { border-top:yellow 1px solid; margin:0; height:auto; }
.navigation li.active ul li a { border-top:yellow 1px solid; margin:0; height:auto; }
.navigation li ul li a:hover { border-top:yellow 1px solid; margin:0; height:auto; }
.navigation li:hover ul li a { border-top:yellow 1px solid; margin:0; height:auto; }
* html .navigation li ul li { padding:0; margin:0; }
.navigation ul ul li.last a { border-bottom:yellow 1px solid; }
테스트하시면서 자기가 원하는 색상으로 바꾸시면 됩니다.
참고로 .navigation li a:hover { background:#d01a71; } //이부분 색상은 pages.js파일의 98줄 'borderTopColor': '#d01a71', 부분과도 연관이 있습니다.
p.s ; navigation의 이름을 바꾸고자 하면 layout.html / menu.css 그리고 pages.js안에 있는 navigation이란 단어를 바꾸고자하는 단어로 치환하시면 됩니다.
예제로 xe_official 레이아웃을 변환한 파일을 올립니다. 참조하세요.
사랑비Bgm 플레이기 설치하고 제어하기
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
2
물론 접기기능도 동작이 안되더군요.
혹시 저에게만 생기는 현상일지도 모르겠읍니다.