JavaScript Menu
키보드 접근 가능한 스크립트 메뉴
키보드로의 접근이 가능하게 제작된 메뉴 스크립트, 이미지 처리와 같은 별도의 기능은 추가 구현 필요
function initNavigation(seq) {
nav = document.getElementById("topmenu");
nav.menu = new Array();
nav.current = null;
nav.menuseq = 0;
navLen = nav.childNodes.length;
allA = nav.getElementsByTagName("a")
for(k = 0; k < allA.length; k++) {
allA.item(k).onmouseover = allA.item(k).onfocus = function () {
nav.isOver = true;
}
allA.item(k).onmouseout = allA.item(k).onblur = function () {
nav.isOver = false;
setTimeout(function () {
if (nav.isOver == false)
nav.menu[seq].onmouseover();
}, 500);
}
}
for (i = 0; i < navLen; i++) {
navItem = nav.childNodes.item(i);
if (navItem.tagName != "LI")
continue;
navAnchor = navItem.getElementsByTagName("a").item(0);
navAnchor.submenu = navItem.getElementsByTagName("ul").item(0);
navAnchor.onmouseover = navAnchor.onfocus = function () {
if (nav.current) {
menuImg = nav.current.childNodes.item(0);
menuImg.src = menuImg.src.replace("_on.gif", ".gif");
if (nav.current.submenu)
nav.current.submenu.style.display = "none";
nav.current = null;
}
if (nav.current != this) {
menuImg = this.childNodes.item(0);
menuImg.src = menuImg.src.replace(".gif", "_on.gif");
if (this.submenu)
this.submenu.style.display = "block";
nav.current = this;
}
nav.isOver = true;
}
nav.menuseq++;
nav.menu[nav.menuseq] = navAnchor;
}
if (nav.menu[seq])
nav.menu[seq].onmouseover();
}
효과가 가미된 메뉴
정리 안됐음
/* menu */
function initNav(menu)
{
for(i = 0; i < menu.childNodes.length; i++) {
if (menu.childNodes.item(i).tagName == "LI") {
menu.childNodes.item(i).getElementsByTagName("img").item(0).submenu = menu.childNodes.item(i).getElementsByTagName("ul").item(0);
menu.childNodes.item(i).getElementsByTagName("img").item(0).bar = menu.childNodes.item(i).getElementsByTagName("div").item(0);
//setTop(menu.childNodes.item(i).getElementsByTagName("img").item(0).submenu, 1, 0, 53);
setOpacity(menu.childNodes.item(i).getElementsByTagName("img").item(0).submenu, 1, 1, 0);
menu.childNodes.item(i).getElementsByTagName("img").item(0).onmouseover = function() {
if (menu.current != this) {
if (menu.current) {
menu.current.submenu.style.zIndex = 0;
setTop(menu.current.submenu, 0.2, 33, -23);
setOpacity(menu.current.submenu, 1, 1, 0);
// bar
menu.current.bar.style.display = "none";
}
this.submenu.style.zIndex = 5;
setTop(this.submenu, 0.4, -20, 33);
setOpacity(this.submenu, 0.3, 0, 1);
menu.current = this;
// bar
this.bar.style.display = "block";
setWider(this.bar, 0.3, 0, 56);
}
}
menu.childNodes.item(i).getElementsByTagName("img").item(0).submenu.onmouseout = function() {
}
menuImage = menu.childNodes.item(i).getElementsByTagName("img").item(0).submenu.getElementsByTagName("img");
for (j = 0; j < menuImage.length; j++) {
if (typeof(menuImage.item(j).style.filter) == "string") {
menuImage.item(j).onmouseover = function() {
this.style.filter = this.style.filter.replace(".png", "_on.png");
}
menuImage.item(j).onmouseout = function() {
this.style.filter = this.style.filter.replace("_on.png", ".png");
}
} else {
menuImage.item(j).onmouseover = function() {
this.src = this.src.replace(".png", "_on.png");
}
menuImage.item(j).onmouseout = function() {
this.src = this.src.replace("_on.png", ".png");
}
}
}
}
}
}
/**
* Element Opacity Change
*/
function setOpacity(el, mod, start_value, end_value) {
interval = 30;
el.style.display = "block";
el.style.opacity = start_value;
if (el.setOpacity) {
clearInterval(el.setOpacity);
}
el.setOpacity = setInterval(function() {
if (Math.abs(end_value * 100 - el.style.opacity * 100) / 100 < 0.01) {
el.style.opacity = end_value;
if (end_value == 0) {
el.style.display = "none" ;
}
clearInterval(el.setOpacity);
return true;
} else {
el.style.opacity = parseFloat(el.style.opacity) + (end_value - parseFloat(el.style.opacity)) * mod;
el.style.filter = "alpha(opacity=" + (parseFloat(el.style.opacity) + (end_value - parseFloat(el.style.opacity)) * mod) * 100 + ")";
}
}, interval);
}
/**
* Element Height Change
*/
function setHeight(el, mod, start_value, end_value) {
interval = 30;
el.style.height = start_value + "px";
if (el.setHeight) {
clearInterval(el.setHeight);
}
el.setHeight = setInterval(function() {
elementHeight = parseInt(el.style.height.replace("px", ""));
if (Math.abs(end_value * 100 - elementHeight * 100) / 100 < 0.01) {
el.style.height = end_value + "px";
clearInterval(el.setHeight);
return true;
} else {
el.style.height = (elementHeight + (end_value - elementHeight) * mod) + "px";
}
}, interval);
}
/**
* Element Width Change
*/
function setWidth(el, mod, start_value, end_value) {
interval = 30;
el.style.width = start_value + "px";
if (el.setWidth) {
clearInterval(el.setWidth);
}
el.setWidth = setInterval(function() {
elementWidth = parseInt(el.style.width.replace("px", ""));
if (Math.abs(end_value * 100 - elementWidth * 100) / 100 < 0.01) {
el.style.width = end_value + "px";
clearInterval(el.setWidth);
return true;
} else {
el.style.width = (elementWidth + (end_value - elementWidth) * mod) + "px";
}
}, interval);
}
/**
* Element Wider Change
*/
function setWider(el, mod, start_value, end_value) {
interval = 30;
el.style.width = start_value + "px";
if (el.setWider) {
clearInterval(el.setWider);
}
el.setWider = setInterval(function() {
elementWidth = parseInt(el.style.width.replace("px", ""));
if (Math.abs(end_value * 10 - elementWidth * 10) / 10 < 0.1) {
el.style.width = end_value + "px";
clearInterval(el.setWidth);
return true;
} else {
el.style.width = (elementWidth + (end_value - elementWidth) * mod) + "px";
el.style.marginLeft = elementWidth * -0.5 + "px";
}
}, interval);
}
/**
* Element top Change
*/
function setTop(el, mod, start_value, end_value) {
interval = 20;
el.style.top = start_value + "px";
if (el.setTop) {
clearInterval(el.setTop);
}
el.setTop = setInterval(function() {
elementTop = parseInt(el.style.top.replace("px", ""));
if (Math.abs(end_value - elementTop) < 1) {
el.style.top = end_value + "px";
clearInterval(el.setTop);
return true;
} else {
el.style.top = (elementTop + (end_value - elementTop) * mod) + "px";
}
}, interval);
}
/**
* Element left Change
*/
function setLeft(el, mod, start_value, end_value) {
interval = 20;
el.style.left = start_value + "px";
if (el.setLeft) {
clearInterval(el.setLeft);
}
el.setLeft = setInterval(function() {
elementLeft = parseInt(el.style.left.replace("px", ""));
if (Math.abs(end_value * 100 - elementLeft * 100) / 100 < 0.01) {
el.style.left = end_value + "px";
clearInterval(el.setLeft);
return true;
} else {
el.style.left = (elementLeft + (end_value - elementLeft) * mod) + "px";
}
}, interval);
}
/**
* Element background Change
*/
/*
function setBackgroundColor(el, mod, start_value, end_value) {
interval = 20;
start_value = hexToRgb(start_value);
end_value = hexToRgb(end_value);
el.style.backgroundColor = start_value;
if (el.setBackgroundColor) {
clearInterval(el.setBackgroundColor);
}
el.setBackgroundColor = setInterval(function() {
elementBackgroundColor = el.style.backgroundColor;
// if (Math.abs(end_value * 100 - elementBackgroundColor * 100) / 100 < 0.01) {
if (rgbDiff(end_value, elementBackgroundColor, mod) == "rgb(1, 1, 1)" || rgbDiff(end_value, elementBackgroundColor, mod) == "rgb(0, 0, 0)") {
el.style.backgroundColor = end_value;
clearInterval(el.setBackgroundColor);
return true;
} else {
trace(rgbDiff(end_value, elementBackgroundColor, mod));
el.style.backgroundColor = rgbDiff(end_value, elementBackgroundColor, mod);
}
}, interval);
}
function hexToRgb(hex) {
r = hex.substr(1, 2);
g = hex.substr(3, 2);
b = hex.substr(5, 2);
return "rgb(" + String(hexToDec(r)) + ", " + String(hexToDec(g)) + ", " + String(hexToDec(b)) + ")";
}
function rgbDiff(rgb1, rgb2, mod) {
rgb1 = rgb1.split("rgb(")[1];
rgb1 = rgb1.split(")")[0];
rgb1 = rgb1.split(", ");
rgb2 = rgb2.split("rgb(")[1];
rgb2 = rgb2.split(")")[0];
rgb2 = rgb2.split(", ");
r = Math.round(Math.abs(rgb1[0] * mod - rgb2[0] * mod));
g = Math.round(Math.abs(rgb1[1] * mod - rgb2[1] * mod));
b = Math.round(Math.abs(rgb1[2] * mod - rgb2[2] * mod));
return "rgb(" + String(r) + ", " + String(g) + ", " + String(b) + ")";
}
function hexToDec(hex) {
return parseInt(parseInt("0x" + hex), 10);
}
//trace(rgbDiff("rgb(255, 254, 253)", "rgb(1, 1, 2)"));
bar = document.getElementById("bar");
bar.style.background = "#000";
setHeight(bar, 0.1, 2, 5);
setWidth(bar, 0.1, 25, 56);
setBackgroundColor(bar, 0.90, "#ff0000", "#dd0000")
*/