메뉴 동작 문의 > 그누4 질문답변

메뉴 동작 문의 정보

메뉴 동작 문의

본문

아래 소스를 다운 받았는데 메뉴를 브라우저 상단에 배치 했을때는 상단에서 내려오는 메뉴가 보이지
않는데 약간 아래쪽으로 배치를 하면 메뉴에 마우스를 올렸을때 상단에서 서브메뉴가 내려오는것이
보입니다.
올라갈때도 메뉴바 상단으로 올라가면서 사라지구요
첨부 그림 보시면 아카데미 메뉴 마우스를 올리면 커뮤니티의 서브 메뉴가 상단으로 올라갔다 사라지는것이
보입니다.
다른 메뉴도 같구요. 이것을 서브메뉴가 올라가고 내려올때 보이지 않도록 할 수 없을까요
메뉴바의 상단에 올라가거나 내려올때 보이지 않게 하는 방법이 없을까요
부탁 드립니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript">
var g4_path = "./img"; // 이미지경로 메인경로

function flash_menu()
{
// 제작자 : 홈이네
// 홈페이지 : http://homeine.x-y.net/s
// 이 부분은 지우지 말아 주세요.

var t = this;
var g = null; // 서브 메뉴를 담고 있는 오브젝트
var m = null; // 메뉴를 담고 있는 오브젝트
var s = {};
//s.bc_arr = ['ff5500', '0099FF', '66DDFF', '24DD00', 'A800FF', 'FF00D8', '7F4425', '00DDD8', 'FF9900']; // 각 메뉴명마다의 배경 색상
//s.bcb_arr = ['ff7700', '00DDFF', '66FFFF', '24FF00', 'A866FF', 'FF66D8', '7F6625', '00FFD8', 'FFBB00']; // 각 메뉴명마다의 메뉴의 배경색상
//s.l_arr = ['ff3300', '0077FF', '66BBFF', '24BB00', 'A844FF', 'FF44D8', '7F0025', '00BBD8', 'FF7700']; // 서브 메뉴의 경계선 라인 색상

s.bc_arr = ['ff5500', '0099FF', '66DDFF', '24DD00', 'A800FF', 'FF00D8', '7F4425', '00DDD8', 'FF9900', 'FF9900', 'ff5500']; // 각 메뉴명마다의 배경 색상
s.bcb_arr = ['ff7700', '00DDFF', '66FFFF', '24FF00', 'A866FF', 'FF66D8', '7F6625', '00FFD8', 'FFBB00', 'FFBB00', 'ff7700']; // 각 메뉴명마다의 메뉴의 배경색상
s.l_arr = ['ff3300', '0077FF', '66BBFF', '24BB00', 'A844FF', 'FF44D8', '7F0025', '00BBD8', 'FF7700', 'FF7700', 'ff3300']; // 서브 메뉴의 경계선 라인 색상
// 위 색상을 변경하면 메뉴들의 배경색상이 변경됩니다.

s.speed = 0.2; // 진행속도, 이 수치를 변경하면 전체 진행 딜레이와 상호 작용을 합니다. 1 미만의 음수로 입력 가능합니다. 0.1 이 가장 부드럽습니다.
s.delay = 1; // 전체 진행 딜레이, 1000 = 1초, 이 수치를 변경하면 마우스가 메뉴 부분에 닿은 순간부터 (초) 후 프로그램이 실행됩니다. 1이 빠르게 실행됩니다.
s.close_delay = 500; // 전체 종료 딜레이, 1000 = 1초, 이 수치를 변경하면 마우스가 메뉴 부분에서 벗어난 시점부터 (초) 후 열려 있는 메뉴가 닫힙니다.
s.before_click_num = null;
s.is_mousedown = false;

t.menu = [];

// 변수 초기화
t.reset_var = function()
{
m = document.getElementById("slide-menu");
g = document.getElementById("slide-content");
s.before_sa = null;
}

// 종료
t.exit = function()
{
t.reset_var();
}

// 메인 이벤트 발생
t.progress = function()
{
clearTimeout(s.sTime);

var mb_status = "";

// 상단에 대메뉴의 배경
if (s.mb.status == "progress")
{
var left = s.mb.left - ((s.mb.left - s.mb.target_left) * s.speed);
var width = s.mb.width - ((s.mb.width - s.mb.target_width) * s.speed);

if (left.toFixed(1) == s.mb.left.toFixed(1))
{
left = s.mb.target_left;
mb_status += "";
}
else
mb_status += "p";

s.mb.left = left;
s.mb.style.left = left + "px";

if (width.toFixed(1) == s.mb.width.toFixed(1))
{
width = s.mb.target_width;
mb_status += "";
}
else
mb_status += "p";

s.mb.width = width;
s.mb.style.width = width + "px";

if (mb_status == "")
{
s.mb.status = "complete";
}
}

var c = g.children;
var g_status = "";
var s_status = "";

for (var i=0; i<c.length; i++)
{
var layer_tops = c[i].children;
var top_a = m.children[c[i].getAttribute("a_number")];
var is_bool = (m.offsetWidth / 2) <= top_a.offsetLeft ? true : false;

for (var k=0; k<layer_tops.length; k++)
{
var layer_top = layer_tops[k];
var layer = layer_top.children[0];

var back = layer.firstChild;

if (back.status == "progress")
{
var top = back.top - ((back.top - back.target_top) * s.speed);

if (top.toFixed(1) == back.top.toFixed(1))
{
top = back.target_top;
status = "";
}
else
status = "p";

back.top = top;
back.style.top = top + "px";

if (status == "")
{
back.status = "complete";
}
}

if (k > 0)
{
var status = "";

if (layer_top.left != layer_top.target_left)
{
var left = layer_top.left - ((layer_top.left - layer_top.target_left) * s.speed);

if (left.toFixed(1) == layer_top.left.toFixed(1))
{
left = layer_top.target_left;
status += "";
}
else
{
status += "p";
}

layer_top.left = left;
layer_top.style.left = left + "px";
}

if (layer_top.width != layer_top.target_width)
{
var width = layer_top.width - ((layer_top.width - layer_top.target_width) * s.speed);

if (width.toFixed(1) == layer_top.width.toFixed(1))
{
width = layer_top.target_width;
status += "";
}
else
status += "p";

layer_top.width = width;
layer_top.style.width = width + "px";
}

if (layer_top.height != layer_top.target_height)
{
var height = layer_top.height - ((layer_top.height - layer_top.target_height) * s.speed);

if (height.toFixed(1) == layer_top.height.toFixed(1))
{
height = layer_top.target_height;
status += "";
}
else
status += "p";

layer_top.height = height;
layer_top.style.height = height + "px";
}

if (layer_top.top != layer_top.target_top)
{
var top = layer_top.top - ((layer_top.top - layer_top.target_top) * s.speed);

if (top.toFixed(1) == layer_top.top.toFixed(1))
{
top = layer_top.target_top;
status += "";
}
else
status += "p";

layer_top.top = top;
layer_top.style.top = top + "px";
}

if (layer.left != layer.target_left)
{
var left = layer.left - ((layer.left - layer.target_left) * s.speed);

if (left.toFixed(1) == layer.left.toFixed(1))
{
left = layer.target_left;
status += "";
}
else
status += "p";

layer.left = left;
layer.style.left = left + "px";
}

if (status == "")
{
if (layer_top.status == "open")
layer_top.status = "open-complete";
else if (layer_top.status == "close")
{
c[i].removeChild(layer_top);
}
}
}
}

var status = "";

var top = c[i].top - ((c[i].top - c[i].target_top) * s.speed);

if (top.toFixed(1) == c[i].top.toFixed(1))
{
top = c[i].target_top;
status = "";
}
else
status = "p";

c[i].top = top;
c[i].style.top = top + "px";

if (status == "")
{
if (c[i].status == "open")
c[i].status = "open-complete";
else if (c[i].status == "close")
{
if (c[i] == s.content)
s.content = null;

g.removeChild(c[i]);
}
}

g_status += status;
}

c = null;

if (mb_status == "" && g_status == "" && s_status == "")
{
var layer_tops = g.children;

if (!layer_tops.length)
{
s.status = "complete";
t.exit();
return;
}
}

s.sTime = setTimeout(t.progress, s.delay);
}

// 상위 메뉴의 배경 롤링 위치 지정
t.set_mb = function(a)
{
s.mb.style.borderBottom = "3px solid #" + s.bc_arr[a.getAttribute("number")];
s.mb.target_left = a.offsetLeft;
s.mb.target_width = a.offsetWidth;
}

// 대 메뉴는 마우스 dblclick 가 아닌 두번 째 클릭을 하여야만 링크로 이동
// 휴대기기를 위해서 해 놓았지면 별로 쓸모가 없는것 같음
t.menu_click = function(a, e)
{
var num = a.getAttribute("number");

if (s.before_click_num != num)
{
a.blur();
s.before_click_num = num;
return falseEvent(e);
}

return true;
}

// 서브 메뉴의 마우스 오버시
t.sub_over = function(e)
{
var event = e || window.event;
var a = event.srcElement || event.target;

clearTimeout(s.closeTime);

if (a.nodeName == "A" && a.getAttribute("number") != null && s.is_mousedown == false)
{
if (s.before_sa)
{
var a_number_arr = a.getAttribute("number").split("-");
var ab_number_arr = s.before_sa.getAttribute("number").split("-");

var a_number_str = String(a.getAttribute("number"));
var ab_number_str = String(s.before_sa.getAttribute("number"));

if (a_number_str.indexOf(ab_number_str) != 0 && a_number_str.length > ab_number_str.length && a_number_arr.length > ab_number_arr.length)
return;
}

s.before_sa = a;

var a_layer = a.parentNode;
var a_layer_top = a_layer.parentNode;
var back = a_layer.firstChild;

back.target_top = a.offsetTop;
back.status = "progress";

var a_number = a.getAttribute("number");
var number_arr = a_number.split("-");
var top_number = number_arr[0];
var content_number = number_arr[0];

var sub_id = "sub-content" + a_number;
var layer_top = document.getElementById(sub_id);

var top_a = m.children[top_number];
var is_bool = (m.offsetWidth / 2) <= top_a.offsetLeft ? true : false;

if (!layer_top)
{
if (t.menu[a_number + "-0"])
{
var layer_top = document.createElement("DIV");
layer_top.className = "layer-top";
layer_top.setAttribute("id", sub_id);
layer_top.setAttribute("open_layer_id", "");

layer_top.onmouseover = t.sub_over;
layer_top.onmouseout = t.out;

s.content.appendChild(layer_top);

var layer = document.createElement("DIV");

layer.style.backgroundColor = "#" + s.bc_arr[content_number];

if (is_bool)
{
layer.style.borderRight = "1px solid #" + s.l_arr[content_number];
layer.className = "b-layer";
}
else
{
layer.style.borderLeft = "1px solid #" + s.l_arr[content_number];
layer.className = "layer";
}

layer_top.appendChild(layer);

var n = 0;
while (true)
{
var t_number = a_number + "-" + n;
var menu = t.menu[t_number];

if (typeof(menu) == "undefined")
break;

var ta = document.createElement("A");

if (menu[1])
{
ta.setAttribute("number", t_number);
ta.setAttribute("href", menu[1]);
}
else
ta.style.cursor = "default";

ta.innerHTML = menu[0];

layer.appendChild(ta);

if (typeof(t.menu[t_number + "-0"]) != "undefined")
{
if (is_bool)
{
ta.style.backgroundImage = "url(" + g4_path + "/ibb" + content_number + ".gif)";
ta.style.backgroundPosition = "4% 40%";
}
else
{
ta.style.backgroundImage = "url(" + g4_path + "/ib" + content_number + ".gif)";
ta.style.backgroundPosition = "96% 40%";
}

ta.style.backgroundRepeat = "no-repeat";
}

n++;
}

var back = document.createElement("DIV");
back.className = "sub-back";
back.style.width = (layer.offsetWidth - 1) + "px";
back.style.height = ta.offsetHeight + "px";
back.style.backgroundColor = "#" + s.bcb_arr[content_number];
back.top = -ta.offsetHeight;
back.target_top = back.top;
back.style.top = back.top + "px";
back.style.left = "0";
layer.insertBefore(back, layer.firstChild);

if (is_bool)
{
layer.left = layer.offsetWidth;
layer.style.left = layer.left + "px";

layer_top.left = a_layer_top.left - layer.offsetWidth;
}
else
{
layer.left = -layer.offsetWidth;
layer.style.left = layer.left + "px";

layer_top.left = a_layer.offsetWidth + a_layer_top.target_left;
}

layer_top.width = layer.offsetWidth;
layer_top.style.width = layer_top.width + "px";

layer_top.height = layer.offsetHeight;
layer_top.style.height = layer_top.height + "px";

layer_top.top = a_layer_top.offsetTop + a.offsetTop;
layer_top.style.top = layer_top.top + "px";

back.status = "progress";
}
}

t.close_layer(a_layer_top.getAttribute("open_layer_id"), is_bool);

if (layer_top)
{
layer_top.target_top = layer_top.offsetTop;
var layer = layer_top.children[0];

if (is_bool)
{
layer_top.target_left = a_layer_top.target_left - layer.offsetWidth;
layer.target_left = 0;
}
else
{
layer_top.target_left = a_layer.offsetWidth + a_layer_top.target_left;
layer.target_left = 0;

}

layer_top.style.left = layer_top.left + "px";

layer_top.target_width = layer.offsetWidth;
layer_top.target_height = layer.offsetHeight;
layer_top.status = "open";
layer_top.style.zIndex = "1";
}
else
sub_id = "";

a_layer_top.setAttribute("open_layer_id", sub_id);

s.sTime = setTimeout(t.progress, s.delay);
}
}

// 서브 메뉴에서 하위 메뉴들을 닫을때 사용
t.close_layer = function(open_layer_id, is_bool)
{
if (open_layer_id)
{
var layer_top = document.getElementById(open_layer_id);

if (layer_top)
{
if (layer_top.status == "open" || layer_top.status == "open-complete")
{
var layer = layer_top.children[0];

var id_arr = open_layer_id.split("-");
id_arr.pop();

var parent_layer_top = document.getElementById(id_arr.join("-"));
var parent_layer = parent_layer_top.children[0];

layer_top.target_top = layer_top.offsetTop;

layer.left = layer.offsetLeft;
layer.target_left = layer.left;

layer_top.left = layer_top.offsetLeft;
layer_top.target_left = layer_top.left;

layer_top.width = layer_top.offsetWidth;
layer_top.target_width = layer_top.width;

layer_top.height = layer_top.offsetHeight;
layer_top.target_height = layer_top.height;

layer_top.style.zIndex = "0";
layer_top.status = "close";

var id = layer_top.getAttribute("open_layer_id");

if (id)
return t.close_layer(id, is_bool);
}
}
}
}

// 상단 대메뉴 마우스 오버시
t.check = function(e)
{
// 로딩전, 마우스 다운 이벤트가 발생중, 배경 스크롤이 생성 되지 않았으면 실행 중지
if (s.status == "undefined" || s.is_mousedown == true || s.mb == null)
return false;

// 종료 중지
clearTimeout(s.closeTime);

var a = e.srcElement || e.target;

// a 엘리먼트에 넘버 애트리뷰트가 있다면
if (a.nodeName == "A" && a.getAttribute("number") != null)
{
s.before_sa = null;

// 메인 이벤트 중지
clearTimeout(s.sTime);

// 이전 선택 메뉴와 같지 않다면 위치 설정하고 준비
if (s.before_a != a)
{
t.set_mb(a);

// 상태 변경
s.mb.status = "progress";
}

// 이전 마우스 오버한 링크 오브젝트 저장
s.before_a = a;

var content_number = a.getAttribute("number"); // 대메뉴의 번호
var id = "slide-content" + content_number; // 서브 메뉴들의 가장 상위에 있는 div 아이디
var sub_id = "sub-content" + content_number; // 서브 div 아이디
s.content = document.getElementById(id);

// 대 메뉴의 반을 나눠 서브 메뉴들의 위치를 지정함
var is_bool = (m.offsetWidth / 2) <= a.offsetLeft ? true : false;

// 상위 엘리먼트가 없다면
if (!s.content)
{
var height = 0;

// 상위 엘리먼트 생성하고 애트리뷰트 값 지정
s.content = document.createElement("DIV");
s.content.setAttribute("a_number", content_number);
s.content.setAttribute("id", id);
s.content.className = "content";
s.content.style.width = m.offsetWidth + "px";
s.content.style.zIndex = "1";

// 문서에 추가
g.appendChild(s.content);

// 하위 메뉴가 있다면
if (typeof(t.menu[content_number + "-0"]) != "undefined")
{
// 상위 메뉴의 하위 서브 메뉴를 담고 있는 div 생성
var layer_top = document.createElement("DIV");
layer_top.className = "layer-top";
layer_top.setAttribute("id", sub_id);
layer_top.setAttribute("open_layer_id", ""); // 이 서버 메뉴에서 열린 하위 메뉴를 저장 하기 위해서

// 이벤트 생성
layer_top.onmouseover = t.sub_over;
layer_top.onmouseout = t.out;

s.content.appendChild(layer_top);

var layer = document.createElement("DIV");

if (is_bool)
layer.className = "b-layer";
else
layer.className = "layer";

layer.style.backgroundColor = "#" + s.bc_arr[content_number];

layer_top.appendChild(layer);

var n = 0;
while (true)
{
var t_number = content_number + "-" + n;

var menu = t.menu[t_number];

if (typeof(menu) == "undefined")
break;

var ta = document.createElement("A");

if (menu[1])
{
ta.setAttribute("number", t_number);
ta.setAttribute("href", menu[1]);
}
else
ta.style.cursor = "default";

ta.innerHTML = menu[0];

if (typeof(t.menu[t_number + "-0"]) != "undefined")
{
if (is_bool)
{
ta.style.backgroundImage = "url(" + g4_path + "/ibb" + content_number + ".gif)";
ta.style.backgroundPosition = "4% 40%";
}
else
{
ta.style.backgroundImage = "url(" + g4_path + "/ib" + content_number + ".gif)";
ta.style.backgroundPosition = "96% 40%";
}

ta.style.backgroundRepeat = "no-repeat";
}

layer.appendChild(ta);
n++;
}

// 메뉴의 롤링 배경 생성
var back = document.createElement("DIV");
back.className = "sub-back";
back.style.width = layer.offsetWidth + "px";
back.style.height = ta.offsetHeight + "px";
back.style.backgroundColor = "#" + s.bcb_arr[content_number];
back.top = -ta.offsetHeight;
back.target_top = back.top;
back.style.top = back.top + "px";
back.style.left = "0";
layer.insertBefore(back, layer.firstChild);

layer_top.style.zIndex = "2";

if (is_bool)
layer_top.left = a.offsetLeft - (layer.offsetWidth - s.before_a.offsetWidth);
else
layer_top.left = a.offsetLeft;

height = layer.offsetHeight;

layer_top.style.left = layer_top.left + "px";
layer_top.style.width = layer.offsetWidth + "px";
layer_top.style.height = height + "px";

layer_top.target_left = layer_top.left;

layer_top.status = "open";
back.status = "progress";
}

s.content.top = -height;
s.content.style.top = s.content.top + "px";
s.content.style.height = height + "px";
}

var c = g.children;

for (var i=0; i<c.length; i++)
{
var layer_tops = c[i].children;

if (layer_tops.length > 1)
{
for (var j=1; j<layer_tops.length; j++)
{
var layer_top = layer_tops[j];
var layer = layer_top.children[0];

var height = layer_top.offsetTop + layer_top.offsetHeight;

layer_top.target_left = layer_top.left;
layer_top.target_width = layer_top.width;
layer_top.target_height = layer_top.height;
layer.target_left = layer.left;
layer_top.zIndex = "0";

layer_top.status = "close";

if (c[i].offsetHeight < height)
c[i].style.height = height + "px";
}
}

if (s.content == c[i])
{
c[i].target_top = 0;
c[i].style.zIndex = "1";
c[i].status = "open";
}
else
{
c[i].target_top = -c[i].offsetHeight;
c[i].style.zIndex = "0";
c[i].status = "close";
}
}

t.set_g_location();

s.sTime = setTimeout(t.progress, s.delay);
}
}

// 열려 있는 문서 닫기
t.content_close_check = function()
{
if (s.content)
{
clearTimeout(s.sTime);

var layer_tops = s.content.children;

if (layer_tops.length > 0)
{
for (var i=1; i<layer_tops.length; i++)
{
var layer_top = layer_tops[i];
var layer = layer_top.children[0];

var height = layer_top.offsetTop + layer_top.offsetHeight;

layer_top.target_left = layer_top.left;
layer_top.target_width = layer_top.width;
layer_top.target_height = layer_top.height;
layer.target_left = layer.left;

layer_top.zIndex = "0";
layer_top.status = "close";

if (s.content.offsetHeight < height)
s.content.style.height = height + "px";
}

s.content.target_top = -s.content.offsetHeight;
s.content.status = "close";
}

s.sTime = setTimeout(t.progress, s.delay);
}
}

// 종료 이벤트 전에 복기 위치를 제조정
t.close_check = function()
{
clearTimeout(s.closeTime);
t.content_close_check();
}

// 메뉴와 서브 메뉴에서 아웃 이벤트가 발생시
t.out = function(e)
{
if (s.status == "undefined" || s.is_mousedown == true || s.mb == null)
return false;

clearTimeout(s.closeTime);
s.closeTime = setTimeout(t.close_check, s.close_delay);
}

// 문서의 마우스 다운 이벤트 발생시
t.document_mousedown = function(e)
{
if (!e)
e = e || window.event;

if (e)
{
if (windowClient().width < e.clientX || windowClient().height < e.clientY)
return false;
}

s.is_mousedown = true;
return falseEvent(e);
}

// 문서의 마우스 업 이벤트 발생시
t.document_mouseup = function(e)
{
if (s.status == "undefined" || s.mb == null)
return false;

s.is_mousedown = false;

e = e || window.event;
var a = e.srcElement || e.target;

if (a.nodeName == "A" && a.getAttribute("number") != null)
{
var content = a.parentNode.parentNode.parentNode;

if (a.parentNode == m)
t.check(e);
else if (content == s.content)
t.sub_over(e);
}
else
{
t.content_close_check();
}
}

// 윈도우의 사이즈가 조정되면 에러를 방지하기 위해 위치를 제조정
t.set_g_location = function()
{
g.style.top = (m.offsetTop + m.offsetHeight) + "px";
}

// 로딩시
function load()
{
removeEvent(window, "onload", load);

t.reset_var();

s.before_a = m.children[0];

s.mb = document.createElement("DIV");
s.mb.className = "back";
m.insertBefore(s.mb, m.lastChild);

s.mb.left = -s.before_a.offsetWidth;
s.mb.width = s.before_a.offsetWidth;

s.mb.style.left = s.mb.left + "px";
s.mb.style.width = s.mb.width + "px";
s.mb.style.top = "0";
s.mb.style.height = (s.before_a.offsetHeight - 3) + "px";

t.set_mb(s.before_a);

var a = m.children;
for (var i=0; i<a.length; i++)
{
if (typeof(t.menu[a[i].getAttribute("number") + "-0"]) != "undefined")
{
a[i].style.backgroundImage = "url(" + g4_path + "/im1.gif)";
a[i].style.backgroundPosition = "50% 85%";
a[i].style.backgroundRepeat = "no-repeat";
}
}

t.set_g_location();
g.style.left = "0";
g.ondragstart = falseEvent;
m.ondragstart = falseEvent;

s.status = "progress";
s.mb.status = "progress";
g.status = "complete";

s.closeTime = null;

s.sTime = setTimeout(t.progress, s.delay);
}

addEvent(window, "onload", load);
addEvent(document, "onmousedown", t.document_mousedown);
addEvent(document, "onmouseup", t.document_mouseup);
addEvent(window, "onresize", function()
{
t.set_g_location();
});
}

