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")
*/