클릭시 나오는 메뉴 소스
<HTML>
<HEAD>
<TITLE>뱅크CGI</TITLE>
<STYLE>
<!--
.link
{
color : white;
font-weight : bold;
text-decoration :
none;
}
A.link:hover {
color : lime;
}
A.link:active {
color : greenyellow;
text-decoration :
none;
text-transform :
uppercase;
}
//-->
</STYLE>
</HEAD>
<BODY
bgcolor="black" text="white" link="lime" vlink="lime" alink="red"
>
</FONT>
<!-- This is the actual script, so if you want it,
then start copying here.// -->
<SPAN id="test" style="POSITION:
absolute"></SPAN>
<SCRIPT
LANGUAGE="JavaScript1.2">
<!--
var NS4 = (document.layers) ? true :
false;
var IE4 = (document.all) ? true : false;
var maxZ = 1;
function
popout(id, posY, width) {
this.id = id;
this.posY = posY;
this.width = width;
this.show = false;
this.makeImage =
makeImage;
this.makeElement = makeElement;
this.showElement =
showElement;
}
function makeImage(imgURL, imgHeight, imgWidth, imgAlt)
{
document.write(
'<STYLE TYPE="text/css">',
'#',
this.id, 'img {',
'position: absolute;',
'left: 0; top: ',
this.posY, ';',
'width: ', imgWidth, ';',
'z-index: 1',
'}',
'</STYLE>',
'<DIV ID="', this.id, 'img">',
'<A HREF="javascript:', this.id, '.showElement()"' + "='if (window.focus)
{window.focus();}'>" + '<IMG SRC="', imgURL, '" ALT="', imgAlt, '"
BORDER="0" ','HEIGHT="', imgHeight, '" WIDTH="', imgWidth,
'">','</A></DIV>'
);
}
function makeElement(boxBg, boxColor, boxCode) {
var padding = (NS4) ?
'' : 'padding: 3 0 3 3;';
document.write(
'<STYLE
TYPE="text/css">',
'#', this.id, 'box {',
'position:
absolute;',
'left: 0; top: ', this.posY, ';',
'width: ',
this.width, ';',
'layer-background-color: ', boxBg, ';',
'background-color: ', boxBg, ';',
'visibility: hidden;',
'border-width: 1;',
'border-style: solid;',
'border-color: ',
boxColor, ';',
padding,
'z-index: 1',
'}',
'</STYLE>',
'<DIV ID="', this.id, 'box">',
boxCode,
'</DIV>'
);
}
function showElement() {
this.show = !this.show;
var pos =
(this.show) ? this.width : 0;
if (NS4) {
var str = (this.show) ?
'show' : 'hide';
eval('document.' + this.id + 'img.left = ' +
pos);
eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));
eval('document.' + this.id + 'box.zIndex = ' + maxZ);
eval('document.' +
this.id + 'box.visibility = "' + str + '"');
} else {
var str =
(this.show) ? 'visible' : 'hidden';
eval(this.id + 'img.style.left = ' +
pos);
eval(this.id + 'img.style.zIndex = ' + (++maxZ));
eval(this.id + 'box.style.zIndex = ' + maxZ);
eval(this.id +
'box.style.visibility = "' + str + '"');
}
}
function styleEnabled() {
return ((NS4 && document.test) ||
IE4);
}
function init() {
if (!styleEnabled()) return;
menu1 = new
popout('menu1', 30, 130);
menu1.makeImage('./img/mxhome.gif', 130, 18, '');
menu1.makeElement('black', 'gray',
'<FONT face="ARIAL">' +
'<A href="#" class="link">메뉴1</A><BR>' +
'<A
href="#" class="link">메뉴2</A><BR>' +
'<A href="#"
class="link">메뉴3</A><BR>' +
'<A href="#"
class="link">메뉴4</A><BR>' +
'<A href="#"
class="link">메뉴5</A><BR>' +
'<A href="#"
class="link">메뉴6</A><BR>' +
'<A href="#"
class="link">메뉴7</A><BR>' +
'<A href="#"
class="link">메뉴8</A><BR>' +
'<A href="#"
class="link">메뉴9</A><BR>' +
'</FONT>'
);
menu2 = new popout('menu2', 210, 130);//박스위치,크기를 조절합니다.
// 130 , 18은 이미지에
크기라내
menu2.makeImage('./img/mxlinks.gif', 130, 18, '');
menu2.makeElement('black', 'gray',
'<FONT face="ARIAL">' +
'<A href="#" class="link">메뉴1-1</A><BR>' +
'<A
href="#" class="link">메뉴2-1</A><BR>' +
'<A href="#"
class="link">메뉴3-1</A><BR>' +
'<A href="#"
class="link">메뉴4-1</A><BR>' +
'<A href="#"
class="link">메뉴5-1</A><BR>' +
'<A href="#"
class="link">메뉴6-1</A><BR>' +
'<A href="#"
class="link">메뉴7-1</A><BR>' +
'<A href="#"
class="link">메뉴8-1</A><BR>' +
'<A href="#"
class="link">메뉴9-1</A>' +
'</FONT>'
);
}
init();
//
-->
</SCRIPT>
<center><br><br><br>
<font
color=white size=5>좌측 메뉴를
클릭하세요~</font>
</center>
</BODY>
</HTML>