function addEvent(o,e,f){var k;if(o.attachEvent){o.attachEvent(e,f);}else if(o.addEventListener){if(e=="onmousewheel"){k="DOMMouseScroll";}else{k=e.substring(2,String(e).length);};o.addEventListener(k,f,false);};};
function removeEvent(o,e,f){var k;if(o.removeEventListener){if(e=="onmousewheel"){k="DOMMouseScroll";}else{k=e.substring(2,String(e).length);};o.removeEventListener(k,f,false);}else{o.detachEvent(e,f);};};
function falseEvent(e){var event=e||window.event;if(e==null){return false};event.cancelBubble=true;if(event.stopPropagation){event.stopPropagation();}if(event.preventDefault){event.preventDefault();};return false;};
function windowScroll(){var r={};r.left=typeof(document.documentElement)=="undefined"?document.body.scrollLeft:document.documentElement.scrollLeft!=document.body.scrollLeft&&document.body.scrollLeft!=0?document.body.scrollLeft:document.documentElement.scrollLeft;r.top=typeof(document.documentElement)=="undefined"?document.body.scrollTop:document.documentElement.scrollTop!=document.body.scrollTop&&document.body.scrollTop!=0?document.body.scrollTop:document.documentElement.scrollTop;r.width=typeof(document.documentElement)=="undefined"?document.body.scrollWidth:document.documentElement.scrollWidth;r.height=typeof(document.documentElement)=="undefined"?document.body.scrollHeight:document.documentElement.scrollHeight;return r;};
function windowClient(){var r={};r.width=typeof(document.documentElement)=="undefined"?document.body.clientWidth:document.documentElement.clientWidth;r.height=typeof(document.documentElement)=="undefined"?document.body.clientHeight:document.documentElement.clientHeight;return r;};

