https://www.koreaittimes.com/menuskin/pd_01/menubar.js?ver=11

1/*
2	@ 메뉴바 호출
3	var submenuStyle="<?php echo $SubMenuContorl; ?>"; 
4	var exceptIdx = new Array(1,2,3,4); //제외할 메뉴 인덱스번호 (0부터 시작:type integer)
5	-->는 외부에서 불러온다.
6
7	- css class 설명
8	.a-menu-back : hover시 a 태그 백그라운드
9	.s-menu-back : hover시 strong 태그 백그라운드 -> 백그라운드 이미지가 있는 a , strong 태그가 있는 곳에 같이 선언
10	.a-hover	 : hover시 메인 메뉴 a 태그 색상 ($MenuOveColor 불러들이는 곳에 선언)
11	.a-sub-hover : hover시 서브 메뉴 a 태그 색상 ($SubOveColor 불러들이는 곳에 선언)
12
13	- 스크립트 변수
14	menuIndex	: 선택된 메인메뉴 번호 (차례로 0부터시작)
15	submenuIndex: 선택된 서브메뉴 번호 (차례로 0부터시작)
16	submenuStyle	: 서브메뉴 펼침 스타일 (horizon : 가로로, vertical : 세로 슬라이딩)
17	하기 싫음 null로 설정함
18*/ 
19(function($){
20	if(!$ || $=="undefined") return;
21	var sessStg = window.sessionStorage || false;
22
23	$(function(){		
24		var menuIndex=0, submenuIndex=null; //submenuStyle="<?php echo $SubMenuContorl; ?>";
25
26		//menu 선택시 default 선택되게
27		if(location.pathname.length>2){ //index로 들어오지 않을때...
28			if(sessStg!=false){
29				menuIndex	 = sessStg.getItem("menuIndex")||menuIndex;
30				submenuIndex = sessStg.getItem("subMenuIndex")||submenuIndex;
31			}
32		}else{							//index로 들어올때
33			if(sessStg!=false){
34				sessStg.setItem("menuIndex", 0);
35				sessStg.setItem("subMenuIndex", null);
36			}
37		}
38
39		//가로형일때, 길이가 너무 긴 서브메뉴 위치 다시 잡음
40		//rule : 롤오버객체의 left - (사이트전체넓이-롤오버객체의left+서브메뉴넓이(표면상모두960으로 style에 넣어놔서 텍스트(12px),여백20*칸수px 하여계산)-'최종편집'의 넓이)
41		//만약 모두 계산후 left가 - 일 경우 0
42		function calculLeft(obj){
43			var _left = $(obj).position().left;
44			var _txt = (parseInt($("li", obj).text().replace(/ /g,"").length, 10) * 5)+(parseInt($("li", obj).length,10)*12);
45			var _calculate = ($("#mega-menu").width() - (_left+_txt) - ($("#mega-gap").width()||0));
46			var _oLeft = _calculate<=0 ? (_left + _calculate) : _left;
47				_oLeft = _oLeft<=0 ? 0 : _oLeft;
48
49			return parseInt(_oLeft,10);
50		}
51
52		// url 만으로 해당 메뉴 위치 찾기
53		// *** 메뉴 링크를 http://~~~ 절대경로로 할것;
54		// 도메인을 제거한 절대경로도 가능 2017.08.08 수정
55		(function(v){
56
57			//도메인제거 URL
58			v2 = v.replace(/^.*\:\/\/[^\/]+/, '');
59
60			//index()로 안찾아지네;;
61			$("ul#mega-menu > li > a").each(
62				function(idx, ele){
63
64					//if($(ele).attr("href").indexOf(v)>=0){
65					if($(ele).attr("href")==v || $(ele).attr("href")==v2){
66						menuIndex=idx;
67						if(sessStg!=false) sessStg.setItem("menuIndex", idx);
68						return;
69					}
70				});
71			
72			$("ul#mega-menu > li > ul").each(
73				function(idx, ele){
74					$(ele).find("a").each(
75						function(idx2, ele2){
76							if($(ele2).attr("href")==v || $(ele2).attr("href")==v2){
77								menuIndex = $(ele2).parent().parent().parent().index();
78								submenuIndex=idx2;
79
80								if(sessStg!=false){
81									sessStg.setItem("menuIndex", menuIndex);
82									sessStg.setItem("subMenuIndex", idx2);
83								}
84								return;
85							}
86						});
87				});
88			
89			//location.pathname+location.search
90
91		})(location.href);
92
93		
94		$("#mega-menu > li").each(function(idx, ele){
95			if(menuIndex != null){
96				if(idx == menuIndex){
97					var mIdx = parseInt(menuIndex,10);
98					var obj = $("#mega-menu > li:eq("+mIdx+")");
99
100					if(submenuStyle=="horizon"){
101						$("ul", obj).css({"paddingLeft":calculLeft(obj)+"px","display":($.inArray(idx, exceptIdx)<0 ? "block":"none")}).prev("a").addClass("a-hover a-menu-back");
102
103						$("strong", obj).addClass("s-menu-back");
104						$("span", obj).addClass("p-menu-back");
105
106						//서브메뉴	
107						if(submenuIndex != null){
108							$("ul > li > a", obj).each(
109								function(sIdx){
110									if(sIdx == submenuIndex) $(this).addClass("a-sub-hover");
111								});
112						}					 
113					
114					//세로형 서브메뉴
115					}else $("ul", obj).prev("a").addClass("a-hover a-menu-back").children("strong").addClass("s-menu-back").children("span").addClass("p-menu-back");
116				}
117			}
118
119			$(ele).hover(function(){
120				$("#mega-menu li ul").hide();
121				$("#mega-menu > li > a").removeClass("a-hover a-menu-back").children("strong").removeClass("s-menu-back").children("span").removeClass("p-menu-back");
122				$(ele).children("a").addClass("a-hover a-menu-back").children("strong").addClass("s-menu-back").children("span").addClass("p-menu-back");
123				
124				if($.inArray(idx, exceptIdx)>=0) return;

124 //나오지 않았으면 하는 서브메뉴
125
126				if(submenuStyle=="horizon") $("ul",this).css({"paddingLeft":calculLeft(ele)+"px"}).show();
127				else{ //세로형 서브메뉴
128					if($("ul>li",this).length<=0) return;
129
130					var _mw = $(this).width(), //메인메뉴 넓이
131					_ew = $("ul",ele).width(), //서브메뉴 넓이
132					_l = $(this).position().left-((_ew/2)-(_mw/2)); //상단메뉴와 비교 가운데 띄우기
133					//_l = _l<=0 ? $(this).position().left : _l;// 왼쪽에 딱 붙었을때는 넘어가지 않기
134					
135					$("ul",this).css({"position":"absolute","top":($(this).position().top+$(ele).height())+"px","left":_l+"px"}).addClass("sub-menu-vertical").slideDown();
136				}
137
138				//서브메뉴
139				$("ul>li>a",this).hover(function(){	
140											$(this).parent().parent().find("a").removeClass("a-sub-hover");
141											$(this).addClass("a-sub-hover");
142										});
143			},
144			function(){
145				if(submenuStyle=="vertical") $("ul",this).fadeOut(300);
146			});
147		});
148	
149	});
150
151})(jQuery);