https://cdn.smedaily.co.kr/menuskin/s_53/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	$(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					$("ul#user-menu > li > a").removeClass("a-hover");
211					$("ul#user-menu > li > ul").css("visibility", "hidden");
212
213					$(ele).children("a").addClass("a-hover");
214					if($(ele).find("ul > li").length <= 0) return;
215
216					if($(ele).children("ul").css("display") != "block"){
217						if(effectSwitch=="on"){
218							$(ele).children("ul").css("visibility","visible").hide().slideDown(subSlideSpeed);
219						} else {
220							$(ele).children("ul").css("visibility","visible");
221						}
222					} else {
223						$(ele).children("ul").css("visibility","visible");
224					}
225				});
226
227				// 웹접근성 focus - 2차
228				$(ele).find("ul > li").each(function(idx2, ele2){
229					$(ele2).children("a").focus(function(){
230						$("li.sub > a").removeClass("a-sub-hover");
231						$(ele2).children("a").addClass("a-sub-hover");
232					});
233				});
234
235			}
236		});
237
238		// 웹접근성 blur (focus out)
239		$("ul#user-menu > li").last().children("ul").children("li").last().children("a").blur(function(e){
240			if(menuOverHold == true) {
241				$("ul#user-menu > li > a").removeClass("a-hover");
242				$("ul#user-menu > li > ul").css("visibility","hidden");
243				$("ul#user-menu > li > a.a-active").addClass("a-hover");
244				subShowFn();	// 2차 노출설정
245			} else {
246				subShowFn();	// 2차 노출설정
247			}
248		});
249
250
251		/******************************************************************
252		* note : 2차 섹션 위치값 적용
253		*
254		* [참고]
255		* 1. parseInt(A, 10) : 문자 타입(A)을 숫자(10진수) 타입으로 변경
256		* 2. A.width() : 선택한 요소(A)의 가로크기를 반환 (padding, border 제외)
257		* 3. A.outerWidth() : 선택한 요소(A)의 가로크기를 반환 (padding, border 포함)
258		* 4. A.position().left : 선택한 요소(A)의 left 위치값 반환.
259		* 5. Math.ceil(A) : A값 소수점 올림한 값을 반환.
260		* 6. A.getBoundingClientRect() : A에 대한 절대값 반환.(소수점 포함)
261		******************************************************************/
262		// 넓이구하기 (소수점 포함)
263		function getWidth(ele) {
264			var rect = $(ele)[0].getBoundingClientRect();
265			return rect.width;
266		}
267
268		$("ul#user-menu > li").each(function(){
269
270			var bodyWidth = $(window).outerWidth();													// 사이트 전체 넓이
271			var navWidth = $("#user-nav").width();														// user-nav 전체 넓이
272			var menuWidth = $("#user-menu").width();													// user-menu 전체 넓이
273			var modeInner = $(".mode-inner").width();													// 기준넓이
274			var allBtn = $(".user-menu").prev(".user-allbtn");											// 전체메뉴
275			var allBtnWidthCeil = (allBtn.length > 0) ? Math.ceil(getWidth(allBtn)) : 0;				// 전체메뉴 버튼 넓이 (소수점 올림)
276			var allBtnWidth = (allBtnWidthCeil%2 > 0) ? (allBtnWidthCeil + 1) : allBtnWidthCeil;	// 전체메뉴 버튼 넓이 (홀수면 + 1)
277			allBtn.css("width", allBtnWidth);																	// 전체메뉴 버튼 넓이 적용 (1차 섹션 위치값을 구하기 위해 넓이 적용)

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

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