부드럽게 펼쳐졌다 사라지는 메뉴

<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. -->

<script language="JavaScript">
is = {};
is.agent = navigator.userAgent.toLowerCase();
is.ie4 = (is.agent.indexOf("msie 4") != -1);
is.ie5 = (is.agent.indexOf("msie 5") != -1);
is.ie55 = (is.agent.indexOf("msie 5.5") != -1);
is.ie6 = (is.agent.indexOf("msie 6") != -1);
is.ns4 = (is.agent.indexOf("4") != -1 && document.layers);
is.ns6 = (is.agent.indexOf("netscape6") != -1 && is.agent.indexOf("6.1") == -1);
is.ns61 = (is.agent.indexOf("netscape6/6.1") != -1);
is.ns6x = (is.agent.indexOf("netscape6") != -1);
is.ie = (is.ie4 || is.ie5 || is.ie55 || is.ie6);
is.moz = (is.agent.indexOf("gecko")!= -1);
is.mac = (is.agent.indexOf("mac") != -1);
is.win = (is.agent.indexOf("win") != -1);
is.iestrict = (is.win && is.ie6 && document.compatMode == "CSS1Compat");
is.macstrict = (is.ie5 && is.mac && document.doctype && document.doctype.name.indexOf(".dtd") != -1);
is.strict = (is.iestrict || is.macstrict);
is.dom = (is.ie5 || is.ie55 || is.ie6 || is.ns6x || is.moz);
var css_px = (is.ns4) ?"" : "px";

function menuObj(obj, par, nst) {
page = new Object();
page.width = (is.ns6 || is.ns61 || is.ns6 || is.ns4 || is.moz) ? innerWidth : document.body.clientWidth;
page.height = (is.ns6 || is.ns61 || is.ns6 || is.ns4 || is.moz) ? innerHeight : document.body.clientHeight;
if(!is.ns4) this.lyr = (is.dom) ?document.getElementById(obj) : document.all[obj];
else this.lyr = (!nst) ?document.layers[obj] : document.layers[nst].document.layers[obj];
this.sty = (!is.ns4) ? this.lyr.style : this.lyr;
if(par) this.parent = par;
this.obj = obj;
window[this.obj] = this;
return this;
}

menuObj.prototype.timer = null;
menuObj.prototype.wipe = 0;
menuObj.prototype.offX = Function('oX = (is.ie || is.ns61 || is.moz) ?this.lyr.offsetLeft : parseInt(this.sty.left);return oX');
menuObj.prototype.offY = Function('oY = (is.ie || is.ns61 ||is.moz) ?this.lyr.offsetTop : parseInt(this.sty.top);return oY;');
menuObj.prototype.offW = Function('oW = (!is.ns4) ?this.lyr.offsetWidth : this.lyr.clip.width; return oW;')
menuObj.prototype.offH = Function('oH = (!is.ns4) ?this.lyr.offsetHeight : this.lyr.clip.height; return oH;')
menuObj.prototype.maxWipe = function() {
if(is.dom) return this.offH()+10;
if(is.ns4) return (sAtt.height*this.lyr.document.layers.length)+10;
}

