반응 좋은 메뉴 스크립트
2009.01.31 05:21
9255
0
이온디
첨부파일
https://imweb.eond.com/coding/164605 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<meta http-equiv=cache-control content=no-cache>
<meta http-equiv=pragma content=no-cache>
<!-- title -->
<title>반응 좋은 메뉴 스크립트</title>
<script type="text/javascript" language="javascript">
//<![CDATA[
var subMPrefix = 'sub';
var openLayer = null;
function mouseOut(e, mainObj, subObjNo){
subObj = document.getElementById(subMPrefix + subObjNo);
if (!e) var e = window.event;
var coord = getObjCoordinates(mainObj);
var mouse = getMouseXY(e);
if(mouse.x < coord.x || mouse.x > coord.x + coord.w || mouse.y < coord.y|| mouse.y > coord.y + coord.h) {
hideLayer(subObj);
}
}
function getObjCoordinates(obj) {
var result = new Object();
result.x = getOffsetLeft(obj);
result.y = getOffsetTop(obj);
result.w = obj.offsetWidth;
result.h = obj.offsetHeight;
return result;
}
function getMouseXY(e) {
if (!e) var e = window.event;
var result = new Object();
result.x = document.all ? event.clientX + (document.body.scrollLeft == 0 ? document.documentElement.scrollLeft : document.body.scrollLeft) : e.pageX;
result.y = document.all ? event.clientY + (document.body.scrollTop == 0? document.documentElement.scrollTop : document.body.scrollTop) : e.pageY;
return result;
}
function checkMouse(e) {
if (openLayer != null) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
var obj = openLayer.parentNode;
while (tg && tg != obj && tg.nodeName != 'BODY') {
tg= tg.parentNode;
}
if (tg == obj) {
return;
} else {
hideLayer(openLayer);
openLayer = null;
}
}
}
function getOffsetLeft (el) {
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null) { ol += el.offsetLeft; }
return ol;
}
function getOffsetTop (el) {
var ot = el.offsetTop;
while((el = el.offsetParent) != null) { ot += el.offsetTop; }
return ot;
}
function showLayer(objNo) {
obj = document.getElementById(subMPrefix + objNo);
obj.style.display = 'block';
openLayer = obj;
}
function hideLayer(obj) {
obj.style.display = 'none';
}
//
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'unload',EventCache.flush);
//
addEvent(document,'mousemove',checkMouse);
//]]>
</script>
<!-- document-specific inline style -->
<style type="text/css">
/*<![CDATA[*/
body { font-size: 9pt; margin:0; padding:50px 0 0;}
#mWrap { position:absolute; }
.mainM { float: left; background: #eee; border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; }
.subM { margin: 8px 0; display:none; }
.subM div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;}
.subM div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; }
.mainM1 { background: #eee; border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; border-bottom: 0px;}
.lastM { border-bottom: 1px solid #333;}
.subM1 { margin: 8px 0; display:none; }
.subM1 div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;}
.subM1 div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; }
div.clear { clear: both; height:0px; font-size:0px; }
/*]]>*/
</style>
</head>
<body>
<table align="center" width="90%" height="90%" cellspacing="0" border="1" cellpadding="0">
<tr>
<td height="30" valign="top">
<div id="mWrap">
<div class="mainM" onmouseover="showLayer(1)" onmouseout="mouseOut(event, this, 1)">메인메뉴1
<div class="subM" id="sub1">
<div><a href="#">서브메뉴1</a></div>
<div><a href="#">서브메뉴1</a></div>
<div><a href="#">서브메뉴1</a></div>
</div>
</div>
<div class="mainM" onmouseover="showLayer(2)" onmouseout="mouseOut(event, this, 2)">메인메뉴2
<div class="subM" id="sub2">
<div><a href="#">서브메뉴2</a></div>
<div><a href="#">서브메뉴2</a></div>
<div><a href="#">서브메뉴2</a></div>
</div>
</div>
<div class="mainM" onmouseover="showLayer(3)" onmouseout="mouseOut(event, this, 3)">메인메뉴3
<div class="subM" id="sub3">
<div><a href="#">서브메뉴3</a></div>
<div><a href="#">서브메뉴3</a></div>
<div><a href="#">서브메뉴3</a></div>
</div>
</div>
<div class="mainM" onmouseover="showLayer(4)" onmouseout="mouseOut(event, this, 4)">메인메뉴4
<div class="subM" id="sub4">
<div><a href="#">서브메뉴4</a></div>
<div><a href="#">서브메뉴4</a></div>
<div><a href="#">서브메뉴4</a></div>
</div>
</div>
<div class="clear"></div>
</div>
</td>
</tr>
<tr>
<td height="100%">
<div id="mWrap">
<div class="mainM1" onmouseover="showLayer(11)" onmouseout="mouseOut(event, this, 11)">메인메뉴1
<div class="subM1" id="sub11">
<div><a href="#">서브메뉴11</a></div>
<div><a href="#">서브메뉴11</a></div>
<div><a href="#">서브메뉴11</a></div>
</div>
</div>
<div class="mainM1" onmouseover="showLayer(21)" onmouseout="mouseOut(event, this, 21)">메인메뉴2
<div class="subM1" id="sub21">
<div><a href="#">서브메뉴21</a></div>
<div><a href="#">서브메뉴21</a></div>
<div><a href="#">서브메뉴21</a></div>
</div>
</div>
<div class="mainM1" onmouseover="showLayer(31)" onmouseout="mouseOut(event, this, 31)">메인메뉴3
<div class="subM1" id="sub31">
<div><a href="#">서브메뉴31</a></div>
<div><a href="#">서브메뉴31</a></div>
<div><a href="#">서브메뉴31</a></div>
</div>
</div>
<div class="mainM1 lastM" onmouseover="showLayer(41)" onmouseout="mouseOut(event, this, 41)">메인메뉴4
<div class="subM1" id="sub41">
<div><a href="#">서브메뉴41</a></div>
<div><a href="#">서브메뉴41</a></div>
<div><a href="#">서브메뉴41</a></div>
</div>
</div>
<div class="clear"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<meta http-equiv=cache-control content=no-cache>
<meta http-equiv=pragma content=no-cache>
<!-- title -->
<title>반응 좋은 메뉴 스크립트</title>
<script type="text/javascript" language="javascript">
//<![CDATA[
var subMPrefix = 'sub';
var openLayer = null;
function mouseOut(e, mainObj, subObjNo){
subObj = document.getElementById(subMPrefix + subObjNo);
if (!e) var e = window.event;
var coord = getObjCoordinates(mainObj);
var mouse = getMouseXY(e);
if(mouse.x < coord.x || mouse.x > coord.x + coord.w || mouse.y < coord.y|| mouse.y > coord.y + coord.h) {
hideLayer(subObj);
}
}
function getObjCoordinates(obj) {
var result = new Object();
result.x = getOffsetLeft(obj);
result.y = getOffsetTop(obj);
result.w = obj.offsetWidth;
result.h = obj.offsetHeight;
return result;
}
function getMouseXY(e) {
if (!e) var e = window.event;
var result = new Object();
result.x = document.all ? event.clientX + (document.body.scrollLeft == 0 ? document.documentElement.scrollLeft : document.body.scrollLeft) : e.pageX;
result.y = document.all ? event.clientY + (document.body.scrollTop == 0? document.documentElement.scrollTop : document.body.scrollTop) : e.pageY;
return result;
}
function checkMouse(e) {
if (openLayer != null) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
var obj = openLayer.parentNode;
while (tg && tg != obj && tg.nodeName != 'BODY') {
tg= tg.parentNode;
}
if (tg == obj) {
return;
} else {
hideLayer(openLayer);
openLayer = null;
}
}
}
function getOffsetLeft (el) {
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null) { ol += el.offsetLeft; }
return ol;
}
function getOffsetTop (el) {
var ot = el.offsetTop;
while((el = el.offsetParent) != null) { ot += el.offsetTop; }
return ot;
}
function showLayer(objNo) {
obj = document.getElementById(subMPrefix + objNo);
obj.style.display = 'block';
openLayer = obj;
}
function hideLayer(obj) {
obj.style.display = 'none';
}
//
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'unload',EventCache.flush);
//
addEvent(document,'mousemove',checkMouse);
//]]>
</script>
<!-- document-specific inline style -->
<style type="text/css">
/*<![CDATA[*/
body { font-size: 9pt; margin:0; padding:50px 0 0;}
#mWrap { position:absolute; }
.mainM { float: left; background: #eee; border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; }
.subM { margin: 8px 0; display:none; }
.subM div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;}
.subM div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; }
.mainM1 { background: #eee; border:1px solid #333; width: 150px; padding: 6px 4px 0; margin: 0 2px; border-bottom: 0px;}
.lastM { border-bottom: 1px solid #333;}
.subM1 { margin: 8px 0; display:none; }
.subM1 div { background: #ddd; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333;}
.subM1 div div div{ background: #999; margin: 6px 0 6px 20px; padding: 6px; border:1px solid #333; }
div.clear { clear: both; height:0px; font-size:0px; }
/*]]>*/
</style>
</head>
<body>
<table align="center" width="90%" height="90%" cellspacing="0" border="1" cellpadding="0">
<tr>
<td height="30" valign="top">
<div id="mWrap">
<div class="mainM" onmouseover="showLayer(1)" onmouseout="mouseOut(event, this, 1)">메인메뉴1
<div class="subM" id="sub1">
<div><a href="#">서브메뉴1</a></div>
<div><a href="#">서브메뉴1</a></div>
<div><a href="#">서브메뉴1</a></div>
</div>
</div>
<div class="mainM" onmouseover="showLayer(2)" onmouseout="mouseOut(event, this, 2)">메인메뉴2
<div class="subM" id="sub2">
<div><a href="#">서브메뉴2</a></div>
<div><a href="#">서브메뉴2</a></div>
<div><a href="#">서브메뉴2</a></div>
</div>
</div>
<div class="mainM" onmouseover="showLayer(3)" onmouseout="mouseOut(event, this, 3)">메인메뉴3
<div class="subM" id="sub3">
<div><a href="#">서브메뉴3</a></div>
<div><a href="#">서브메뉴3</a></div>
<div><a href="#">서브메뉴3</a></div>
</div>
</div>
<div class="mainM" onmouseover="showLayer(4)" onmouseout="mouseOut(event, this, 4)">메인메뉴4
<div class="subM" id="sub4">
<div><a href="#">서브메뉴4</a></div>
<div><a href="#">서브메뉴4</a></div>
<div><a href="#">서브메뉴4</a></div>
</div>
</div>
<div class="clear"></div>
</div>
</td>
</tr>
<tr>
<td height="100%">
<div id="mWrap">
<div class="mainM1" onmouseover="showLayer(11)" onmouseout="mouseOut(event, this, 11)">메인메뉴1
<div class="subM1" id="sub11">
<div><a href="#">서브메뉴11</a></div>
<div><a href="#">서브메뉴11</a></div>
<div><a href="#">서브메뉴11</a></div>
</div>
</div>
<div class="mainM1" onmouseover="showLayer(21)" onmouseout="mouseOut(event, this, 21)">메인메뉴2
<div class="subM1" id="sub21">
<div><a href="#">서브메뉴21</a></div>
<div><a href="#">서브메뉴21</a></div>
<div><a href="#">서브메뉴21</a></div>
</div>
</div>
<div class="mainM1" onmouseover="showLayer(31)" onmouseout="mouseOut(event, this, 31)">메인메뉴3
<div class="subM1" id="sub31">
<div><a href="#">서브메뉴31</a></div>
<div><a href="#">서브메뉴31</a></div>
<div><a href="#">서브메뉴31</a></div>
</div>
</div>
<div class="mainM1 lastM" onmouseover="showLayer(41)" onmouseout="mouseOut(event, this, 41)">메인메뉴4
<div class="subM1" id="sub41">
<div><a href="#">서브메뉴41</a></div>
<div><a href="#">서브메뉴41</a></div>
<div><a href="#">서브메뉴41</a></div>
</div>
</div>
<div class="clear"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
글목록
코멘트 0
접기/펴기 | 댓글 새로고침
정말 이 글을 삭제하실건가요? -_-...
닫기
이온디
"반응 좋은 메뉴 스크립트"
"반응 좋은 메뉴 스크립트"
Total 235 articles in 2 / 12 pages
태그
설정
글쓰기
