[문제점]
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에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
물론 접기기능도 동작이 안되더군요.
혹시 저에게만 생기는 현상일지도 모르겠읍니다.