기본적인 글로벌 네비게이션

javascript

var _d = document;
function getClass(classname, tagname, tarID) {}
function addClass(element,value) {}
function removeClass(element,value) {}

var gnbNavi = function(gnbID, currentNum, subCurrentNum, noscript){
	var wrapper = _d.getElementById(gnbID);
	if (noscript) removeClass(wrapper,noscript);	// 스크립트가 로딩되면 wrapper의 class중 'noscript'를 삭제합니다.

	var menu = getClass('depth1','li',wrapper);
	var menuLink = [];			// 이벤트를 발생시킬 대메뉴의 a들
	var submenu = [];			// 대메뉴의 하위에 위치한 ul들
	var submenuLink = [];		// 서브메뉴의 a들

	var initialize = function(){
		for (var i=0; i<menu.length; i++){
			menuLink[i] = menu[i].getElementsByTagName('a')[0];
			submenu[i] = menu[i].getElementsByTagName('ul')[0];
			if(submenu[i] == undefined){
				submenu[i] = null;
			}
			if(submenu[i]) submenu[i].style.visibility = 'hidden';	// 서브메뉴 'hidden'초기화

			showSubmenu(i);											// 마우스 이벤트에 서브메뉴 show / hide
		}
		if (currentNum) menuLink[currentNum-1].onmouseover();		// 대메뉴 활성화
	};
	var showSubmenu = function(num){
		menuLink[num].onmouseover = menuLink[num].onfocus = function(){
			for(var i=0; i<menu.length; i++){
				var imgEl = menuLink[i].getElementsByTagName('img')[0];
				if(i == num){
					if (menu[i].className.indexOf('visible') == -1) addClass(menu[i],'visible');		// 활성화 된 메뉴에 class추가
					if (imgEl && imgEl.src.indexOf('_on.gif') == -1) imgEl.src = imgEl.src.replace('.gif', '_on.gif');	// 대메뉴 이미지 오버
					if(submenu[i]) {
						submenu[i].style.visibility = 'visible';
						subImgOver(i);								// 보여지는 서브메뉴의 메뉴들에게 이벤트를 지정
					}
				} else {
					removeClass(menu[i],'visible');
					if (imgEl) imgEl.src = imgEl.src.replace('_on.gif', '.gif');
					if(submenu[i]) {
						submenu[i].style.visibility = 'hidden';
					}
				}
			}
		}
	};
	var subImgOver = function(num){
		submenuLink = submenu[num].getElementsByTagName('a');
		for(var i=0; i<submenuLink.length; i++){
			submenuLink[i].onmouseover = function(){
				var imgEl = this.getElementsByTagName('img')[0];
				if (this.className.indexOf('on') == -1) addClass(this,' on');
				if (imgEl && imgEl.src.indexOf('_on.gif') == -1) imgEl.src = imgEl.src.replace('.gif', '_on.gif');
			}
			submenuLink[i].onmouseout = function(){
				var imgEl = this.getElementsByTagName('img')[0];
				removeClass(this,'on');
				if (imgEl) imgEl.src = imgEl.src.replace('_on.gif', '.gif');
			}
			if (subCurrentNum && num == (currentNum - 1)) {				// 서브메뉴 활성화가 지정된 경우 && 현재 보여지는 서브메뉴가 활성화된 대메뉴 일 경우
				var subCurrentMenu = submenuLink[subCurrentNum - 1];
				if(!subCurrentMenu) return;
				var subCurrentImage = subCurrentMenu.getElementsByTagName('img')[0];
				if(subCurrentMenu.className.indexOf('on') == -1) addClass(subCurrentMenu,' on');
				if (subCurrentImage && subCurrentImage.src.indexOf('_on.gif') == -1) subCurrentImage.src = subCurrentImage.src.replace('.gif', '_on.gif');
				subCurrentMenu.onmouseout = function(){
					return false;
				}
			}
		}
	}
	initialize();
}

hml

<div id="gnbmenu" class="noscript">
	<ul>
		<li class="depth1">
			<a href="#">menu01</a>
			<ul class="depth2"><li><a href="#">menu0101</a></li></ul>
		</li>
		<li class="depth1">
			<a href="#">menu02</a>
			<ul class="depth2"><li><a href="#">menu0201</a></li></ul>
		</li>
		<li class="depth1">
			<a href="#">menu03</a>
		</li>
		<li class="depth1">
			<a href="#">menu04</a>
			<ul class="depth2">
				<li><a href="#">menu0401</a></li>
			</ul>
		</li>
		<li class="depth1">
			<a href="#">menu05</a>
			<ul class="depth2">
				<li><a href="#">menu0501</a></li>
			</ul>
		</li>
		<li class="depth1">
			<a href="#">menu06</a>
		</li>
	</ul>
</div>
<script type="text/javascript">
//<![CDATA[
//	gnbNavi(대메뉴ID명, 대메뉴 활성화, 서브메뉴 활성화, js로딩시 제거할 class명);
	gnbNavi('gnbmenu',1,2,'noscript');
//]]>
</script>

• 활성화 된 대메뉴에 ‘visible’ class 추가
• 대메뉴, 서브메뉴에 이미지인 경우 “~.gif”, “~on.gif”로 이미지 변환
• 활성화 된 대메뉴, 서브메뉴 지원 (currentNum, subCurrentNum)
• getClass(), addClass(), removeClass(); 함수 사용
• 서브메뉴 각각의 위치는 css등 이용 권장
• js로딩시 gnbID의 class값 제거 : js없을경우 별도의 디자인 view 가능

미리보기