PageSourceSearch
Opt out API access

https://www.nbntv.kr/menuskin/pd_02/menubar.js

js nbntv.kr collected 2026-10-02 19:05:17 UTC 17,277 bytes, 374 lines download raw bytes 

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
34		// index 일때 첫번째 섹션에 a-hover (menuIndexHold 가 true일 때)
35		if(menuIndexHold == true) {
36			if(mainSecCode.indexOf("index") == 1 || mainSecCode == "/" || mainSecCode == "/news/articleList.html" || mainSecCode == "/edit/webPublishing.php") {
37				$("ul#user-menu > li").first().children("a").addClass("a-hover a-active");
38			}
39		}
40
41		// 링크 섹션코드
42		var linkSecCode = "";
43
44		$("ul#user-menu li").each(function(idx, ele){
45
46			linkSecCode = $(ele).children("a").attr("data-code");	// 섹션코드
47
48			/******************************************************************
49			* note : add hover class
50			*
51			* [설명]
52			* 각 섹션 a 태그에 설정된 섹션 코드가 menubar.php > #user-nav에 설정된
53			* 섹션코드(mainSecCode / subSecCode / serialSecCode)에 포함되어 있다면 
54			* 해당 섹션이 1차이면 a-hover, a-active 클래스를 2차이면 a-sub-hover 클래스를 추가한다.
55			******************************************************************/
56			if([mainSecCode, subSecCode, serialSecCode].indexOf(linkSecCode) >= 0){
57				if($(ele).hasClass("secline")) {		// 1ì°¨
58					$("ul#user-menu > li > a").removeClass("a-hover");		// 초기화
59					$(ele).children("a").addClass("a-hover a-active");
60				} else {	// 2ì°¨
61					$("ul#user-menu > li > ul > li > a").removeClass("a-sub-hover");		// 초기화
62					$(ele).children("a").addClass("a-sub-hover");
63					if($(ele).children("a").hasClass("a-sub-hover")){
64						$(ele).parent("ul").parent("li.secline").children("a").addClass("a-hover a-active");
65					}
66				}
67			}
68
69			/******************************************************************
70			* note : mouse hover event
71			*
72			* [설명 및 참고]
73			* 2차 메뉴를 show() / hide() 의 방식으로 처리하지 않은 이유는
74			* 2차 메뉴가 좌/우측 을 벗어날 경우 위치값 계산을 위해 처음 2차 섹션의 넓이를 가져와야 하는데,
75			* display : none 인 상태에선 넓이를 가져올 수 없기 때문에 visibility 스타일을 사용하였습니다.
76			* (visibility:visible -> hide() -> slideDown() / slideDown() 메소드는 display:none인 상태여야 동작하기 때문)
77			******************************************************************/
78			if($(ele).hasClass("secline")){
79				$(ele).hover(function(){		// mouse enter(over)
80
81					if(submenuStyle == "horizon") {	// horizon
82
83						$("ul#user-menu > li > a").removeClass("a-hover");			// 1차섹션 a-hover 초기화
84						$(ele).children("a").addClass("a-hover");						// 해당섹션(마우스오버) a-hover 추가
85
86						if(menuOverHold == true){		// 옵션값 menuOverHold 가 true 일때
87
88							$("ul#user-menu > li > ul").css("visibility", "hidden");		// 2차섹션 초기화
89
90							if($(ele).find("ul > li").length <= 0) return;						// 2차 섹션이 없으면 return
91							$("#user-nav").addClass("active");								// 2차 섹션 배경
92
93							if($(ele).children("ul").is(":animated") == false){				// 2차 섹션 동작하지 않을 때
94								if($(ele).children("a").hasClass("a-active")){				// 1차 섹션이 a-active 클래스를 가지고 있을 때
95
96									if(subShow == "hidden" || subShow == "page") {		// 2차 보기 옵션(subShow)이 hidden 또는 page 일 때
97
98										if(effectSwitch == "on") {	// 슬라이드 효과 on
99											$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);	// 2ì°¨
100										} else {	// 슬라이드 효과 off
101											$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
102										}
103
104									} else {		// 2차 보기 옵션(subShow)이 hold 일 때
105										$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
106									}
107
108								} else {	// 1차 섹션이 a-active 클래스를 가지고 있지 않을 때
109
110									if(effectSwitch == "on") {	// 슬라이드 효과 on
111										$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
112									} else {		// 슬라이드 효과 off
113										$(ele).children("ul").css("visibility", "visible");
114									}
115
116								}
117							}
118						} else {		// 옵션값 menuOverHold 가 false 일때
119
120							$("ul#user-menu > li").not($(ele)).children("ul").css({"visibility": "hidden"});	// 해당 섹션(마우스오버)을 제외한 2차 섹션 초기화
121
122							if($(ele).find("ul > li").length <= 0) return;			// 2차 섹션이 없으면 return
123							$("#user-nav").addClass("active");								// 2차 섹션 배경
124
125							if($(ele).children("ul").is(":animated") == false){			// 2차 섹션 동작하지 않을 때
126								if($(ele).children("ul").css("visibility") != "visible"){	// 해당 2차 섹션이 감춰져 있을 때
127
128									$("ul#user-menu > li > ul").css({"visibility": "hidden"});		// 2차 초기화
129									if(effectSwitch == "on") {	// 슬라이드 효과 on
130										$(ele).children("ul").css("visibility", "visible").hide().slideDown(subSlideSpeed);		// 2ì°¨
131									} else {		// 슬라이드 효과 off
132										$(ele).children("ul").css("visibility", "visible");	// 2ì°¨
133									}
134								} else {		// 해당 2ì°¨ 섹션이 감춰져 있지 않을 때 (설정을 안해줄 시 같은 섹션에 마우스를 올릴 때마ë

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

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

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

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.