플록님 슬라이드메뉴 사용자정의 하기를 원해요...ㅠㅠ 정보
플록님 슬라이드메뉴 사용자정의 하기를 원해요...ㅠㅠ관련링크
첨부파일
본문
아무리 도전을 해도 잘 모르겠습니다.
플록님 슬라이드메뉴를 자동으로 그룹과 게시판을 추출하지 않고
제가 그냥 그룹과 게시판과 링크를 구성하고 싶거든요..
실지로 구성된 그룹과 사이트에 보이는 그룹과 게시판 위치가 좀 틀려서요..^^
gb_mtDropdownRF.php 이 독립된 파일을 수정해서 해보려 하는데..
엄두도 안나고 좀 그렇네요...
잘 아시는분이 좀 도와주시면 너무나 감사하겠습니다..
댓글 전체
자동으로 그룹과 게시판을 추출하지 않고 수동으로 코딩해서 만든다는 말씀이신가요?
요사이 다른것좀 들여다 보느라 테스트 사이트에 올려주신 글도 최근에야 보았습니다.
이미지 리사이징 관련 충돌문제로 권해드리고 싶지 않은 메뉴입니다만,
경험삼아 한번 해보시죠??
한번 보세요. http://gnusr.com/g4/template/test/tmp_menu.php
예제 코드입니다.
<?// if (!defined("_GNUBOARD_")) exit;// gb_mtDropdownRF.php
##################################################################
// mt_dropdownC.js 카피라이트와 gb_mtDropdownRF.php 상단 주석 삭제금지
?><script type="text/javascript">
/*====================================================*
* gb_mtDropdownRF.php start
* mt_dropdownC.js start
* Copyright 2003, Aaron Boodman (*** 개인정보보호를 위한 이메일주소 노출방지 ***) *
*====================================================*/
mtShowFlag=0;
mtDropDown.spacerGif = "images/spacer.gif";
mtDropDown.dingbatOn = "images/minus.gif";
mtDropDown.dingbatOff = "images/plus.gif";
mtDropDown.dingbatSize = 14;
mtDropDown.menuPadding = 2;
mtDropDown.itemPadding = 2;
mtDropDown.shadowSize = 0;
mtDropDown.shadowOffset = 0;
mtDropDown.shadowColor = "#FFFFFF";
mtDropDown.shadowPng = "images/spacer.gif";
mtDropDown.backgroundColor = "#5D5D5D"; //015A96
mtDropDown.backgroundPng = "images/spacer.gif";
mtDropDown.hideDelay = 500;
mtDropDown.slideTime = 400;
mtDropDown.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
mtDropDown.direction = {down:1,right:2};
mtDropDown.registry = [];
mtDropDown._maxZ = 100;
mtDropDown.isSupported = function() {
if (typeof mtDropDown.isSupported.r == "boolean") return mtDropDown.isSupported.r;
var ua = navigator.userAgent.toLowerCase();
var an = navigator.appName;
var r = false;
if (ua.indexOf("gecko") > -1) r = true;
else if (an == "Microsoft Internet Explorer") {
if (document.getElementById) r = true;
}
mtDropDown.isSupported.r = r;
return r;
}
mtDropDown.initialize = function() {
for (var i = 0, menu = null; menu = this.registry[i]; i++) {
menu.initialize();
}
}
mtDropDown.renderAll = function() {
var aMenuHtml = [];
for (var i = 0, menu = null; menu = this.registry[i]; i++) {
aMenuHtml[i] = menu.toString();
}
document.write(aMenuHtml.join(""));
}
function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet) {
this.addItem = addItem;
this.addMenu = addMenu;
this.toString = toString;
this.initialize = initialize;
this.isOpen = false;
this.show = show;
this.hide = hide;
this.items = [];
this.onactivate = new Function();
this.ondeactivate = new Function();
this.onmouseover = new Function();
this.onqueue = new Function();
this.index = mtDropDown.registry.length;
mtDropDown.registry[this.index] = this;
var id = "mtDropDown" + this.index;
var contentHeight = null;
var contentWidth = null;
var childMenuSet = null;
var animating = false;
var childMenus = [];
var slideAccel = -1;
var elmCache = null;
var ready = false;
var _this = this;
var a = null;
var pos = iDirection == mtDropDown.direction.down ? "top" : "left";
var dim = null;
function addItem(sText, sUrl) {
var item = new mtDropDownItem(sText, sUrl, this);
item._index = this.items.length;
this.items[item._index] = item;
}
function addMenu(oMenuItem) {
if (!oMenuItem.parentMenu == this) throw new Error("Cannot add a menu here");
if (childMenuSet == null) childMenuSet = new mtDropDownSet(mtDropDown.direction.right, -5, 2, mtDropDown.reference.topRight);
var m = childMenuSet.addMenu(oMenuItem);
childMenus[oMenuItem._index] = m;
m.onmouseover = child_mouseover;
m.ondeactivate = child_deactivate;
m.onqueue = child_queue;
return m;
}
function initialize() {
initCache();
initEvents();
initSize();
ready = true;
}
function show() {
/*
for (i=0;i<document.forms.length;i++) {
for (j=0;j<document.forms[i].elements.length;j++) {
if (document.forms[i].elements[j].nodeName == "SELECT") {
document.forms[i].elements[j].style.visibility = "hidden";
}
}
}
*/
if (ready) {
_this.isOpen = true;
animating = true;
setContainerPos();
elmCache["clip"].style.visibility = "visible";
elmCache["clip"].style.zIndex = mtDropDown._maxZ++;
slideStart();
_this.onactivate();
}
// mtShowFlag++;
}
function hide() {
/*
mtShowFlag--;
if(mtShowFlag == 0) {
for (i=0;i<document.forms.length;i++) {
for (j=0;j<document.forms[i].elements.length;j++) {
if (document.forms[i].elements[j].nodeName == "SELECT") {
document.forms[i].elements[j].style.visibility = "visible";
}
}
}
}
*/
if (ready) {
_this.isOpen = false;
animating = true;
for (var i = 0, item = null; item = elmCache.item[i]; i++) dehighlight(item);
if (childMenuSet) childMenuSet.hide();
slideStart();
_this.ondeactivate();
}
}
function setContainerPos() {
var sub = oActuator.constructor == mtDropDownItem;
var act = sub ? oActuator.parentMenu.elmCache["item"][oActuator._index] : oActuator;
var el = act;
var x = 0;
var y = 0;
var minX = 0;
var maxX = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - parseInt(elmCache["clip"].style.width);
var minY = 0;
var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCache["clip"].style.height);
while (sub ? el.parentNode.className.indexOf("mtDropdownMenu") == -1 : el.offsetParent) {
x += el.offsetLeft;
y += el.offsetTop;
if (el.scrollLeft) x -= el.scrollLeft;
if (el.scrollTop) y -= el.scrollTop;
el = el.offsetParent;
}
if (oActuator.constructor == mtDropDownItem) {
x += parseInt(el.parentNode.style.left);
y += parseInt(el.parentNode.style.top);
}
switch (iReferencePoint) {
case mtDropDown.reference.topLeft:
break;
case mtDropDown.reference.topRight:
x += act.offsetWidth;
break;
case mtDropDown.reference.bottomLeft:
y += act.offsetHeight;
break;
case mtDropDown.reference.bottomRight:
x += act.offsetWidth;
y += act.offsetHeight;
break;
}
x += iLeft;
y += iTop;
x = Math.max(Math.min(x, maxX), minX);
y = Math.max(Math.min(y, maxY), minY);
elmCache["clip"].style.left = x + "px";
elmCache["clip"].style.top = y + "px";
}
function slideStart() {
var x0 = parseInt(elmCache["content"].style[pos]);
var x1 = _this.isOpen ? 0 : -dim;
if (a != null) a.stop();
a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel);
a.onframe = slideFrame;
a.onend = slideEnd;
a.start();
}
function slideFrame(x) {
elmCache["content"].style[pos] = x + "px";
}
function slideEnd() {
if (!_this.isOpen) elmCache["clip"].style.visibility = "hidden";
animating = false;
}
function initSize() {
var ow = elmCache["items"].offsetWidth;
var oh = elmCache["items"].offsetHeight;
var ua = navigator.userAgent.toLowerCase();
elmCache["clip"].style.width = ow + mtDropDown.shadowSize + 2 + "px";
elmCache["clip"].style.height = oh + mtDropDown.shadowSize + 2 + "px";
elmCache["content"].style.width = ow + mtDropDown.shadowSize + "px";
elmCache["content"].style.height = oh + mtDropDown.shadowSize + "px";
contentHeight = oh + mtDropDown.shadowSize;
contentWidth = ow + mtDropDown.shadowSize;
dim = iDirection == mtDropDown.direction.down ? contentHeight : contentWidth;
elmCache["content"].style[pos] = -dim - mtDropDown.shadowSize + "px";
elmCache["clip"].style.visibility = "hidden";
if (ua.indexOf("mac") == -1 || ua.indexOf("gecko") > -1) {
elmCache["background"].style.width = ow + "px";
elmCache["background"].style.height = oh + "px";
elmCache["background"].style.backgroundColor = mtDropDown.backgroundColor;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + "px";
elmCache["shadowRight"].style.backgroundColor = mtDropDown.shadowColor;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].style.width = ow - mtDropDown.shadowOffset + "px";
elmCache["shadowBottom"].style.backgroundColor = mtDropDown.shadowColor;
}
else {
elmCache["background"].firstChild.src = mtDropDown.backgroundPng;
elmCache["background"].firstChild.width = ow;
elmCache["background"].firstChild.height = oh;
elmCache["shadowRight"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].firstChild.width = mtDropDown.shadowSize;
elmCache["shadowRight"].firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize);
elmCache["shadowBottom"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].firstChild.height = mtDropDown.shadowSize;
elmCache["shadowBottom"].firstChild.width = ow - mtDropDown.shadowOffset;
}
}
function initCache() {
var menu = document.getElementById(id);
var all = menu.all ? menu.all : menu.getElementsByTagName("*");
elmCache = {};
elmCache["clip"] = menu;
elmCache["item"] = [];
for (var i = 0, elm = null; elm = all[i]; i++) {
switch (elm.className) {
case "items":
case "content":
case "background":
case "shadowRight":
case "shadowBottom":
elmCache[elm.className] = elm;
break;
case "item":
elm._index = elmCache["item"].length;
elmCache["item"][elm._index] = elm;
break;
}
}
_this.elmCache = elmCache;
}
function initEvents() {
for (var i = 0, item = null; item = elmCache.item[i]; i++) {
item.onmouseover = item_mouseover;
item.onmouseout = item_mouseout;
item.onclick = item_click;
}
if (typeof oActuator.tagName != "undefined") {
oActuator.onmouseover = actuator_mouseover;
oActuator.onmouseout = actuator_mouseout;
}
elmCache["content"].onmouseover = content_mouseover;
elmCache["content"].onmouseout = content_mouseout;
}
function highlight(oRow) {
oRow.className = "item hover";
if (childMenus[oRow._index]) oRow.lastChild.firstChild.src = mtDropDown.dingbatOn;
}
function dehighlight(oRow) {
oRow.className = "item";
if (childMenus[oRow._index]) oRow.lastChild.firstChild.src = mtDropDown.dingbatOff;
}
function item_mouseover() {
if (!animating) {
highlight(this);
if (childMenus[this._index]) childMenuSet.showMenu(childMenus[this._index]);
else if (childMenuSet) childMenuSet.hide();
}
}
function item_mouseout() {
if (!animating) {
if (childMenus[this._index]) childMenuSet.hideMenu(childMenus[this._index]);
else dehighlight(this);
}
}
function item_click() {
if (!animating) {
if (_this.items[this._index].url) location.href = _this.items[this._index].url;
}
}
function actuator_mouseover() { parentMenuSet.showMenu(_this); }
function actuator_mouseout() { parentMenuSet.hideMenu(_this); }
function content_mouseover() {
if (!animating) {
parentMenuSet.showMenu(_this);
_this.onmouseover();
}
}
function content_mouseout() {
if (!animating) { parentMenuSet.hideMenu(_this); }
}
function child_mouseover() {
if (!animating) { parentMenuSet.showMenu(_this); }
}
function child_deactivate() {
for (var i = 0; i < childMenus.length; i++) {
if (childMenus[i] == this) {
dehighlight(elmCache["item"][i]);
break;
}
}
}
function child_queue() { parentMenuSet.hideMenu(_this); }
function toString() {
var aHtml = [];
var sClassName = "mtDropdownMenu" + (oActuator.constructor != mtDropDownItem ? " top" : "");
for (var i = 0, item = null; item = this.items[i]; i++) {
aHtml[i] = item.toString(childMenus[i]);
}
return '<div id="' + id + '" class="' + sClassName + '">' + '<div class="content"><table class="items" cellpadding="0" cellspacing="0" border="0">' + '<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr>' + aHtml.join('') + '<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr></table>' + '<div class="shadowBottom"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' + '<div class="shadowRight"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' + '<div class="background"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' + '</div></div>';
}
}
mtDropDownSet.registry = [];
function mtDropDownSet(iDirection, iLeft, iTop, iReferencePoint) {
this.addMenu = addMenu;
this.showMenu = showMenu;
this.hideMenu = hideMenu;
this.hide = hide;
var menus = [];
var _this = this;
var current = null;
this.index = mtDropDownSet.registry.length;
mtDropDownSet.registry[this.index] = this;
function addMenu(oActuator) {
var m = new mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, this);
menus[menus.length] = m;
return m;
}
function showMenu(oMenu) {
if (oMenu != current) {
if (current != null) hide(current);
current = oMenu;
oMenu.show();
}
else cancelHide(oMenu);
}
function hideMenu(oMenu) {
if (current == oMenu && oMenu.isOpen) {
if (!oMenu.hideTimer) scheduleHide(oMenu);
}
}
function scheduleHide(oMenu) {
oMenu.onqueue();
oMenu.hideTimer = window.setTimeout("mtDropDownSet.registry[" + _this.index + "].hide(mtDropDown.registry[" + oMenu.index + "])", mtDropDown.hideDelay);
}
function cancelHide(oMenu) {
if (oMenu.hideTimer) {
window.clearTimeout(oMenu.hideTimer);
oMenu.hideTimer = null;
}
}
function hide(oMenu) {
if (!oMenu && current) oMenu = current;
if (oMenu && current == oMenu && oMenu.isOpen) {
cancelHide(oMenu);
current = null;
oMenu.hideTimer = null;
oMenu.hide();
}
}
}
function mtDropDownItem(sText, sUrl, oParent) {
this.toString = toString;
this.text = sText;
this.url = sUrl;
this.parentMenu = oParent;
function toString(bDingbat) {
var sDingbat = bDingbat ? mtDropDown.dingbatOff : mtDropDown.spacerGif;
var iEdgePadding = mtDropDown.itemPadding + mtDropDown.menuPadding;
var sPaddingLeft = "padding:" + mtDropDown.itemPadding + "px; padding-left:" + iEdgePadding + "px;"
var sPaddingRight = "padding:" + mtDropDown.itemPadding + "px; padding-right:" + iEdgePadding + "px;"
return '<tr ' + (sUrl ? 'class="item"' : 'class="current_item"') + '><td nowrap width="130" style="color: #FFFFFF; font-size: 9pt; ' + sPaddingLeft + '" onmouseover="this.style.color=\'#5D5D5D\'" onmouseout="this.style.color=\'#FFFFFF\'"><span style="font-size: 9pt;">· ' + sText + '</span></td></tr><tr><td style="background-color:#494949;"><img src="images/spacer.gif" width="1" height="1"></td></tr>'; //
}
}
function Accelimation(from, to, time, zip) {
if (typeof zip == "undefined") zip = 0;
if (typeof unit == "undefined") unit = "px";
this.x0 = from;
this.x1 = to;
this.dt = time;
this.zip = -zip;
this.unit = unit;
this.timer = null;
this.onend = new Function();
this.onframe = new Function();
}
Accelimation.prototype.start = function() {
this.t0 = new Date().getTime();
this.t1 = this.t0 + this.dt;
var dx = this.x1 - this.x0;
this.c1 = this.x0 + ((1 + this.zip) * dx / 3);
this.c2 = this.x0 + ((2 + this.zip) * dx / 3);
Accelimation._add(this);
}
Accelimation.prototype.stop = function() {
Accelimation._remove(this);
}
Accelimation.prototype._paint = function(time) {
if (time < this.t1) {
var elapsed = time - this.t0;
this.onframe(Accelimation._getBezier(elapsed/this.dt,this.x0,this.x1,this.c1,this.c2));
}
else this._end();
}
Accelimation.prototype._end = function() {
Accelimation._remove(this);
this.onframe(this.x1);
this.onend();
}
Accelimation._add = function(o) {
var index = this.instances.length;
this.instances[index] = o;
if (this.instances.length == 1) {
this.timerID = window.setInterval("Accelimation._paintAll()", this.targetRes);
}
}
Accelimation._remove = function(o) {
for (var i = 0; i < this.instances.length; i++) {
if (o == this.instances[i]) {
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
break;
}
}
if (this.instances.length == 0) {
window.clearInterval(this.timerID);
this.timerID = null;
}
}
Accelimation._paintAll = function() {
var now = new Date().getTime();
for (var i = 0; i < this.instances.length; i++) {
this.instances[i]._paint(now);
}
}
Accelimation._B1 = function(t) { return t*t*t }
Accelimation._B2 = function(t) { return 3*t*t*(1-t) }
Accelimation._B3 = function(t) { return 3*t*(1-t)*(1-t) }
Accelimation._B4 = function(t) { return (1-t)*(1-t)*(1-t) }
Accelimation._getBezier = function(percent,startPos,endPos,control1,control2) {
return endPos * this._B1(percent) + control2 * this._B2(percent) + control1 * this._B3(percent) + startPos * this._B4(percent);
}
Accelimation.instances = [];
Accelimation.targetRes = 10;
Accelimation.timerID = null;
</script>
<script type="text/javascript">
function init() {
mtDropDown.initialize();
}
</script>
<style type="text/css">
.dhtmlheader{}
.dhtmltext {}
/* this is the clipping region for the menu. its width and height get set by script, depending on the size of the items table */
.mtDropdownMenu {position: absolute; overflow: hidden; left: -1000px; top: -1000px;}
/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.mtDropdownMenu .content {position: absolute;}
/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.mtDropdownMenu .items {position: relative; left: 0px; top: 0px; border: 1px solid #494949; z-index: 4000;}
.mtDropdownMenu.top .items {border-top: none;}
/* each TR.item is one menu item */
.mtDropdownMenu .item {
color: #FFFFFF;
font-size: 8pt;
font-family: 'Verdana', 'Helvetica', sans-serif;
font-weight: normal;
text-decoration: none;
border: none;
cursor: pointer;
cursor: hand;
}
.mtDropdownMenu .current_item {
color: #FFFFFF;
font-size: 8pt;
font-family: 'Verdana', 'Helvetica', sans-serif;
font-weight: bold;
text-decoration: none;
border: none;
cursor: default;
}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.mtDropdownMenu .background {
position: absolute;
left: 0px;
top: 0px;
z-index: 3000;
-moz-opacity: .95;
filter: alpha(opacity=100);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.mtDropdownMenu .shadowRight {
position: absolute;
z-index: 5000;
top: 3px;
width: 2px;
-moz-opacity: .4;
filter: alpha(opacity=0);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.mtDropdownMenu .shadowBottom {
position: absolute;
z-index: 3000;
left: 3px;
height: 2px;
-moz-opacity: .4;
filter: alpha(opacity=0);
}
/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.mtDropdownMenu .item.hover {background: #FFFFFF; color: #5D5D5D;} /*#3491D0*/
/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.mtDropdownMenu .item img {margin-left: 0px;}
</style>
<!-- 그룹버튼 이미지 미리 불러오기 -->
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript">
function init() {
mtDropDown.initialize();
}
</script>
<!--
적당한 폴더를 만들고 정해진 방식에 따라
기본 이미지 = 그룹아이디_1.gif
롤오버 이미지 = 그룹아이디_2.gif
모든 그룹의 버튼 이미지를 만들어 줍니다.
-->
<div style="dispaly:none" onLoad="MM_preloadImages('./img/work_1.gif','./img/work_2.gif')./img/sample_gal_1.gif','./img/sample_gal_2.gif')./img/test_1.gif','./img/test_2.gif')./img/blog_1.gif','./img/blog_2.gif')"></div>
<!-- 여기서는 work, sample_gallery, test, blog 이상 네개의 그룹이 있는 경우 예제이므로 적절히 수정하세요 -->
<div style="width:100%;height:32px;border:1px solid gray;">
<span id='work' class='grIsub'><a href='../../?gur=work' onMouseOver="MM_swapImage('work','','./img/work_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/work_1.gif" width="100" height="30" border=0 name="work" alt="work"></a></span>
<span id='sample_gal' class='grIsub'><a href='../../gallery/?gur=sample_gal' onMouseOver="MM_swapImage('sample_gal','','./img/sample_gal_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/sample_gal_1.gif" width="100" height="30" border=0 name="sample_gal" alt="sample_gal"></a></span>
<span id='test' class='grIsub'><a href='../../?gur=test' onMouseOver="MM_swapImage('test','','./img/test_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/test_2.gif" width="100" height="30" border=0 name="test" alt="test"></a></span>
<span id='blog' class='grIsub'><a href='../../?gur=blog' onMouseOver="MM_swapImage('blog','','./img/blog_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/blog_1.gif" width="100" height="30" border=0 name="blog" alt="blog"></a></span>
</div>
<!-- 각 그룹별 서브메뉴 아래 내용을 참조해서 적절히 첨삭하세요 -->
<script type="text/javascript">
if (mtDropDown.isSupported()) {
var ms = new mtDropDownSet(mtDropDown.direction.down, 0, -2, mtDropDown.reference.bottomLeft);
var work = ms.addMenu(document.getElementById("work"));work.addItem("<span >웹스터디<\/span>","../../bbs/board.php?bo_table=work");
work.addItem("<span >공지/새소식<\/span>","../../bbs/board.php?bo_table=notice");
work.addItem("<span style='font-weight:bold;'>포럼<\/span>","../../bbs/board.php?bo_table=forum");
work.addItem("<span >LAMP<\/span>","../../bbs/board.php?bo_table=lamp");
work.addItem("<span >G4스킨자료<\/span>","../../bbs/board.php?bo_table=skin");
work.addItem("<span >Future<\/span>","../../bbs/board.php?bo_table=future");
work.addItem("<span >스크랩<\/span>","../../bbs/board.php?bo_table=test_scrap");
work.addItem("<span >포인트 광고<\/span>","../../bbs/board.php?bo_table=line_ad");
work.addItem("<span >방명록<\/span>","../../bbs/board.php?bo_table=guest_book");
var sample_gal = ms.addMenu(document.getElementById("sample_gal"));
sample_gal.addItem("<span >갤러리 샘플2<\/span>","../../bbs/board.php?bo_table=sample_gallery_2");
sample_gal.addItem("<span >갤러리 샘플1<\/span>","../../bbs/board.php?bo_table=sample_gallery_1");
sample_gal.addItem("<span >다중선택 갤러리<\/span>","../../bbs/board.php?bo_table=demo_multi_gal");
var test = ms.addMenu(document.getElementById("test"));
test.addItem("<span >acctest<\/span>","../../bbs/board.php?bo_table=acctest");
test.addItem("<span >웹 진<\/span>","../../bbs/board.php?bo_table=webzin_edit");
test.addItem("<span >기본 컨텐츠<\/span>","../../bbs/board.php?bo_table=basic_content");
test.addItem("<span >스크롤 갤러리<\/span>","../../bbs/board.php?bo_table=basic");
test.addItem("<span >블로그 뮤직<\/span>","../../bbs/board.php?bo_table=blog_music");
test.addItem("<span >컨텐츠 작성예제<\/span>","../../bbs/board.php?bo_table=content");
test.addItem("<span >제품소개 테스트<\/span>","../../bbs/board.php?bo_table=test");
var blog = ms.addMenu(document.getElementById("blog"));
blog.addItem("<span >생각하고 ..<\/span>","../../bbs/board.php?bo_table=blog");
blog.addItem("<span >또 생각하는 것?<\/span>","../../bbs/board.php?bo_table=tmp");
blog.addItem("<span >잠간 끼어들기??<\/span>","../../bbs/board.php?bo_table=temp");
mtDropDown.renderAll();
}
/*================================*
* gb_mtDropdownRF.php end
*================================*/
</script>
<script type="text/javascript" Event="onLoad" For="window">
<!-- /*이동금지 Msie, Firefox 호환성 검사 ok*/
init();
//-->
</script>
요사이 다른것좀 들여다 보느라 테스트 사이트에 올려주신 글도 최근에야 보았습니다.
이미지 리사이징 관련 충돌문제로 권해드리고 싶지 않은 메뉴입니다만,
경험삼아 한번 해보시죠??
한번 보세요. http://gnusr.com/g4/template/test/tmp_menu.php
예제 코드입니다.
<?// if (!defined("_GNUBOARD_")) exit;// gb_mtDropdownRF.php
##################################################################
// mt_dropdownC.js 카피라이트와 gb_mtDropdownRF.php 상단 주석 삭제금지
?><script type="text/javascript">
/*====================================================*
* gb_mtDropdownRF.php start
* mt_dropdownC.js start
* Copyright 2003, Aaron Boodman (*** 개인정보보호를 위한 이메일주소 노출방지 ***) *
*====================================================*/
mtShowFlag=0;
mtDropDown.spacerGif = "images/spacer.gif";
mtDropDown.dingbatOn = "images/minus.gif";
mtDropDown.dingbatOff = "images/plus.gif";
mtDropDown.dingbatSize = 14;
mtDropDown.menuPadding = 2;
mtDropDown.itemPadding = 2;
mtDropDown.shadowSize = 0;
mtDropDown.shadowOffset = 0;
mtDropDown.shadowColor = "#FFFFFF";
mtDropDown.shadowPng = "images/spacer.gif";
mtDropDown.backgroundColor = "#5D5D5D"; //015A96
mtDropDown.backgroundPng = "images/spacer.gif";
mtDropDown.hideDelay = 500;
mtDropDown.slideTime = 400;
mtDropDown.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
mtDropDown.direction = {down:1,right:2};
mtDropDown.registry = [];
mtDropDown._maxZ = 100;
mtDropDown.isSupported = function() {
if (typeof mtDropDown.isSupported.r == "boolean") return mtDropDown.isSupported.r;
var ua = navigator.userAgent.toLowerCase();
var an = navigator.appName;
var r = false;
if (ua.indexOf("gecko") > -1) r = true;
else if (an == "Microsoft Internet Explorer") {
if (document.getElementById) r = true;
}
mtDropDown.isSupported.r = r;
return r;
}
mtDropDown.initialize = function() {
for (var i = 0, menu = null; menu = this.registry[i]; i++) {
menu.initialize();
}
}
mtDropDown.renderAll = function() {
var aMenuHtml = [];
for (var i = 0, menu = null; menu = this.registry[i]; i++) {
aMenuHtml[i] = menu.toString();
}
document.write(aMenuHtml.join(""));
}
function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet) {
this.addItem = addItem;
this.addMenu = addMenu;
this.toString = toString;
this.initialize = initialize;
this.isOpen = false;
this.show = show;
this.hide = hide;
this.items = [];
this.onactivate = new Function();
this.ondeactivate = new Function();
this.onmouseover = new Function();
this.onqueue = new Function();
this.index = mtDropDown.registry.length;
mtDropDown.registry[this.index] = this;
var id = "mtDropDown" + this.index;
var contentHeight = null;
var contentWidth = null;
var childMenuSet = null;
var animating = false;
var childMenus = [];
var slideAccel = -1;
var elmCache = null;
var ready = false;
var _this = this;
var a = null;
var pos = iDirection == mtDropDown.direction.down ? "top" : "left";
var dim = null;
function addItem(sText, sUrl) {
var item = new mtDropDownItem(sText, sUrl, this);
item._index = this.items.length;
this.items[item._index] = item;
}
function addMenu(oMenuItem) {
if (!oMenuItem.parentMenu == this) throw new Error("Cannot add a menu here");
if (childMenuSet == null) childMenuSet = new mtDropDownSet(mtDropDown.direction.right, -5, 2, mtDropDown.reference.topRight);
var m = childMenuSet.addMenu(oMenuItem);
childMenus[oMenuItem._index] = m;
m.onmouseover = child_mouseover;
m.ondeactivate = child_deactivate;
m.onqueue = child_queue;
return m;
}
function initialize() {
initCache();
initEvents();
initSize();
ready = true;
}
function show() {
/*
for (i=0;i<document.forms.length;i++) {
for (j=0;j<document.forms[i].elements.length;j++) {
if (document.forms[i].elements[j].nodeName == "SELECT") {
document.forms[i].elements[j].style.visibility = "hidden";
}
}
}
*/
if (ready) {
_this.isOpen = true;
animating = true;
setContainerPos();
elmCache["clip"].style.visibility = "visible";
elmCache["clip"].style.zIndex = mtDropDown._maxZ++;
slideStart();
_this.onactivate();
}
// mtShowFlag++;
}
function hide() {
/*
mtShowFlag--;
if(mtShowFlag == 0) {
for (i=0;i<document.forms.length;i++) {
for (j=0;j<document.forms[i].elements.length;j++) {
if (document.forms[i].elements[j].nodeName == "SELECT") {
document.forms[i].elements[j].style.visibility = "visible";
}
}
}
}
*/
if (ready) {
_this.isOpen = false;
animating = true;
for (var i = 0, item = null; item = elmCache.item[i]; i++) dehighlight(item);
if (childMenuSet) childMenuSet.hide();
slideStart();
_this.ondeactivate();
}
}
function setContainerPos() {
var sub = oActuator.constructor == mtDropDownItem;
var act = sub ? oActuator.parentMenu.elmCache["item"][oActuator._index] : oActuator;
var el = act;
var x = 0;
var y = 0;
var minX = 0;
var maxX = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - parseInt(elmCache["clip"].style.width);
var minY = 0;
var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCache["clip"].style.height);
while (sub ? el.parentNode.className.indexOf("mtDropdownMenu") == -1 : el.offsetParent) {
x += el.offsetLeft;
y += el.offsetTop;
if (el.scrollLeft) x -= el.scrollLeft;
if (el.scrollTop) y -= el.scrollTop;
el = el.offsetParent;
}
if (oActuator.constructor == mtDropDownItem) {
x += parseInt(el.parentNode.style.left);
y += parseInt(el.parentNode.style.top);
}
switch (iReferencePoint) {
case mtDropDown.reference.topLeft:
break;
case mtDropDown.reference.topRight:
x += act.offsetWidth;
break;
case mtDropDown.reference.bottomLeft:
y += act.offsetHeight;
break;
case mtDropDown.reference.bottomRight:
x += act.offsetWidth;
y += act.offsetHeight;
break;
}
x += iLeft;
y += iTop;
x = Math.max(Math.min(x, maxX), minX);
y = Math.max(Math.min(y, maxY), minY);
elmCache["clip"].style.left = x + "px";
elmCache["clip"].style.top = y + "px";
}
function slideStart() {
var x0 = parseInt(elmCache["content"].style[pos]);
var x1 = _this.isOpen ? 0 : -dim;
if (a != null) a.stop();
a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel);
a.onframe = slideFrame;
a.onend = slideEnd;
a.start();
}
function slideFrame(x) {
elmCache["content"].style[pos] = x + "px";
}
function slideEnd() {
if (!_this.isOpen) elmCache["clip"].style.visibility = "hidden";
animating = false;
}
function initSize() {
var ow = elmCache["items"].offsetWidth;
var oh = elmCache["items"].offsetHeight;
var ua = navigator.userAgent.toLowerCase();
elmCache["clip"].style.width = ow + mtDropDown.shadowSize + 2 + "px";
elmCache["clip"].style.height = oh + mtDropDown.shadowSize + 2 + "px";
elmCache["content"].style.width = ow + mtDropDown.shadowSize + "px";
elmCache["content"].style.height = oh + mtDropDown.shadowSize + "px";
contentHeight = oh + mtDropDown.shadowSize;
contentWidth = ow + mtDropDown.shadowSize;
dim = iDirection == mtDropDown.direction.down ? contentHeight : contentWidth;
elmCache["content"].style[pos] = -dim - mtDropDown.shadowSize + "px";
elmCache["clip"].style.visibility = "hidden";
if (ua.indexOf("mac") == -1 || ua.indexOf("gecko") > -1) {
elmCache["background"].style.width = ow + "px";
elmCache["background"].style.height = oh + "px";
elmCache["background"].style.backgroundColor = mtDropDown.backgroundColor;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + "px";
elmCache["shadowRight"].style.backgroundColor = mtDropDown.shadowColor;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].style.width = ow - mtDropDown.shadowOffset + "px";
elmCache["shadowBottom"].style.backgroundColor = mtDropDown.shadowColor;
}
else {
elmCache["background"].firstChild.src = mtDropDown.backgroundPng;
elmCache["background"].firstChild.width = ow;
elmCache["background"].firstChild.height = oh;
elmCache["shadowRight"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].firstChild.width = mtDropDown.shadowSize;
elmCache["shadowRight"].firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize);
elmCache["shadowBottom"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].firstChild.height = mtDropDown.shadowSize;
elmCache["shadowBottom"].firstChild.width = ow - mtDropDown.shadowOffset;
}
}
function initCache() {
var menu = document.getElementById(id);
var all = menu.all ? menu.all : menu.getElementsByTagName("*");
elmCache = {};
elmCache["clip"] = menu;
elmCache["item"] = [];
for (var i = 0, elm = null; elm = all[i]; i++) {
switch (elm.className) {
case "items":
case "content":
case "background":
case "shadowRight":
case "shadowBottom":
elmCache[elm.className] = elm;
break;
case "item":
elm._index = elmCache["item"].length;
elmCache["item"][elm._index] = elm;
break;
}
}
_this.elmCache = elmCache;
}
function initEvents() {
for (var i = 0, item = null; item = elmCache.item[i]; i++) {
item.onmouseover = item_mouseover;
item.onmouseout = item_mouseout;
item.onclick = item_click;
}
if (typeof oActuator.tagName != "undefined") {
oActuator.onmouseover = actuator_mouseover;
oActuator.onmouseout = actuator_mouseout;
}
elmCache["content"].onmouseover = content_mouseover;
elmCache["content"].onmouseout = content_mouseout;
}
function highlight(oRow) {
oRow.className = "item hover";
if (childMenus[oRow._index]) oRow.lastChild.firstChild.src = mtDropDown.dingbatOn;
}
function dehighlight(oRow) {
oRow.className = "item";
if (childMenus[oRow._index]) oRow.lastChild.firstChild.src = mtDropDown.dingbatOff;
}
function item_mouseover() {
if (!animating) {
highlight(this);
if (childMenus[this._index]) childMenuSet.showMenu(childMenus[this._index]);
else if (childMenuSet) childMenuSet.hide();
}
}
function item_mouseout() {
if (!animating) {
if (childMenus[this._index]) childMenuSet.hideMenu(childMenus[this._index]);
else dehighlight(this);
}
}
function item_click() {
if (!animating) {
if (_this.items[this._index].url) location.href = _this.items[this._index].url;
}
}
function actuator_mouseover() { parentMenuSet.showMenu(_this); }
function actuator_mouseout() { parentMenuSet.hideMenu(_this); }
function content_mouseover() {
if (!animating) {
parentMenuSet.showMenu(_this);
_this.onmouseover();
}
}
function content_mouseout() {
if (!animating) { parentMenuSet.hideMenu(_this); }
}
function child_mouseover() {
if (!animating) { parentMenuSet.showMenu(_this); }
}
function child_deactivate() {
for (var i = 0; i < childMenus.length; i++) {
if (childMenus[i] == this) {
dehighlight(elmCache["item"][i]);
break;
}
}
}
function child_queue() { parentMenuSet.hideMenu(_this); }
function toString() {
var aHtml = [];
var sClassName = "mtDropdownMenu" + (oActuator.constructor != mtDropDownItem ? " top" : "");
for (var i = 0, item = null; item = this.items[i]; i++) {
aHtml[i] = item.toString(childMenus[i]);
}
return '<div id="' + id + '" class="' + sClassName + '">' + '<div class="content"><table class="items" cellpadding="0" cellspacing="0" border="0">' + '<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr>' + aHtml.join('') + '<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr></table>' + '<div class="shadowBottom"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' + '<div class="shadowRight"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' + '<div class="background"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' + '</div></div>';
}
}
mtDropDownSet.registry = [];
function mtDropDownSet(iDirection, iLeft, iTop, iReferencePoint) {
this.addMenu = addMenu;
this.showMenu = showMenu;
this.hideMenu = hideMenu;
this.hide = hide;
var menus = [];
var _this = this;
var current = null;
this.index = mtDropDownSet.registry.length;
mtDropDownSet.registry[this.index] = this;
function addMenu(oActuator) {
var m = new mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, this);
menus[menus.length] = m;
return m;
}
function showMenu(oMenu) {
if (oMenu != current) {
if (current != null) hide(current);
current = oMenu;
oMenu.show();
}
else cancelHide(oMenu);
}
function hideMenu(oMenu) {
if (current == oMenu && oMenu.isOpen) {
if (!oMenu.hideTimer) scheduleHide(oMenu);
}
}
function scheduleHide(oMenu) {
oMenu.onqueue();
oMenu.hideTimer = window.setTimeout("mtDropDownSet.registry[" + _this.index + "].hide(mtDropDown.registry[" + oMenu.index + "])", mtDropDown.hideDelay);
}
function cancelHide(oMenu) {
if (oMenu.hideTimer) {
window.clearTimeout(oMenu.hideTimer);
oMenu.hideTimer = null;
}
}
function hide(oMenu) {
if (!oMenu && current) oMenu = current;
if (oMenu && current == oMenu && oMenu.isOpen) {
cancelHide(oMenu);
current = null;
oMenu.hideTimer = null;
oMenu.hide();
}
}
}
function mtDropDownItem(sText, sUrl, oParent) {
this.toString = toString;
this.text = sText;
this.url = sUrl;
this.parentMenu = oParent;
function toString(bDingbat) {
var sDingbat = bDingbat ? mtDropDown.dingbatOff : mtDropDown.spacerGif;
var iEdgePadding = mtDropDown.itemPadding + mtDropDown.menuPadding;
var sPaddingLeft = "padding:" + mtDropDown.itemPadding + "px; padding-left:" + iEdgePadding + "px;"
var sPaddingRight = "padding:" + mtDropDown.itemPadding + "px; padding-right:" + iEdgePadding + "px;"
return '<tr ' + (sUrl ? 'class="item"' : 'class="current_item"') + '><td nowrap width="130" style="color: #FFFFFF; font-size: 9pt; ' + sPaddingLeft + '" onmouseover="this.style.color=\'#5D5D5D\'" onmouseout="this.style.color=\'#FFFFFF\'"><span style="font-size: 9pt;">· ' + sText + '</span></td></tr><tr><td style="background-color:#494949;"><img src="images/spacer.gif" width="1" height="1"></td></tr>'; //
}
}
function Accelimation(from, to, time, zip) {
if (typeof zip == "undefined") zip = 0;
if (typeof unit == "undefined") unit = "px";
this.x0 = from;
this.x1 = to;
this.dt = time;
this.zip = -zip;
this.unit = unit;
this.timer = null;
this.onend = new Function();
this.onframe = new Function();
}
Accelimation.prototype.start = function() {
this.t0 = new Date().getTime();
this.t1 = this.t0 + this.dt;
var dx = this.x1 - this.x0;
this.c1 = this.x0 + ((1 + this.zip) * dx / 3);
this.c2 = this.x0 + ((2 + this.zip) * dx / 3);
Accelimation._add(this);
}
Accelimation.prototype.stop = function() {
Accelimation._remove(this);
}
Accelimation.prototype._paint = function(time) {
if (time < this.t1) {
var elapsed = time - this.t0;
this.onframe(Accelimation._getBezier(elapsed/this.dt,this.x0,this.x1,this.c1,this.c2));
}
else this._end();
}
Accelimation.prototype._end = function() {
Accelimation._remove(this);
this.onframe(this.x1);
this.onend();
}
Accelimation._add = function(o) {
var index = this.instances.length;
this.instances[index] = o;
if (this.instances.length == 1) {
this.timerID = window.setInterval("Accelimation._paintAll()", this.targetRes);
}
}
Accelimation._remove = function(o) {
for (var i = 0; i < this.instances.length; i++) {
if (o == this.instances[i]) {
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
break;
}
}
if (this.instances.length == 0) {
window.clearInterval(this.timerID);
this.timerID = null;
}
}
Accelimation._paintAll = function() {
var now = new Date().getTime();
for (var i = 0; i < this.instances.length; i++) {
this.instances[i]._paint(now);
}
}
Accelimation._B1 = function(t) { return t*t*t }
Accelimation._B2 = function(t) { return 3*t*t*(1-t) }
Accelimation._B3 = function(t) { return 3*t*(1-t)*(1-t) }
Accelimation._B4 = function(t) { return (1-t)*(1-t)*(1-t) }
Accelimation._getBezier = function(percent,startPos,endPos,control1,control2) {
return endPos * this._B1(percent) + control2 * this._B2(percent) + control1 * this._B3(percent) + startPos * this._B4(percent);
}
Accelimation.instances = [];
Accelimation.targetRes = 10;
Accelimation.timerID = null;
</script>
<script type="text/javascript">
function init() {
mtDropDown.initialize();
}
</script>
<style type="text/css">
.dhtmlheader{}
.dhtmltext {}
/* this is the clipping region for the menu. its width and height get set by script, depending on the size of the items table */
.mtDropdownMenu {position: absolute; overflow: hidden; left: -1000px; top: -1000px;}
/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.mtDropdownMenu .content {position: absolute;}
/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.mtDropdownMenu .items {position: relative; left: 0px; top: 0px; border: 1px solid #494949; z-index: 4000;}
.mtDropdownMenu.top .items {border-top: none;}
/* each TR.item is one menu item */
.mtDropdownMenu .item {
color: #FFFFFF;
font-size: 8pt;
font-family: 'Verdana', 'Helvetica', sans-serif;
font-weight: normal;
text-decoration: none;
border: none;
cursor: pointer;
cursor: hand;
}
.mtDropdownMenu .current_item {
color: #FFFFFF;
font-size: 8pt;
font-family: 'Verdana', 'Helvetica', sans-serif;
font-weight: bold;
text-decoration: none;
border: none;
cursor: default;
}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.mtDropdownMenu .background {
position: absolute;
left: 0px;
top: 0px;
z-index: 3000;
-moz-opacity: .95;
filter: alpha(opacity=100);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.mtDropdownMenu .shadowRight {
position: absolute;
z-index: 5000;
top: 3px;
width: 2px;
-moz-opacity: .4;
filter: alpha(opacity=0);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.mtDropdownMenu .shadowBottom {
position: absolute;
z-index: 3000;
left: 3px;
height: 2px;
-moz-opacity: .4;
filter: alpha(opacity=0);
}
/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.mtDropdownMenu .item.hover {background: #FFFFFF; color: #5D5D5D;} /*#3491D0*/
/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.mtDropdownMenu .item img {margin-left: 0px;}
</style>
<!-- 그룹버튼 이미지 미리 불러오기 -->
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript">
function init() {
mtDropDown.initialize();
}
</script>
<!--
적당한 폴더를 만들고 정해진 방식에 따라
기본 이미지 = 그룹아이디_1.gif
롤오버 이미지 = 그룹아이디_2.gif
모든 그룹의 버튼 이미지를 만들어 줍니다.
-->
<div style="dispaly:none" onLoad="MM_preloadImages('./img/work_1.gif','./img/work_2.gif')./img/sample_gal_1.gif','./img/sample_gal_2.gif')./img/test_1.gif','./img/test_2.gif')./img/blog_1.gif','./img/blog_2.gif')"></div>
<!-- 여기서는 work, sample_gallery, test, blog 이상 네개의 그룹이 있는 경우 예제이므로 적절히 수정하세요 -->
<div style="width:100%;height:32px;border:1px solid gray;">
<span id='work' class='grIsub'><a href='../../?gur=work' onMouseOver="MM_swapImage('work','','./img/work_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/work_1.gif" width="100" height="30" border=0 name="work" alt="work"></a></span>
<span id='sample_gal' class='grIsub'><a href='../../gallery/?gur=sample_gal' onMouseOver="MM_swapImage('sample_gal','','./img/sample_gal_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/sample_gal_1.gif" width="100" height="30" border=0 name="sample_gal" alt="sample_gal"></a></span>
<span id='test' class='grIsub'><a href='../../?gur=test' onMouseOver="MM_swapImage('test','','./img/test_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/test_2.gif" width="100" height="30" border=0 name="test" alt="test"></a></span>
<span id='blog' class='grIsub'><a href='../../?gur=blog' onMouseOver="MM_swapImage('blog','','./img/blog_2.gif',1)" onMouseOut="MM_swapImgRestore()" onfocus='this.blur()'><img src="./img/blog_1.gif" width="100" height="30" border=0 name="blog" alt="blog"></a></span>
</div>
<!-- 각 그룹별 서브메뉴 아래 내용을 참조해서 적절히 첨삭하세요 -->
<script type="text/javascript">
if (mtDropDown.isSupported()) {
var ms = new mtDropDownSet(mtDropDown.direction.down, 0, -2, mtDropDown.reference.bottomLeft);
var work = ms.addMenu(document.getElementById("work"));work.addItem("<span >웹스터디<\/span>","../../bbs/board.php?bo_table=work");
work.addItem("<span >공지/새소식<\/span>","../../bbs/board.php?bo_table=notice");
work.addItem("<span style='font-weight:bold;'>포럼<\/span>","../../bbs/board.php?bo_table=forum");
work.addItem("<span >LAMP<\/span>","../../bbs/board.php?bo_table=lamp");
work.addItem("<span >G4스킨자료<\/span>","../../bbs/board.php?bo_table=skin");
work.addItem("<span >Future<\/span>","../../bbs/board.php?bo_table=future");
work.addItem("<span >스크랩<\/span>","../../bbs/board.php?bo_table=test_scrap");
work.addItem("<span >포인트 광고<\/span>","../../bbs/board.php?bo_table=line_ad");
work.addItem("<span >방명록<\/span>","../../bbs/board.php?bo_table=guest_book");
var sample_gal = ms.addMenu(document.getElementById("sample_gal"));
sample_gal.addItem("<span >갤러리 샘플2<\/span>","../../bbs/board.php?bo_table=sample_gallery_2");
sample_gal.addItem("<span >갤러리 샘플1<\/span>","../../bbs/board.php?bo_table=sample_gallery_1");
sample_gal.addItem("<span >다중선택 갤러리<\/span>","../../bbs/board.php?bo_table=demo_multi_gal");
var test = ms.addMenu(document.getElementById("test"));
test.addItem("<span >acctest<\/span>","../../bbs/board.php?bo_table=acctest");
test.addItem("<span >웹 진<\/span>","../../bbs/board.php?bo_table=webzin_edit");
test.addItem("<span >기본 컨텐츠<\/span>","../../bbs/board.php?bo_table=basic_content");
test.addItem("<span >스크롤 갤러리<\/span>","../../bbs/board.php?bo_table=basic");
test.addItem("<span >블로그 뮤직<\/span>","../../bbs/board.php?bo_table=blog_music");
test.addItem("<span >컨텐츠 작성예제<\/span>","../../bbs/board.php?bo_table=content");
test.addItem("<span >제품소개 테스트<\/span>","../../bbs/board.php?bo_table=test");
var blog = ms.addMenu(document.getElementById("blog"));
blog.addItem("<span >생각하고 ..<\/span>","../../bbs/board.php?bo_table=blog");
blog.addItem("<span >또 생각하는 것?<\/span>","../../bbs/board.php?bo_table=tmp");
blog.addItem("<span >잠간 끼어들기??<\/span>","../../bbs/board.php?bo_table=temp");
mtDropDown.renderAll();
}
/*================================*
* gb_mtDropdownRF.php end
*================================*/
</script>
<script type="text/javascript" Event="onLoad" For="window">
<!-- /*이동금지 Msie, Firefox 호환성 검사 ok*/
init();
//-->
</script>
아..너무 감사드립니다.. 언제나 신세만 지는군요..
제가 드릴거라곤 제 홈피에 음악뿐이네요...^^
감사합니다~
제가 드릴거라곤 제 홈피에 음악뿐이네요...^^
감사합니다~
스크랩해갑니다.