var bb = new flash_menu("slide-menu", "slide-content");

//bb.menu['상위번호-하위번호'] = ['메뉴명', '링크'];

bb.menu['0-0'] = ['공지사항', '#'];

bb.menu['0-0-0'] = ['공지사항', '#'];

bb.menu['0-0-0-0'] = ['공지사항', '#'];

bb.menu['0-0-0-0-0'] = ['공지사항', '#'];

bb.menu['0-0-0-0-0-0'] = ['공지사항', '#'];

bb.menu['0-0-0-0-0-0-0'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-1'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-1'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-2'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0-0'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0-1'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0-2'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0-3'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0-4'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-0-0-0-0-5'] = ['공지사항', '#'];

bb.menu['0-0-0-0-0-0-1'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-2'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-3'] = ['공지사항', '#'];
bb.menu['0-0-0-0-0-0-4'] = ['공지사항', '#'];

bb.menu['0-0-0-0-0-1'] = ['공지사항', '#'];

bb.menu['0-0-0-0-1'] = ['공지사항', '#'];

bb.menu['0-0-0-1'] = ['공지사항', '#'];
bb.menu['0-0-0-2'] = ['공지사항', '#'];
bb.menu['0-0-0-3'] = ['공지사항', '#'];

bb.menu['0-0-1'] = ['공지사항', '#'];
bb.menu['0-0-2'] = ['공지사항', '#'];

bb.menu['0-2-0'] = ['공지사항', '#'];
bb.menu['0-2-1'] = ['공지사항', '#'];
bb.menu['0-2-2'] = ['공지사항', '#'];

bb.menu['0-1'] = ['사이트맵', '#'];
bb.menu['0-1-0'] = ['사이트맵', '#'];
bb.menu['0-1-1'] = ['사이트맵', '#'];
bb.menu['0-1-2'] = ['사이트맵', '#'];
bb.menu['0-1-3'] = ['사이트맵', '#'];

bb.menu['0-1-3-0'] = ['사이트맵', '#'];
bb.menu['0-1-3-1'] = ['사이트맵', '#'];

bb.menu['0-2'] = ['자주묻는질문', '#'];
bb.menu['0-3'] = ['사이트맵', '#'];

bb.menu['1-0'] = ['아파트', '#'];

bb.menu['1-0-0'] = ['매매', '#'];
bb.menu['1-0-0-0'] = ['매매', '#'];
bb.menu['1-0-0-1'] = ['매매', '#'];
bb.menu['1-0-0-2'] = ['매매', '#'];
bb.menu['1-0-0-1-0'] = ['매매', '#'];

bb.menu['1-0-0-1-0-0'] = ['매매/전세/월세', '#'];
bb.menu['1-0-0-1-0-1'] = ['매매/전세/월세', '#'];
bb.menu['1-0-0-1-0-1-0'] = ['매매/전세/월세', '#'];
bb.menu['1-0-0-1-0-1-1'] = ['매매/전세/월세', '#'];
bb.menu['1-0-0-1-0-1-2'] = ['매매/전세/월세', '#'];
bb.menu['1-0-0-1-0-1-3'] = ['매매/전세/월세', '#'];

bb.menu['1-0-0-1-1'] = ['매매', '#'];
bb.menu['1-0-0-1-2'] = ['매매', '#'];
bb.menu['1-0-0-1-3'] = ['매매', '#'];

bb.menu['1-0-1'] = ['전세', '#'];
bb.menu['1-0-2'] = ['월세', '#'];

bb.menu['1-3-0'] = ['매매', '#'];
bb.menu['1-3-1'] = ['전세', '#'];
bb.menu['1-3-2'] = ['월세', '#'];

bb.menu['1-1'] = ['빌라', '#'];
bb.menu['1-2'] = ['상가', '#'];
bb.menu['1-3'] = ['토지', '#'];
bb.menu['1-4'] = ['분양권', '#'];
bb.menu['1-5'] = ['원룸', '#'];

bb.menu['2-0'] = ['공주시', '#'];

bb.menu['2-0-0'] = ['반죽동', '#'];
bb.menu['2-0-1'] = ['봉황동', '#'];
bb.menu['2-0-2'] = ['중학동', '#'];
bb.menu['2-0-3'] = ['중동', '#'];
bb.menu['2-0-4'] = ['산성동', '#'];
bb.menu['2-0-5'] = ['교동', '#'];
bb.menu['2-0-6'] = ['웅진동', '#'];
bb.menu['2-0-7'] = ['금성동', '#'];
bb.menu['2-0-8'] = ['옥룡동', '#'];
bb.menu['2-0-9'] = ['금학동', '#'];
bb.menu['2-0-10'] = ['봉정동', '#'];
bb.menu['2-0-11'] = ['주미동', '#'];
bb.menu['2-0-12'] = ['태봉동', '#'];
bb.menu['2-0-13'] = ['오곡동', '#'];
bb.menu['2-0-14'] = ['신기동', '#'];
bb.menu['2-0-15'] = ['소학동', '#'];
bb.menu['2-0-16'] = ['상왕동', '#'];
bb.menu['2-0-17'] = ['무릉동', '#'];
bb.menu['2-0-18'] = ['월송동', '#'];
bb.menu['2-0-19'] = ['신관동', '#'];
bb.menu['2-0-20'] = ['금흥동', '#'];
bb.menu['2-0-21'] = ['쌍신동', '#'];
bb.menu['2-0-22'] = ['월미동', '#'];
bb.menu['2-0-23'] = ['검상동', '#'];
bb.menu['2-0-24'] = ['석장리동', '#'];
bb.menu['2-0-25'] = ['송선동', '#'];
bb.menu['2-0-26'] = ['동현동', '#'];
bb.menu['2-0-27'] = ['유구읍', '#'];
bb.menu['2-0-28'] = ['이인면', '#'];
bb.menu['2-0-29'] = ['탄천면', '#'];
bb.menu['2-0-30'] = ['계룡면', '#'];
bb.menu['2-0-31'] = ['반포면', '#'];
bb.menu['2-0-32'] = ['의당면', '#'];
bb.menu['2-0-33'] = ['정안면', '#'];
bb.menu['2-0-34'] = ['우성면', '#'];
bb.menu['2-0-35'] = ['사곡면', '#'];
bb.menu['2-0-36'] = ['신풍면', '#'];

bb.menu['2-1'] = ['천안시 서북구', '#'];

bb.menu['2-1-0'] = ['와촌동', '#'];
bb.menu['2-1-1'] = ['성정동', '#'];
bb.menu['2-1-2'] = ['백석동', '#'];
bb.menu['2-1-3'] = ['두정동', '#'];
bb.menu['2-1-4'] = ['성성동', '#'];
bb.menu['2-1-5'] = ['차암동', '#'];
bb.menu['2-1-6'] = ['쌍용동', '#'];
bb.menu['2-1-7'] = ['불당동', '#'];
bb.menu['2-1-8'] = ['업성동', '#'];
bb.menu['2-1-9'] = ['신당동', '#'];
bb.menu['2-1-10'] = ['부대동', '#'];
bb.menu['2-1-11'] = ['성환읍', '#'];
bb.menu['2-1-12'] = ['성거읍', '#'];
bb.menu['2-1-13'] = ['직산읍', '#'];
bb.menu['2-1-14'] = ['입장면', '#'];
bb.menu['2-1-15'] = ['성정1동', '#'];
bb.menu['2-1-16'] = ['성정2동', '#'];
bb.menu['2-1-17'] = ['쌍용1동', '#'];
bb.menu['2-1-18'] = ['쌍용2동', '#'];
bb.menu['2-1-19'] = ['쌍용3동', '#'];
bb.menu['2-1-20'] = ['부성동', '#'];

bb.menu['2-2'] = ['청양군', '#'];

bb.menu['2-2-0'] = ['청양읍', '#'];
bb.menu['2-2-1'] = ['운곡면', '#'];
bb.menu['2-2-2'] = ['대치면', '#'];
bb.menu['2-2-3'] = ['정산면', '#'];
bb.menu['2-2-4'] = ['목면', '#'];
bb.menu['2-2-5'] = ['청남면', '#'];
bb.menu['2-2-6'] = ['장평면', '#'];
bb.menu['2-2-7'] = ['남양면', '#'];
bb.menu['2-2-8'] = ['화성면', '#'];
bb.menu['2-2-9'] = ['비봉면', '#'];

bb.menu['2-3'] = ['홍성군', '#'];

bb.menu['2-3-0'] = ['홍성읍', '#'];
bb.menu['2-3-1'] = ['광천읍', '#'];
bb.menu['2-3-2'] = ['홍북면', '#'];
bb.menu['2-3-3'] = ['금마면', '#'];
bb.menu['2-3-4'] = ['홍동면', '#'];
bb.menu['2-3-5'] = ['장곡면', '#'];
bb.menu['2-3-6'] = ['은하면', '#'];
bb.menu['2-3-7'] = ['결성면', '#'];
bb.menu['2-3-8'] = ['서부면', '#'];
bb.menu['2-3-9'] = ['갈산면', '#'];
bb.menu['2-3-10'] = ['구항면', '#'];

bb.menu['2-4'] = ['논산시', '#'];

bb.menu['2-4-0'] = ['화지동', '#'];
bb.menu['2-4-1'] = ['반월동', '#'];
bb.menu['2-4-2'] = ['대교동', '#'];
bb.menu['2-4-3'] = ['부창동', '#'];
bb.menu['2-4-4'] = ['취암동', '#'];
bb.menu['2-4-5'] = ['등화동', '#'];
bb.menu['2-4-6'] = ['지산동', '#'];
bb.menu['2-4-7'] = ['덕지동', '#'];
bb.menu['2-4-8'] = ['내동', '#'];
bb.menu['2-4-9'] = ['강산동', '#'];
bb.menu['2-4-10'] = ['관촉동', '#'];
bb.menu['2-4-11'] = ['강경읍', '#'];
bb.menu['2-4-12'] = ['연무읍', '#'];
bb.menu['2-4-13'] = ['성동면', '#'];
bb.menu['2-4-14'] = ['광석면', '#'];
bb.menu['2-4-15'] = ['노성면', '#'];
bb.menu['2-4-16'] = ['상월면', '#'];
bb.menu['2-4-17'] = ['부적면', '#'];
bb.menu['2-4-18'] = ['연산면', '#'];
bb.menu['2-4-19'] = ['벌곡면', '#'];
bb.menu['2-4-20'] = ['양촌면', '#'];
bb.menu['2-4-21'] = ['가야곡면', '#'];
bb.menu['2-4-22'] = ['은진면', '#'];
bb.menu['2-4-23'] = ['채운면', '#'];

bb.menu['2-5'] = ['예산군', '#'];

bb.menu['2-5-0'] = ['예산읍', '#'];
bb.menu['2-5-1'] = ['삽교읍', '#'];
bb.menu['2-5-2'] = ['대술면', '#'];
bb.menu['2-5-3'] = ['신양면', '#'];
bb.menu['2-5-4'] = ['광시면', '#'];
bb.menu['2-5-5'] = ['대흥면', '#'];
bb.menu['2-5-6'] = ['응봉면', '#'];
bb.menu['2-5-7'] = ['덕산면', '#'];
bb.menu['2-5-8'] = ['봉산면', '#'];
bb.menu['2-5-9'] = ['고덕면', '#'];
bb.menu['2-5-10'] = ['신암면', '#'];
bb.menu['2-5-11'] = ['오가면', '#'];

bb.menu['2-6'] = ['계룡시', '#'];
//금암동, 두마면, 엄사면, 신도안면
bb.menu['2-7'] = ['태안군', '#'];
// 태안읍, 안면읍, 고남면, 남면, 근흥면, 소원면, 원북면, 이원면

bb.menu['2-8'] = ['금산군', '#'];
//금산읍, 금성면, 제원면, 부리면, 군북면, 남일면, 남이면, 진산면, 복수면, 추부면
bb.menu['2-9'] = ['부여군', '#'];
//부여읍, 규암면, 은산면, 외산면, 내산면, 구룡면, 홍산면, 옥산면, 남면, 충화면, 양화면, 임천면, 장암면, 세도면, 석성면, 초촌면

bb.menu['2-10'] = ['보령시', '#'];
//대천동, 죽정동, 화산동, 동대동, 명천동, 궁촌동, 내항동, 남곡동, 요암동, 신흑동, 웅천읍, 주포면, 오천면, 천북면, 청소면, 청라면, 남포면, 주산면, 미산면, 성주면, 주교면, 대천1동, 대천2동, 대천3동, 대천4동, 대천5동

bb.menu['2-11'] = ['서천군', '#'];
// 장항읍, 서천읍, 마서면, 화양면, 기산면, 한산면, 마산면, 시초면, 문산면, 판교면, 종천면, 비인면, 서면

bb.menu['2-12'] = ['아산시', '#'];
// 온천동, 실옥동, 방축동, 기산동, 초사동, 신인동, 법곡동, 장존동, 좌부동, 읍내동, 풍기동, 용화동, 모종동, 권곡동, 배미동, 득산동, 점양동, 신동, 남동, 염치읍, 배방읍, 송악면, 탕정면, 음봉면, 둔포면, 영인면, 인주면, 선장면, 도고면, 신창면, 온양1동, 온양2동, 온양3동, 온양4동, 온양5동, 온양6동

bb.menu['2-13'] = ['천안시 동남구', '#'];

//대흥동, 성황동, 문화동, 사직동, 영성동, 오룡동, 원성동, 구성동, 청수동, 삼룡동, 청당동, 유량동, 봉명동, 다가동, 용곡동, 신방동, 쌍용동, 신부동, 안서동, 구룡동, 목천읍, 풍세면, 광덕면, 북면, 성남면, 수신면, 병천면, 동면, 중앙동, 문성동, 원성1동, 원성2동, 일봉동, 청룡동, 신안동

bb.menu['2-14'] = ['서산시', '#'];
//읍내동, 동문동, 갈산동, 온석동, 잠홍동, 수석동, 석림동, 석남동, 예천동, 죽성동, 양대동, 오남동, 장동, 덕지천동, 대산읍, 인지면, 부석면, 팔봉면, 지곡면, 성연면, 음암면, 운산면, 해미면, 고북면, 부춘동, 동문1동, 동문2동

bb.menu['2-15'] = ['당진시', '#'];
//읍내동, 채운동, 우두동, 원당동, 시곡동, 수청동, 대덕동, 행정동, 용연동, 사기소동, 구룡동, 합덕읍, 송악읍, 고대면, 석문면, 대호지면, 정미면, 면천면, 순성면, 우강면, 신평면, 송산면, 당진1동, 당진2동, 당진3동

bb.menu['4-0'] = ['컴퓨터/노트북/주변기기', '#'];
bb.menu['4-1'] = ['가전제품', '#'];
bb.menu['4-2'] = ['휴대폰', '#'];
bb.menu['4-3'] = ['레저용품', '#'];
bb.menu['4-4'] = ['낚시용품', '#'];
bb.menu['4-5'] = ['공구', '#'];
bb.menu['4-6'] = ['유아용품', '#'];
bb.menu['4-7'] = ['성인용품', '#'];

bb.menu['5-0'] = ['현대', '#'];
bb.menu['5-1'] = ['기아', '#'];
bb.menu['5-1-0'] = ['봉고 프런티어', '#'];
bb.menu['5-2'] = ['GM', '#'];
bb.menu['5-3'] = ['쌍용', '#'];
bb.menu['5-4'] = ['기타', '#'];

bb.menu['6-0'] = ['지역별게시판', '#'];
bb.menu['6-1'] = ['엽기유머', '#'];
bb.menu['6-1-0'] = ['유머게시판', '#'];
bb.menu['6-2'] = ['애인구해요', '#'];
bb.menu['6-3'] = ['친구구해요', '#'];
bb.menu['6-4'] = ['진지하게만나보실분', '#'];

bb.menu['7-0'] = ['추천순위', '#'];
bb.menu['7-1'] = ['액션', '#'];
bb.menu['7-1-0'] = ['흥행영화', '#'];
bb.menu['7-2'] = ['스릴러', '#'];
bb.menu['7-3'] = ['코믹', '#'];
bb.menu['7-4'] = ['애니메이션', '#'];
bb.menu['7-5'] = ['에로', '#'];
bb.menu['7-6'] = ['SF', '#'];

bb.menu['8-0'] = ['정치', '#'];
bb.menu['8-1'] = ['경제', '#'];
bb.menu['8-1-0'] = ['시사뉴스', '#'];
bb.menu['8-2'] = ['사회', '#'];
bb.menu['8-3'] = ['스포츠', '#'];
bb.menu['8-4'] = ['연예', '#'];
bb.menu['8-5'] = ['과학', '#'];
bb.menu['8-6'] = ['문화', '#'];

bb.menu['9-0'] = ['정치', '#'];
bb.menu['9-1'] = ['경제', '#'];
bb.menu['9-1-0'] = ['시사뉴스', '#'];
bb.menu['9-1-0-0'] = ['시사뉴스', '#'];
bb.menu['9-1-0-0-0'] = ['시사뉴스', '#'];
bb.menu['9-1-0-0-0-0'] = ['시사뉴스', '#'];
bb.menu['9-1-0-0-0-0-0'] = ['시사뉴스', '#'];
bb.menu['9-2'] = ['사회', '#'];
bb.menu['9-3'] = ['스포츠', '#'];
bb.menu['9-4'] = ['연예', '#'];
bb.menu['9-5'] = ['과학', '#'];
bb.menu['9-6'] = ['문화', '#'];

bb.menu['10-0'] = ['공지사항', '#'];

bb.menu['10-0-0'] = ['공지사항', '#'];

bb.menu['10-0-0-0'] = ['공지사항', '#'];

bb.menu['10-0-0-0-0'] = ['공지사항', '#'];

bb.menu['10-0-0-0-0-0'] = ['공지사항', '#'];

bb.menu['10-0-0-0-0-0-0'] = ['공지사항', '#'];
bb.menu['10-0-0-0-0-0-1'] = ['공지사항', '#'];
bb.menu['10-0-0-0-0-0-2'] = ['공지사항', '#'];
bb.menu['10-0-0-0-0-0-3'] = ['공지사항', '#'];
bb.menu['10-0-0-0-0-0-4'] = ['공지사항', '#'];

bb.menu['10-0-0-0-0-1'] = ['공지사항', '#'];

bb.menu['10-0-0-0-1'] = ['공지사항', '#'];

bb.menu['10-0-0-1'] = ['공지사항', '#'];
bb.menu['10-0-0-2'] = ['공지사항', '#'];
bb.menu['10-0-0-3'] = ['공지사항', '#'];

bb.menu['10-0-1'] = ['공지사항', '#'];
bb.menu['10-0-2'] = ['공지사항', '#'];

bb.menu['10-2-0'] = ['공지사항', '#'];
bb.menu['10-2-1'] = ['공지사항', '#'];
bb.menu['10-2-2'] = ['공지사항', '#'];

bb.menu['10-1'] = ['사이트맵', '#'];
bb.menu['10-1-0'] = ['사이트맵', '#'];
bb.menu['10-1-1'] = ['사이트맵', '#'];
bb.menu['10-1-2'] = ['사이트맵', '#'];
bb.menu['10-1-3'] = ['사이트맵', '#'];

bb.menu['10-1-3-0'] = ['사이트맵', '#'];
bb.menu['10-1-3-1'] = ['사이트맵', '#'];

bb.menu['10-2'] = ['자주묻는질문', '#'];
bb.menu['10-3'] = ['사이트맵', '#'];
</script>

<style type="text/css">
body { margin:0; padding:0; font-size:13px; letter-spacing:-1px; font-family:gulim; }

a:link, a:visited, a:active { text-decoration:none; color:#555555; }
a:hover { color:#000000; }

.body { margin:0 auto 0 auto; }

.top { clear:both; display:inline-block; margin-bottom:5px; width:100%; position:relative; z-index:600; }
.top .logo { clear:both; display:inline-block; background-color:#ffffff; position:relative; z-index:250; width:100%; }

.top .menu .left { float:left; }
.top .menu .right { float:right; }

#slide-menu { clear:both; overflow:hidden; background-color:#555555; border-top:2px solid #333333; height:38px; width:100%; position:relative; z-index:200; }
#slide-menu div.back { background-color:#666666; position:absolute; z-index:100; }
#slide-menu a { display:inline-block; color:#ffffff; font-size:13px; line-height:38px; padding:0 8px 0 8px; margin:0 5px 0 5px; position:relative; z-index:150; }

#slide-content { clear:both; height:0; position:absolute; z-index:190; }
#slide-content div { display:inline-block; position:absolute; }
#slide-content .content { }
#slide-content .layer-top { overflow:hidden; }

#slide-content a { display:block; font-size:13px; margin:2px; color:#ffffff; white-space:nowrap; position:relative; z-index:10; }

#slide-content .layer { display:block; }
#slide-content .layer a { padding:4px 25px 4px 10px; }
#slide-content .b-layer a { display:block; text-align:right; padding:4px 10px 4px 25px; }
#slide-content .layer .sub-back { position:absolute; z-index:5; }
</style>

<div class="menu-content">
<div class="menu">
<div id="slide-menu" class="left" onmouseover="bb.check(event);" onmouseout="bb.out(event);">
<a number="0" href="/layout/intro.php" style="margin-left:20px;">사이트소개</a>
<a number="1" href="/bbs/group.php?gr_id=ground">부동산</a>
<a number="2" href="javascript:alert('준비중입니다');">취업</a>
<a number="3" href="javascript:alert('준비중입니다');">맛집</a>
<a number="4" href="javascript:alert('준비중입니다');">장터</a>
<a number="5" href="javascript:alert('준비중입니다');">중고차</a>
<a number="6" href="javascript:alert('준비중입니다');">커뮤니티</a>
<a number="7" href="javascript:alert('준비중입니다');">추천영화</a>
<a number="8" href="javascript:alert('준비중입니다');">구글뉴스</a>
</div>
<div class="right">
<a></a>
</div>
</div>
<div id="slide-content"></div>
</div>