https://cdn.ccreview.co.kr/menuskin/s_A44/menubar.js

1/******************************************************************
2note : 메뉴바 JS v3.0.7
3name : 김지수
4date : 2019-10-28
5
6[css class 설명]
7.a-hover	 : hover시 메인 메뉴 a 태그 색상
8.a-active	 : 현재 페이지 or a-hover 클래스 적용 메뉴 (style 없음)
9.a-sub-hover : hover시 서브 메뉴 a 태그 색상
10
11[스크립트 변수]
12menuIndexHold		: index 페이지 일 떄 메뉴 a-hover 여부 (true : 첫번쨰 메뉴 a-hover / false : none)
13menuOverHold		: hover시 메뉴 a-hover 고정 (true : 현재페이지 메뉴 a-hover 고정 / false : 고정 x) 
14submenuStyle		: 서브메뉴 펼침 스타일 (horizon : 가로형, vertical : 세로형)
15sizeMode			: 사이즈 모드 (basic : 기본 / full : 전체)
16subShow				: 서브메뉴 보이기 ( hold : 노출 / hidden : 비노출 / page : page에서만 노출 ) - horizon 일때만 적용
17submenuPosi		: left / center / right
18effectSwitch			: on / off - slide & fade 효과 사용여부
19subSlideSpeed		: 서브메뉴 slide down 속도(default = 300)
20subFadeSpeed		: 서브메뉴 fade out 속도(default = 300)  - vertical 일때만 적용
21******************************************************************/
22
23(function($){
24
25	if(!$ || $=="undefined") return;
26
27	$(window).on("load", function() {
28
29		// 현재페이지 섹션코드값
30		var mainSecCode 	= $("#header-wrapper").attr("data-main-code");			// 1ì°¨
31		var subSecCode 		= $("#header-wrapper").attr("data-sub-code");			// 2ì°¨
32		var serialSecCode 	= $("#header-wrapper").attr("data-serial-code");		// 연재
33		var multiSecCode 	= $("#header-wrapper").attr("data-multi-code");        	// 다중섹션
34
35		// index 일때 첫번째 섹션에 a-hover (menuIndexHold 가 true일 때)
36		if(menuIndexHold == true) {
37			if((mainSecCode.indexOf("index") == 1 || mainSecCode == "/" || mainSecCode == "/news/articleList.html" || mainSecCode == "/edit/webPublishing.php") && multiSecCode == "") {
38				$("ul#user-menu > li").first().children("a").addClass("a-hover a-active");
39			}
40		}
41
42		// 링크 섹션코드
43		var linkSecCode = "";
44
45		$("ul#user-menu li").each(function(idx, ele){
46
47			linkSecCode = $(ele).children("a").attr("data-code");	// 섹션코드
48
49			/******************************************************************
50			* note : add hover class
51			*
52			* [설명]
53			* 각 섹션 a 태그에 설정된 섹션 코드가 menubar.php > #user-nav에 설정된
54			* 섹션코드(mainSecCode / subSecCode / serialSecCode)에 포함되어 있다면 
55			* 해당 섹션이 1차이면 a-hover, a-active 클래스를 2차이면 a-sub-hover 클래스를 추가한다.
56			******************************************************************/
57			if([mainSecCode, subSecCode, serialSecCode, multiSecCode].indexOf(linkSecCode) >= 0){
58				if($(ele).hasClass("secline")) {		// 1ì°¨
59					$("ul#user-menu > li > a").removeClass("a-hover");		// 초기화
60					$(ele).children("a").addClass("a-hover a-active");
61				} else {	// 2ì°¨
62					$("ul#user-menu > li > ul > li > a").removeClass("a-sub-hover");		// 초기화
63					$(ele).children("a").addClass("a-sub-hover");
64					if($(ele).children("a").hasClass("a-sub-hover")){
65						$(ele).parent("ul").parent("li.secline").children("a").addClass("a-hover a-active");
66					}
67				}
68			}
69
70			/******************************************************************
71			* note : mouse hover event
72			*
73			* [설명 및 참고]
74			* 2차 메뉴를 show() / hide() 의 방식으로 처리하지 않은 이유는
75			* 2차 메뉴가 좌/우측 을 벗어날 경우 위치값 계산을 위해 처음 2차 섹션의 넓이를 가져와야 하는데,
76			* display : none 인 상태에선 넓이를 가져올 수 없기 때문에 visibility 스타일을 사용하였습니다.
77			* (visibility:visible -> hide() -> slideDown() / slideDown() 메소드는 display:none인 상태여야 동작하기 때문)
78			******************************************************************/
79			if($(ele).hasClass("secline")){
80				$(ele).hover(function(){		// mouse enter(over)
81
82					if(submenuStyle == "horizon") {	// horizon
83
84						$("ul#user-menu > li > a").removeClass("a-hover");			// 1차섹션 a-hover 초기화
85						$(ele).children("a").addClass("a-hover");						// 해당섹션(마우스오버) a-hover 추가
86
87						if(menuOverHold == true){		// 옵션값 menuOverHold 가 true 일때
88
89							$("ul#user-menu > li > ul").css("visibility", "hidden");		// 2차섹션 초기화
90
91							if($(ele).find("ul > li").length <= 0) return;						// 2차 섹션이 없으면 return
92							$("#user-nav").addClass("active");								// 2차 섹션 배경
93
94							if($(ele).children("ul").is(":animated") == false){				// 2차 섹션 동작하지 않을 때
95								if($(ele).children("a").hasClass("a-active")){				// 1차 섹션이 a-active 클래스를 가지고 있을 때
96
97									if(subShow == "hidden" || subShow == "page") {		// 2차 보기 옵션(subShow)이 hidden 또는 page 일 때
98
99										if(effectSwitch == "on") {	// 슬라이드 효과 on
100											$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);	// 2ì°¨
101										} else {	// 슬라이드 효과 off
102											$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
103										}
104
105									} else {		// 2차 보기 옵션(subShow)이 hold 일 때
106										$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
107									}
108
109								} else {	// 1차 섹션이 a-active 클래스를 가지고 있지 않을 때
110
111									if(effectSwitch == "on") {	// 슬라이드 효과 on
112										$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
113									} else {		// 슬라이드 효과 off
114										$(ele).children("ul").css("visibility", "visible");
115									}
116
117								}
118							}
119						} else {		// 옵션값 menuOverHold 가 false 일때
120
121							$("ul#user-menu > li").not($(ele)).children("ul").css({"visibility": "hidden"});	// 해당 섹션(마우스오버)을 제외한 2차 섹션 초기화
122
123							if($(ele).find("ul > li").length <= 0) return;			// 2차 섹션이 없으면 return
124							$("#user-nav").addClass("active");								// 2차 섹션 배경
125
126							if($(ele).children("ul").is(":animated") == false){			// 2차 섹션 동작하지 않을 때
127								if($(ele).children("ul").css("visibility") != "visible"){	// 해당 2차 섹션이 감춰져 있을 때
128
129									$("ul#user-menu > li > ul").css({"visibility": "hidden"});		// 2차 초기화
130									if(effectSwitch == "on") {	// 슬라이드 효과 on
131										$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
132									} else {		// 슬라이드 효과 off
133										$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
134									}
135								} else {		// 해당 2ì°¨ 섹션이 감춰져 있지 않을 때 (설정을 안해줄 시 같은 섹션에 마우스를 올릴 때마ë

135‹¤ 작동됨)
136									$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
137								}
138							}
139						}
140
141					} else {	// vertical
142
143						$("ul#user-menu > li > a").removeClass("a-hover");		// 1차 a-hover 초기화
144						$(ele).children("a").addClass("a-hover");	// 해당 섹션에 a-hover 추가
145
146						if($(ele).find("ul > li").length <= 0) return;			// 2차가 없으면 return
147						if($(ele).children("ul").is(":animated") == false){	// 2차 섹션 동작하지 않을 때
148							if(effectSwitch == "on") {	//	슬라이드 효과 on
149								$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
150							} else {		//	슬라이드 효과 off
151								$(ele).children("ul").css("visibility", "visible").show();	// 2ì°¨
152							}
153						}
154					}
155				}, function(){		// mouse leave(out)
156
157					// 옵션값 menuOverHold가 true일 때
158					if(menuOverHold == true) {
159						$("ul#user-menu > li > a").removeClass("a-hover");			// 초기화
160						$("ul#user-menu > li > a.a-active").addClass("a-hover");	// 현재페이지 섹션에 a-hover 클래스 추가
161					}
162					
163					if(submenuStyle == "horizon") {		// horizon
164
165						$("#user-nav").removeClass("active");		// 2차 섹션 배경
166
167						if(menuOverHold == true) {
168
169							$(ele).children("ul").css({"visibility": "hidden"});		// 2ì°¨
170
171							if(subShow == "hold") {		// 2차 메뉴가 고정일 때
172								if($(".a-active").next("ul").find("li").length <= 0) return;			// 현재페이지 섹션에 2차 섹션이 없을 때 return
173								$(".a-active").next("ul").css("visibility", "visible");			// 2ì°¨
174							} else if(subShow == "hidden") {	// 2차 메뉴가 고정이 아닐 때
175								$("ul#user-menu > li > ul").css({"visibility": "hidden"});		// 2ì°¨
176							} else if(subShow == "page") {		// 2차 메뉴가 메인을 제외한 나머지 페이지에서만 고정일 때
177								if(mainSecCode == "/index.html" || mainSecCode == "/index2.html" || mainSecCode == "/") {	// 메인화면 일 때
178									$(".a-active").next("ul").css({"visibility": "hidden"});		// 2ì°¨
179								} else {	// 메인화면이 아닐 때
180									$(".a-active").next("ul").css("visibility", "visible");		// 2ì°¨
181								}
182							}
183
184						} else {		// menuOverHold == false
185
186							if(subShow == "hold"){		// 2차 메뉴가 고정일 때
187								if($(ele).find("ul > li").length <= 0) return;		// 마우스가 벗아난 섹션에 2차 섹션이 없을 때 return
188								$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
189							} else if(subShow == "hidden") {		// 2차 메뉴가 고정이 아닐 때
190								$("ul#user-menu > li > ul").css({"visibility": "hidden"});		// 2ì°¨
191							} else if(subShow == "page") {		// 2차 메뉴가 메인을 제외한 나머지 페이지에서만 고정일 때
192								if(mainSecCode == "/index.html" || mainSecCode == "/index2.html" || mainSecCode == "/") {	// 메인화면 일 때
193									$("ul#user-menu > li > ul").css({"visibility": "hidden"});		// 2ì°¨
194								} else {	// 메인화면이 아닐 때
195									$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
196								}
197							}
198						}
199					} else {									// vertical
200						if(effectSwitch == "on") {	// 슬라이드 효과 on
201							$(ele).children("ul").fadeOut(subFadeSpeed);
202						} else {	// 슬라이드 효과 off
203							$(ele).children("ul").hide();
204						}
205					}
206				});
207				
208				// 웹접근성 focus - 1차
209				$(ele).children("a").focus(function(){
210					$("#user-nav").addClass("active");
211					$("ul#user-menu > li > a").removeClass("a-hover");
212					$("ul#user-menu > li > ul").css("visibility", "hidden");
213
214					$(ele).children("a").addClass("a-hover");
215					if($(ele).find("ul > li").length <= 0) return;
216
217					if($(ele).children("ul").css("display") != "block"){
218						if(effectSwitch=="on"){
219							$(ele).children("ul").css("visibility","visible").hide().slideDown(subSlideSpeed);
220						} else {
221							$(ele).children("ul").css("visibility","visible");
222						}
223					} else {
224						$(ele).children("ul").css("visibility","visible");
225					}
226				});
227
228				// 웹접근성 focus - 2차
229				$(ele).find("ul > li").each(function(idx2, ele2){
230					$(ele2).children("a").focus(function(){
231						$("li.sub > a").removeClass("a-sub-hover");
232						$(ele2).children("a").addClass("a-sub-hover");
233					});
234				});
235
236			}
237		});
238
239		// 웹접근성 blur (focus out)
240		$("ul#user-menu > li").last().children("ul").children("li").last().children("a").blur(function(e){
241			if(menuOverHold == true) {
242				$("#user-nav").removeClass("active");
243				$("ul#user-menu > li > a").removeClass("a-hover");
244				$("ul#user-menu > li > ul").css("visibility","hidden");
245				$("ul#user-menu > li > a.a-active").addClass("a-hover");
246				subShowFn();	// 2차 노출설정
247			} else {
248				subShowFn();	// 2차 노출설정
249			}
250		});
251
252
253		/******************************************************************
254		* note : 2차 섹션 위치값 적용
255		*
256		* [참고]
257		* 1. parseInt(A, 10) : 문자 타입(A)을 숫자(10진수) 타입으로 변경
258		* 2. A.width() : 선택한 요소(A)의 가로크기를 반환 (padding, border 제외)
259		* 3. A.outerWidth() : 선택한 요소(A)의 가로크기를 반환 (padding, border 포함)
260		* 4. A.position().left : 선택한 요소(A)의 left 위치값 반환.
261		* 5. Math.ceil(A) : A값 소수점 올림한 값을 반환.
262		* 6. A.getBoundingClientRect() : A에 대한 절대값 반환.(소수점 포함)
263		******************************************************************/
264		// 넓이구하기 (소수점 포함)
265		function getWidth(ele) {
266			var rect = $(ele)[0].getBoundingClientRect();
267			return rect.width;
268		}
269
270		$("ul#user-menu > li").each(function(){
271
272			var bodyWidth = $(window).outerWidth();													// 사이트 전체 넓이
273			var navWidth = $("#user-nav").width();														// user-nav 전체 넓이
274			var menuWidth = $("#user-menu").width();													// user-menu 전체 넓이
275			var modeInner = $(".mode-inner").width();													// 기준넓이
276			var allBtn = $(".user-menu").prev(".user-allbtn");											// 전체메뉴
277			var allBtnWidthCeil = (allBtn.length > 0) ? Math.ceil(getWidth(allBtn)) : 0;				// 전체메뉴 버튼 넓이 (소수점 올림)
278			var allBtnWidth = (allBtnWidthCeil%2 > 0) ? (allBtnWidthCeil + 1) : allBtnWidthCeil;	// 전체메뉴 버튼 넓이 (홀수면 + 1)
279			allBtn.css("width", allBtnWidth);																	// 전체메뉴 버튼 넓이 적용 (1차 섹션 위치값을 구하기 위해 넓이 적용)

280			var secWidthCeil = Math.ceil(getWidth($(this)));												// 1차 넓이 (소수점 올림)	
281			var secWidth = (secWidthCeil%2 > 0) ? (secWidthCeil + 1) : secWidthCeil;			// 1차 넓이 (홀수면 +1)
282			var secLeft = allBtnWidth + parseInt($(this).position().left, 10);							// 1차 위치값 (left)
283			var secRight = parseInt(modeInner - (secWidth + secLeft), 10);						// 1차 위치값 (right)
284			var subObj = ($(this).children("ul").length > 0) ? $(this).children("ul") : $(this);		// 2차 메뉴
285			var subWidthCeil = Math.ceil(getWidth(subObj));												// 2차 메뉴 넓이 (소수점 올림)
286			var subWidth = (subWidthCeil%2 > 0) ? (subWidthCeil + 1) : subWidthCeil;			// 2차 메뉴 넓이 (홀수면 +1)
287			var leftOverWidth = 0;																				// 2차 메뉴가 왼쪽 시작점을 넘어가는 값
288			var rightOverWidth = 0;																			// 2차 메뉴가 오른쪽 끝점을 넘어가는 값
289
290			/**********************************
291			각 섹션 넓이값 적용
292			**********************************/
293			$(this).css("width", secWidth);
294			if(submenuStyle == "vertical"){
295				subObj.css("min-width", secWidth);
296			} else {
297				subObj.css("min-width", subWidth);
298			}
299			
300			/**********************************
301			2차 섹션 위치값 적용
302			**********************************/
303			// 자동박스 노출을 설정한 경우 위치값 적용 x (vartical & $useAutobox = true)
304			if($("#header-wrapper").hasClass("vertical") && $("#header-wrapper").hasClass("nav-autobox")) return;
305
306			if(submenuPosi == "left") {	// 2차 위치 설정값이 left 일 때
307

308				rightOverWidth = parseInt(subWidth - (secWidth + secRight), 10); // 2차넓이 - (1차넓이 + right 위치값)
309
310				// 2차 섹션이 우측영역을 벗어날 경우
311				if(rightOverWidth > 0) {
312					$(this).children("ul").css({
313						"margin-left" : -(rightOverWidth)
314					});
315				}
316
317			} else if(submenuPosi == "center") {	// 2차 위치 설정값이 center 일 때
318
319				leftOverWidth = parseInt(((subWidth - secWidth) / 2) - secLeft, 10);		// ((2차넓이 - 1차넓이) 나누기 2) - left위치값
320				rightOverWidth = parseInt(((subWidth - secWidth) / 2) - secRight, 10);	// ((2차넓이 - 1차넓이) 나누기 2) - right위치값
321
322				if(leftOverWidth > 0) {				
323					// 2차 섹션이 좌측을 벗어날 경우
324					$(this).children("ul").css({
325						"margin-left" : leftOverWidth
326					});
327				} else if(rightOverWidth > 0) {
328					// 2차 섹션이 우측을 벗어날 경우
329					$(this).children("ul").css({
330						"margin-left" : -(rightOverWidth)
331					});
332				}
333
334			} else if(submenuPosi == "right") {	// 2차 위치 설정값이 right 일 때
335
336				leftOverWidth = parseInt(subWidth - (secWidth + secLeft), 10);		// 2차넓이 - (1차넓이 + left 위치값)
337
338				// 2차 섹션이 좌측을 벗어날 경우
339				if(leftOverWidth > 0) {
340					$(this).children("ul").css({
341						"margin-right" : -(leftOverWidth)
342					});
343				}
344			}
345
346		});
347
348		/******************************************************************
349		* note : 2차섹션 노출설정
350		*
351		* [설명 및 참고]
352		* - 메뉴스타일이 horizon일 때만 적용
353		* - slide효과를 제외한 visibility속성만 설정 (slide효과는 상단에서 마우스 오버 & 아웃 시에 구현하였습니다.)
354		******************************************************************/
355		$("ul#user-menu > li").each(function(){
356			subShowFn();
357		});
358		function subShowFn(){
359			if(submenuStyle == "horizon"){
360				if(subShow == "hold") {
361					if($(".a-active").next("ul").find("li").length <= 0) return;		// 현재페이지 1차 섹션에 2차 섹션이 없으면 return
362					$(".a-active").next("ul").css("visibility", "visible");			// 2차 섹션
363				} else if(subShow == "hidden") {
364					$(".a-active").next("ul").css("visibility", "hidden");
365				} else if(subShow == "page") {	
366					if(mainSecCode == "/index.html" || mainSecCode == "/index2.html" || mainSecCode == "/") { // index일 때
367						$(".a-active").next("ul").css("visibility", "hidden");
368					} else {	// index가 아닐 때
369						$(".a-active").next("ul").css("visibility", "visible");
370					}
371				}
372			}
373		}
374	
375	});
376
377})(jQuery);