문하우스 레이아웃스킨에 상단메뉴를 세로슬라이딩으로 넣기위해서 이것 저것 살펴보다가 이렇게 3탄까지 오게 되었네요.
1탄과 2탄은 약간씩의 문제점이 있었습니다.
그런데 거의 모든 브라우저에서 잘 작동하고 메뉴도 4단까지 지원하는 코딩을 찾았습니다.
선우디엠 레이아웃의 제작자인 선우TC님의 코딩을 기본으로 약간의 수정을 거쳤습니다.
xe_official 레이아웃을 기준으로 설명합니다.
1. layout.html파일을 아래와 같이 수정합니다.
[수정전]
<!-- GNB -->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="/{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}>
<!--@endif--><!--@endforeach-->
</ul>
[수정후]
<!-- 2차 세로메뉴 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<!--@end--><!--@end-->
<div id="gnb1_line">
<table class="gnb1Menu" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="gnb1">
<div id="mainMenu">
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])--> {@ $menu_1 = $val }
<div class="Mmenu">
<li <!--@if($val['selected'])--> class="on" <!--@end-->>
<a href="{$val['href']}" <!--@if($menu_1['list'])--> onmouseover="show('menu_{$mn1}');" onmouseout="hide('menu_{$mn1}');" <!--@end-->
<!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<table cellpadding="0" id="menu_{$mn1}" onmouseover="show('menu_{$mn1}');" onmouseout="hide('menu_{$mn1}');"><tr><td>
<!--@foreach($menu_1['list'] as $key => $val)--><!--@if($val['link'])--> {@ $menu_2 = $val}
<a href="{$val['href']}" <!--@if($menu_2['list'])--> onmouseover="show('menu2_{$mn2}')" onmouseout="hide('menu2_{$mn2}');" <!--@end-->
<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;" <!--@end-->>{$val['link']}
<!--@if($menu_2['list'])--><img src="/images/arrow.gif" class="arrow" /></a>
<div class="Smenu">
<table cellpadding="0" id="menu2_{$mn2}" onmouseover="show('menu2_{$mn2}');" onmouseout="hide('menu2_{$mn2}');"><tr><td>
<!--@foreach($menu_2['list'] as $key => $val)--><!--@if($val['link'])--> {@ $menu_3 = $val}
<a href="{$val['href']}" <!--@if($menu_3['list'])--> onmouseover="show('menu3_{$mn3}');" onmouseout="hide('menu3_{$mn3}');" <!--@end-->
<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;" <!--@end-->>{$val['link']}
<!--@if($menu_3['list'])--><img src="/images/arrow.gif" class="arrow" /></a>
<div class="Smenu">
<table cellpadding="0" id="menu3_{$mn3}" onmouseover="show('menu3_{$mn3}');" onmouseout="hide('menu3_{$mn3}');"><tr><td>
<!--@foreach($menu_3['list'] as $key => $val)--><!--@if($val['link'])--> {@ $menu_4 = $val}
<a href="{$val['href']}" <!--@if($menu_4['list'])--> onmouseover="show('menu4_{$mn4}');" onmouseout="hide('menu4_{$mn4}');" <!--@end-->
<!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
{@$mn4++} <!--@end--><!--@end--></td></tr></table></div>
<!--@else--></a><!--@end-->
{@$mn3++} <!--@end--><!--@end--></td></tr></table></div>
<!--@else--></a><!--@end-->
{@$mn2++} <!--@end--><!--@end--></td></tr></table></div>
{@$mn1++} <!--@end--><!--@end--></div> </td></tr></table>
</div>
2. default.css 파일에 아래의 소수 추가합니다.
/* 2차 세로메뉴 */
#gnb1_line { position:absolute; float:left; height:43px; top:155px; z-index:98; }
#gnb1_line table.gnb1Menu { position:relative; width:980px; height:42px; padding:0px; margin:0px; }
#gnb1_line table td.gnb1 { height:42px; }
#mainMenu { position:absolute; top:2px; *top:0px; height:42px; padding:0px; margin:0px; }
#mainMenu .Mmenu { position:relative; float:left; padding:0px; margin:0px; }
#mainMenu .Mmenu li { list-style:none; position:relative; float:left; padding:0px; margin:-1px 0px 0px 0px; *margin:0px; }
#mainMenu .Mmenu a { position:relative; display:block; float:left; color:#ffffff; font:1.2em arial, sans-serif; white-space:nowrap; text-decoration:none; font-weight:bold; padding:18px 15px 0px 15px; margin:0px; vertical-align:middle; }
#mainMenu .Mmenu a:hover { color:#fbf200; height:26px; padding:18px 15px 0px 15px; margin:0px; text-decoration:none; }
#mainMenu .Mmenu li.on { color:#fbf200; height:41px; padding:0px; margin:-1px 0px 0px 0px; *margin:0px; }
#mainMenu .Mmenu .Smenu { position:relative; top:-68px; right:-100%; margin:0px; }
#mainMenu .Mmenu .arrow { position:absolute; right:8px; padding-top:3px; }
#mainMenu .Mmenu table { position:absolute; top:39px; left:-2px; display:none; padding:0px; z-index:99; }
#mainMenu .Mmenu table td { white-space:nowrap; height:16px; border:1px solid #a7ccdc; background:#76BCDB; }
#mainMenu .Mmenu table td a { float:none; font-weight:normal; font:1em arial, sans-serif; color:#fff; height:16px; padding:7px 20px 3px 10px; border-top:1px solid #fff; border-bottom:1px solid #bec4c7;}
#mainMenu .Mmenu table td a:hover { color:#333333; height:16px; padding:7px 20px 3px 10px; border-bottom:1px solid #bec4c7; background:#ffffff;}
3. xe_official.js 파일에 아래의 소스를 추가합니다.
// 롤오버 2차세로 메뉴 만들기
function show(id) {
document.getElementById(id).style.display="block"; }
function hide(id) {
var evt = window.event;
document.getElementById(id).style.display="none";
if (evt.stopPropagation) {
evt.stopPropagation(); }
else {
evt.cancelBubble = true; } }
window.onclick = function(){clearAll();}
function clearAll(){
clearMenu3();clearMenu2();clearMenu1(); }
function clearMenu3() {
var mi = document.getElementsByTagName("table");
for(var i=0,len=mi.length ; i<len ; i++) {
if(mi[i].id.substr(0,6) == "menu3_") {
document.getElementById(mi[i].id).style.display="none"; } } }
function clearMenu2() {
var mi = document.getElementsByTagName("table");
for(var i=0,len=mi.length ; i<len ; i++) {
if(mi[i].id.substr(0,6) == "menu2_") {
document.getElementById(mi[i].id).style.display="none"; } } }
function clearMenu1() {
var mi = document.getElementsByTagName("table");
for(var i=0,len=mi.length ; i<len ; i++) {
if(mi[i].id.substr(0,5) == "menu_") {
document.getElementById(mi[i].id).style.display="none"; } } }
# 적용된 페이지 https://moonhouse.co.kr/zbxe/zbxe
# 적용된 문하우스레이아웃V3.2 https://moonhouse.co.kr/zbxe/266116