wipeMenu.prototype.addMain = function(name, hasSub, txt, url) {
menuName = this.name;
wipePos = this.pos;
mAtt = this.mAtt, sAtt = this.sAtt;
if(this.main[name]) return;
if(is.ns4) {
var mainMenu = new Layer(mAtt.width);
var styStr = "text-decoration:none; color:"+mAtt.fg_off+"; padding:"+((mAtt.height/2)-(mAtt.font_size/2)-1)+"px 0px 0px 0px; font-size:"+mAtt.font_size+"px; font-family:"+mAtt.font+";"
var pd = "padding:0px 6px 0px 6px;"
mainMenu.document.write('<div align="'+mAtt.align+'" style="'+pd+'"><a href="JavaScript://" style="'+styStr+'">'+txt+'</a></div>');
mainMenu.document.close();
mainMenu.captureEvents(Event.MOUSEUP);
mainMenu.resizeTo(mAtt.width,mAtt.height)
if(mAtt.bg_off.indexOf("url") != -1) {
mainMenu.background.src = mAtt.bg_off.substring(4,mAtt.bg_off.length-1);
mainMenu.background.src = mAtt.bg_off.substring(4,mAtt.bg_off.length-1);
} else mainMenu.bgColor = mAtt.bg_off;
mainMenu.visibility = "visible";
}

if(is.dom) {
var mainMenu = document.createElement("DIV");
var pf = Math.ceil(((mAtt.height-mAtt.font_size)/2)-2); var wf = (is.ns6x || is.strict) ?12 : 0;
var pf2 = (mAtt.height%2 == 0) ?1 : 0;
mainMenu.innerHTML = txt;
mainMenu.id = name+menuName;
var styStr = "position:absolute; width:"+(mAtt.width-wf)+"px; border:solid "+mAtt.border+"px "+mAtt.border_color+"; color:"+mAtt.fg_off+"; text-align:"+mAtt.align+"; font-size:"+mAtt.font_size+"px; font-family:"+mAtt.font+"; padding:"+pf+"px 6px "+(pf+pf2)+"px 6px; background:"+mAtt.bg_off+"; cursor:pointer; cursor:hand;"
mainMenu.style.cssText = styStr;
mainMenu.setAttribute("style", styStr);
document.body.appendChild(mainMenu);
}

if(is.ie4) {
var pf = Math.ceil(((mAtt.height-mAtt.font_size)/2)-2);
var pf2 = (mAtt.height%2 == 0) ?1 : 0;
alert(pf+pf2)
var styStr = "position:absolute; width:"+(mAtt.width)+"px; border:solid "+mAtt.border+"px "+mAtt.border_color+"; color:"+mAtt.fg_off+"; text-align:"+mAtt.align+"; font-size:"+mAtt.font_size+"px; font-family:"+mAtt.font+"; padding:"+(pf)+"px 6px "+(pf)+"px 6px; background:"+mAtt.bg_off+"; cursor:hand;"
var mM = '<div id="'+name+menuName+'" style="'+styStr+'">'+txt+'</div>';
document.body.insertAdjacentHTML("beforeEnd", mM);
var mainMenu = document.all[name+menuName];
}

mainMenu.onmouseover = Function('if('+hasSub+')'+menuName+'.subs["'+name+'"].show("'+wipePos+'");over_out(this, "'+mAtt.bg_on+'", "'+mAtt.fg_on+'")')
mainMenu.onmouseout = Function('if('+hasSub+')'+menuName+'.subs["'+name+'"].hide();over_out(this, "'+mAtt.bg_off+'", "'+mAtt.fg_off+'");')
mainMenu.onmouseup = Function('location.href = "'+url+'"');

this.main[name] = new menuObj(mainMenu.id);
this.mainNum[this.mainNum.length] = this.main[name]; 

if(!hasSub) return;
if(is.ns4) {
var subC = new Layer(sAtt.width);
subC.resizeTo(sAtt.width,0);
subC.visibility = "hidden";
}

if(is.dom) {
var subC = document.createElement("DIV");
subC.id = name+menuName+"Sub";
var wf = (is.ns6x) ?4 : 0;
var styStr = "position:absolute; visibility:hidden; clip:rect(0px "+(sAtt.width+20)+"px 0px 0px); border:solid 1px "+sAtt.border_color+"; border-width:"+sAtt.border+"px 0px 0px 0px; cursor:default;"
subC.style.cssText = styStr;
subC.setAttribute("style", styStr);
document.body.appendChild(subC);
}

if(is.ie4) {
var styStr = "position:absolute; visibility:hidden; clip:rect(0px "+(sAtt.width+20)+"px 0px 0px); border:solid 1px "+sAtt.border_color+"; border-width:"+sAtt.border+"px 0px 0px 0px; cursor:default;"
var sC = '<div id="'+name+menuName+'Sub" style="'+styStr+'"></div>';
document.body.insertAdjacentHTML("beforeEnd", sC);
var subC = document.all[name+menuName+"Sub"];
}
this.subs[name] = new menuObj(subC.id, this.main[name]);
subC.onmouseover = Function(menuName+'.subs["'+name+'"].show("'+wipePos+'");');
subC.onmouseout = Function(menuName+'.subs["'+name+'"].hide();');
}

