https://cdn.fisheriesnews.co.kr/menuskin/pd_01/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				
81				$(ele).hover(function(){		// mouse enter(over)
82
83					if(submenuStyle == "horizon") {	// horizon
84
85						$("ul#user-menu > li > a").removeClass("a-hover");			// 1차섹션 a-hover 초기화
86						$(ele).children("a").addClass("a-hover");						// 해당섹션(마우스오버) a-hover 추가
87
88						if(menuOverHold == true){		// 옵션값 menuOverHold 가 true 일때
89
90							$("ul#user-menu > li > ul").css("visibility", "hidden");		// 2차섹션 초기화
91
92							if($(ele).find("ul > li").length <= 0) return;						// 2차 섹션이 없으면 return
93							$("#user-nav").addClass("active");								// 2차 섹션 배경
94
95							if($(ele).children("ul").is(":animated") == false){				// 2차 섹션 동작하지 않을 때
96								if($(ele).children("a").hasClass("a-active")){				// 1차 섹션이 a-active 클래스를 가지고 있을 때
97
98									if(subShow == "hidden" || subShow == "page") {		// 2차 보기 옵션(subShow)이 hidden 또는 page 일 때
99
100										if(effectSwitch == "on") {	// 슬라이드 효과 on
101											$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);	// 2ì°¨
102										} else {	// 슬라이드 효과 off
103											$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
104										}
105
106									} else {		// 2차 보기 옵션(subShow)이 hold 일 때
107										$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
108									}
109
110								} else {	// 1차 섹션이 a-active 클래스를 가지고 있지 않을 때
111
112									if(effectSwitch == "on") {	// 슬라이드 효과 on
113										$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
114									} else {		// 슬라이드 효과 off
115										$(ele).children("ul").css("visibility", "visible");
116									}
117
118								}
119							}
120						} else {		// 옵션값 menuOverHold 가 false 일때
121
122							$("ul#user-menu > li").not($(ele)).children("ul").css({"visibility": "hidden"});	// 해당 섹션(마우스오버)을 제외한 2차 섹션 초기화
123
124							if($(ele).find("ul > li").length <= 0) return;			// 2차 섹션이 없으면 return
125							$("#user-nav").addClass("active");								// 2차 섹션 배경
126
127							if($(ele).children("ul").is(":animated") == false){			// 2차 섹션 동작하지 않을 때
128								if($(ele).children("ul").css("visibility") != "visible"){	// 해당 2차 섹션이 감춰져 있을 때
129
130									$("ul#user-menu > li > ul").css({"visibility": "hidden"});		// 2차 초기화
131									if(effectSwitch == "on") {	// 슬라이드 효과 on
132										$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
133									} else {		// 슬라이드 효과 off
134										$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
135									}
136								} else {		// 해당 2ì°¨ 섹션이 감춰져 있지 않을 때 (설정을 안해줄 시 같은 섹션에 마우스를 올릴 때마ë

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

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

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