wipeMenu.prototype.addSub = function(name, parent, txt, url) {
if(is.ns4) {
var tempsub = new Layer(sAtt.width, this.subs[parent].lyr);
var styStr = "text-decoration:none; color:"+sAtt.fg_off+"; padding:"+((sAtt.height/2)-(sAtt.font_size/2)-2)+"px 0px 0px 0px; font-size:"+sAtt.font_size+"px; font-family:"+sAtt.font+";"
var pd = "padding:0px 6px 0px 6px;"
tempsub.document.write('<div align="'+sAtt.align+'" style="'+pd+'"><a href="JavaScript://" style="'+styStr+'">'+txt+'</a></div>');
tempsub.document.close();
tempsub.captureEvents(Event.MOUSEUP);
//this.subs[parent].lyr.resizeTo(sAtt.width,(sAtt.height*this.subs[parent].lyr.document.layers.length))
tempsub.resizeTo(sAtt.width,sAtt.height);
tempsub.moveTo(0,(sAtt.height*(this.subs[parent].lyr.document.layers.length-1)));
if(sAtt.bg_off.indexOf("url") != -1) {
tempsub.background.src = sAtt.bg_off.substring(4,sAtt.bg_off.length-1);
tempsub.background.src = sAtt.bg_off.substring(4,sAtt.bg_off.length-1);
} else tempsub.bgColor = sAtt.bg_off;
tempsub.visibility = "inherit";
}
if(is.dom) {
var tempsub = document.createElement("DIV");
var pf = Math.ceil(((mAtt.height-mAtt.font_size)/2)-2); var wf = (is.ns6x || is.strict) ?12 : 0;
var pf2 = (mAtt.height%2 == 0) ?1 : 0;
tempsub.id = name+menuName+"SubItem";
tempsub.innerHTML = txt;
var styStr = "width:"+(sAtt.width-wf)+"px; border:solid "+sAtt.border+"px "+sAtt.border_color+"; border-top-width:0px; color:"+sAtt.fg_off+"; text-align:"+sAtt.align+"; font-size:"+sAtt.font_size+"px; font-family:"+sAtt.font+"; padding:"+pf+"px 6px "+(pf+pf2)+"px 6px; background:"+sAtt.bg_off+"; cursor:pointer; cursor:hand;"
tempsub.style.cssText = styStr;
tempsub.setAttribute("style", styStr);
this.subs[parent].lyr.appendChild(tempsub);
}
if(is.ie4) {
var pf = Math.ceil(((mAtt.height-mAtt.font_size)/2)-2);
var pf2 = (mAtt.height%2 == 0) ?1 : 0;
var styStr = "width:"+(sAtt.width)+"px; border:solid "+sAtt.border+"px "+sAtt.border_color+"; border-top-width:0px; color:"+sAtt.fg_off+"; text-align:"+sAtt.align+"; font-size:"+sAtt.font_size+"px; font-family:"+sAtt.font+"; padding:"+(pf+pf2)+"px 6px "+(pf+pf2)+"px 6px; background:"+sAtt.bg_off+"; cursor:hand;";
var ts = '<div id="'+name+menuName+'SubItem" style="'+styStr+'" onmouseover="over_out(this, \''+sAtt.bg_on+'\', \''+sAtt.fg_on+'\')" onmouseout="over_out(this, \''+sAtt.bg_off+'\', \''+sAtt.fg_off+'\')" onmouseup="location.href=\''+url+'\'">'+txt+'</div>';
this.subs[parent].lyr.insertAdjacentHTML("beforeEnd", ts);
}
if(!is.ie4) {
tempsub.onmouseover = Function('over_out(this, "'+sAtt.bg_on+'", "'+sAtt.fg_on+'")');
tempsub.onmouseout = Function('over_out(this, "'+sAtt.bg_off+'", "'+sAtt.fg_off+'")');
tempsub.onmouseup = Function('location.href = "'+url+'"');
}
}
menuObj.prototype.show = function(p) {
if(p == "h") { 
this.sty.left = this.parent.offX()+css_px;
this.sty.top = this.parent.offY()+this.parent.offH()+css_px;
} else {
this.sty.left = this.parent.offX()+this.parent.offW()+css_px;
this.sty.top = this.parent.offY()+css_px;
}
this.sty.visibility = "visible";
this.sty.zIndex = "12"; 
this.doShow();
}
menuObj.prototype.doShow = function() {
clearTimeout(this.timer)
this.clipIt(0, this.offW(), this.wipe, 0);
this.wipe += 10;
if(this.wipe <= this.maxWipe()) this.timer = setTimeout(this.obj + ".doShow()", 45)
}
menuObj.prototype.hide = function() {
clearTimeout(this.timer)
this.clipIt(0, this.offW(), this.wipe-10, 0);
this.wipe -= 10;
if(this.wipe >= 0) this.timer = setTimeout(this.obj + ".hide()", 50);
else this.sty.visibility = "hidden";
}
function over_out(obj, bg, fg) {
if(is.ns4) {
if(bg.indexOf("url") != -1) obj.background.src = bg.substring(4,bg.length-1)
else obj.background.src = "", obj.bgColor = bg; 
}
else {
obj.style.background = bg;
obj.style.color = fg;
}
}
menuObj.prototype.clipIt = function(t,r,b,l) {
if(!is.ns4) this.sty.clip = "rect("+t+"px, "+r+"px, "+b+"px, "+l+"px)"
else {
this.sty.clip.top = t;
this.sty.clip.right = r;
this.sty.clip.bottom = b;
this.sty.clip.left = l;
}
}
wipeMenu.prototype.buildMenu = function(x,y,spacing) {
this.mainNum[0].sty.left = x+css_px;
this.mainNum[0].sty.top = y+css_px;
if(!is.ns4 && spacing == 0) var spacing = -this.mAtt.border;
for(i = 1; i < this.mainNum.length; i++) {
if(this.pos == "h") {
this.mainNum[i].sty.left = this.mainNum[i-1].offX()+this.mainNum[i-1].offW()+spacing+css_px;
this.mainNum[i].sty.top = this.mainNum[i-1].offY()+css_px;
} else {
this.mainNum[i].sty.left = this.mainNum[i-1].offX()+css_px;
this.mainNum[i].sty.top = this.mainNum[i-1].offY()+this.mainNum[i-1].offH()+spacing+css_px;
}
}
}
function wipeMenu(menu,p,ma,sa) {
this.name = menu;
this.pos = p;
this.mAtt = ma;
this.sAtt = (!sa) ?ma : sa;
this.main = [];
this.mainNum = [];
this.subs = [];
}
function preLoadMenuImages() {
if(!img) var img = [];
var imgs = preLoadMenuImages.arguments;
for(i = 0; i < imgs.length; i++) {
img[i] = new Image();
img[i].src = imgs[i];
}
}
if(document.layers) { 
var pX = innerWidth;
var pY = innerHeight; 
onresize= function(){ 
if(pX!= innerWidth || pY!= innerHeight) history.go(0); 
}
}
function swapIt(img, src, id) { 
if(is.ie4 || is.ns4 && !id) document.images[img].src = src;
if(is.ns4 && id) document.layers[id].document.images[img].src = src;
if(is.dom) document.getElementById(img).setAttribute('src', src);
}
function initSwipeMenu() {
preLoadMenuImages("button_on.gif", "button_off.gif");
menuAtt = new Array();
menuAtt["width"] = 130;
menuAtt["height"] = 25;
menuAtt["align"] = "center";
menuAtt["font"] = "Verdana";
menuAtt["font_size"] = 12;
menuAtt["bg_off"] = "#003300";
menuAtt["bg_on"] = "#999933";
menuAtt["fg_off"] = "white"; 
menuAtt["fg_on"] = "#ffffcc";
menuAtt["border"] = 1;
menuAtt["border_color"] = "#993366";
//Menu 1
myMenu = new wipeMenu("myMenu", "h", menuAtt);

myMenu.addMain("about", true, "HOME", "http://www.yeoyoo.com");
myMenu.addSub("aboutSub1", "about", "SUB MENU1-1", "http://www.yeoyoo.com");
myMenu.addSub("aboutSub2", "about", "SUB MENU1-2", "http://www.yeoyoo.com");
myMenu.addSub("aboutSub3", "about", "SUB MENU1-3", "http://www.yeoyoo.com");

myMenu.addMain("shapes", true, "SUB MENU2", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub1", "shapes", "SUB MENU2-1", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub2", "shapes", "SUB MENU2-2", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub3", "shapes", "SUB MENU2-3", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub4", "shapes", "SUB MENU2-4", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub5", "shapes", "SUB MENU2-5", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub6", "shapes", "SUB MENU2-6", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub7", "shapes", "SUB MENU2-7", "http://www.yeoyoo.com");
myMenu.addSub("shapesSub8", "shapes", "SUB MENU2-8", "http://www.yeoyoo.com");

myMenu.addMain("filters", true, "SUB MENU3", "http://www.yeoyoo.com");
myMenu.addSub("filtersSub7", "filters", "SUB MENU3-1", "http://www.yeoyoo.com");
myMenu.addSub("filtersSub8", "filters", "SUB MENU3-2", "http://www.yeoyoo.com");
myMenu.addSub("filtersSub8", "filters", "SUB MENU3-3", "http://www.yeoyoo.com");


myMenu.addMain("gradient", true, "SUB MENU4", "http://www.yeoyoo.com");
myMenu.addSub("gradientSub1", "gradient", "SUB MENU4-1", "http://www.yeoyoo.com");
myMenu.addSub("gradientSub2", "gradient", "SUB MENU4-2", "http://www.yeoyoo.com");

myMenu.addMain("text", true, "SUB MENU5", "http://www.yeoyoo.com");
myMenu.addSub("textSub1", "text", "SUB MENU5-1", "http://www.yeoyoo.com");
myMenu.addSub("textSub1", "text", "SUB MENU5-2", "http://www.yeoyoo.com");
myMenu.buildMenu(10,10,2);

}

</script>

<style type="text/css">
<!--
.maintext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF}
.header { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #FFFFCC}
.code { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFCC}
.highlight { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333}
-->
</style>

<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<body style="margin:0;" onload="initSwipeMenu()">