https://spsamhwa.com/app/themes/sknk/src/js/common/navigation.js?ver=1791588684

1
2
3//**상단 메뉴 부분***********************************************************************************************************
4let localMenuNum = -1//페이지 활성화 메뉴번호
5let localsubMenuNum = -1//페이지 활성화 메뉴번호
6returnActiveMenuNum();//메뉴 활성화
7
8let topMenuNum = localMenuNum//상단 메뉴 번호
9let beforeTopMenuNum = localMenuNum //상단 이전 메뉴
10let topSubMenuNum = localsubMenuNum //상단 서브메뉴
11let checkTm = null;
12
13
14//상단 1뎁스 메뉴 오버
15function depthOneOverHandler(){
16	if(checkTm){
17		checkTm.kill();
18	}
19	$("#pc_header").addClass('sub_on');
20	if($(this).hasClass("gnb_sub_bg")){//서브 BG에 오버시
21		topMenuNum = beforeTopMenuNum;
22	}else{
23		
24		if(topMenuNum != $(this).index()){
25			topSubMenuNum =-1
26		}
27		topMenuNum = $(this).index();
28		beforeTopMenuNum = topMenuNum
29	}
30	settimgTopOneMenu()
31
32}
33//상단 1뎁스 메뉴 아웃
34function depthOneOutHandler(){	
35	topMenuNum = localMenuNum
36	topSubMenuNum = localsubMenuNum
37	if(topMenuNum === -1){
38		$("#pc_header").removeClass('sub_on');
39	}else{
40		checkTm = TweenMax.to($("body"),0.1,{onComplete:function(){
41			if($(window).scrollTop() === 0 && localMenuNum !== -1){
42				$(".gnb_sub_bg").css("box-shadow","none");
43				TweenMax.to($(".gnb_sub_bg"),0,{height:0, ease:Expo.easeOut});
44				TweenMax.to($(".sub_item_on"),0,{height:0, autoAlpha:0, ease:Expo.easeOut});
45			}
46		}, ease:Circ.easeOut});
47	}
48	settimgTopOneMenu()
49}
50
51//상단 메뉴 셋팅
52function settimgTopOneMenu(){
53	$("#pc_header .gnb_list>li").each(function(){
54		if($(this).index() == topMenuNum){
55			let wNum = 0
56			if($(window).width()>1600){
57				wNum = Math.round(($(this).width()-86)/$(this).width()*100)
58			}else{
59				wNum = Math.round(($(this).width())/$(this).width()*100)
60			}
61			$(this).find(".gnb_line").css("left",(100-wNum)/2+"%").css("right",(100-wNum)/2+"%")
62			$(this).addClass('on')
63			$(this).find('ul').addClass("sub_item_on")
64			$(".gnb_sub_bg").css("box-shadow","0 1px 0 0 rgba(0, 0, 0, 0.1)");
65			TweenMax.to($(".gnb_sub_bg"),0,{height:73,y:94, ease:Expo.easeOut});
66			TweenMax.to($(".sub_item_on"),0,{height:72, autoAlpha:1, ease:Expo.easeOut});
67		}else{
68			$(this).removeClass('on')
69			$(this).find(".gnb_line").css("left",'51%').css("right",'51%')
70			$(this).find('ul').removeClass("sub_item_on")
71			TweenMax.to($(this).find('ul'),0,{height:0, autoAlpha:0, ease:Expo.easeOut});
72		}
73	})
74	topSubMenusetting()
75}
76
77//상단 2뎁스 메뉴 오버
78function depthTwoOverHandler(){
79	topSubMenuNum = $(this).index()
80	topSubMenusetting()
81}
82//상단 2뎁스 메뉴 아웃
83function depthTwoOutHandler(){
84	if(topMenuNum == localMenuNum){
85		topSubMenuNum = localsubMenuNum
86	}else{
87		topSubMenuNum = -1
88	}
89	topSubMenusetting()
90}
91
92function topSubMenusetting(){
93	$("#pc_header .gnb_list>li .sub_item_on li").each(function(){
94		if($(this).index() == topSubMenuNum){
95			$(this).addClass('on')
96		}else if(topSubMenuNum == -1){
97			$(this).addClass('on')
98		}else{
99			$(this).removeClass('on')
100		}
101	});
102}
103
104let beforeSctop = 0;
105let scrollMoveDis = true
106let naviWhellTm = null;
107function checkNaviScrollListener(){
108	if($(window).width()>1440){
109		$('#pc_header .inner').css("margin-left","0px")
110	}else{
111		let _leftNum = -$(window).scrollLeft()
112		$('#pc_header .inner').css("margin-left",_leftNum+"px")
113	}
114	if(localMenuNum === -1) return;
115	winH = top.window.innerHeight
116	scTop = $(window).scrollTop();
117	if(scTop <= 0){
118		let popupDisplay = 0
119		$('.pop_wrap').each(function(){
120			if($(this).css("display") =="block"){
121				popupDisplay = 1
122			}
123		})
124		if(popupDisplay == 0){
125			$(".gnb_sub_bg").css("box-shadow","none");
126			TweenMax.to($(".gnb_sub_bg"),0.3,{height:0, ease:Expo.easeOut});
127			TweenMax.to($(".sub_item_on"),0.3,{height:0, autoAlpha:0, ease:Expo.easeOut});
128		}
129	}else{
130		//TweenMax.to($(".gnb_sub_bg"),0.2,{height:73, ease:Expo.easeOut});
131		TweenMax.to($(".sub_item_on"),0.2,{height:72, autoAlpha:1, ease:Expo.easeOut});
132		//console.log(beforeSctop,scTop,scrollMoveDis,naviWhellTm)
133		if(beforeSctop>scTop){
134			if(!scrollMoveDis){
135				if(naviWhellTm){
136					naviWhellTm.kill();
137				}
138				$(".gnb_sub_bg").css("box-shadow","0 1px 0 0 rgba(0, 0, 0, 0.1)");
139				TweenMax.to($(".gnb_sub_bg"),0.2,{height:73,y:94, ease:Expo.easeOut});
140				naviWhellTm = TweenMax.to($("#pc_header"),0.3,{y:0, ease:Circ.easeOut,onComplete:function(){
141					$("#pc_header").css('transform','none')
142				}});
143				scrollMoveDis = true;
144			}
145		}else if(beforeSctop<scTop){
146			if(scrollMoveDis){
147				if(naviWhellTm){
148					naviWhellTm.kill();
149				}
150				$(".gnb_sub_bg").css("box-shadow","0 1px 0 0 rgba(0, 0, 0, 0.1)");
151				TweenMax.to($(".gnb_sub_bg"),0.2,{height:73,y:91, ease:Expo.easeOut});
152				if($('body').hasClass('topBannerActive')){
153					let _bh = Number($(".top_banner").height())
154					naviWhellTm = TweenMax.to($("#pc_header"),0.3,{y:-(_bh+95), ease:Circ.easeOut});
155				}else{
156					naviWhellTm = TweenMax.to($("#pc_header"),0.3,{y:-95, ease:Circ.easeOut});
157				}
158				scrollMoveDis = false;

159			}
160		}
161	}
162	beforeSctop = scTop;
163}
164
165//**전체 메뉴 부분***********************************************************************************************************
166let detailMenuNum = -1 //전체 메뉴 부분 1뎁스 오버번호
167let detailSubMenuNum = -1 //전체 메뉴 부분 2뎁스 오버번호
168let detaildepth3 = -1 //전체 메뉴 부분 3뎁스 오버번호
169//상단 전체 메뉴 오픈
170function fullMenuOpenHander(){
171	if ($("body").hasClass('gnb_open')) {
172		$("body").removeClass('gnb_open');
173		TweenMax.to($("#pc_header"),0.5,{autoAlpha:1, ease:Expo.easeOut});
174		$('#pc_header .gnb_menu').find('span').text('전체메뉴열기');
175	} else {
176		$("body").addClass('gnb_open');
177		$('#pc_header .gnb_menu').find('span').text('전체메뉴닫기');
178	}
179}
180//1뎁스 메뉴 오버
181function detailMenuOneOverHandler(){
182	detailMenuNum = $(this).parent().parent().index();
183	$("#gnb_detail .gnb_detail_bg").attr("class","gnb_detail_bg "+"bg_"+(detailMenuNum+1))
184	TweenMax.to($("#gnb_detail .gnb_detail_bg"),0,{autoAlpha:0, ease:Cubic.easeOut});
185	TweenMax.to($("#gnb_detail .gnb_detail_bg"),0.7,{autoAlpha:1, ease:Cubic.easeOut});
186	activeDetailMenuSetting();
187	settingDetailTwoMenuSetting();
188}
189//1뎁스 메뉴 아웃
190function detailMenuOneOutHandler(){
191	detailMenuNum = -1;
192	TweenMax.to($("#gnb_detail .gnb_detail_bg"),0.5,{autoAlpha:0, ease:Cubic.easeOut});
193	activeDetailMenuSetting();
194	settingDetailTwoMenuSetting();
195}
196//1뎁스 메뉴 오버 설정
197function activeDetailMenuSetting(){
198	$("#gnb_detail .gnb_detail_wrap>li").each(function(){
199		if(detailMenuNum == $(this).index()){
200			$('.gnb_menu').addClass('white_ver');
201			$(this).addClass('hover');
202			$(this).find(".gnb_2_depth_wrap").addClass('hover');
203			TweenMax.to($(this).find(">a>strong>i"),0.5,{alpha:1, left:0, ease:Cubic.easeOut});
204			TweenMax.to($(this),0.5,{autoAlpha:1, ease:Cubic.easeOut});
205			detailSubMenuNum = -1;
206			activeDetailTwoMenuSetting();
207		}else if(detailMenuNum == -1){
208			$('.gnb_menu').removeClass('white_ver');
209			$(this).removeClass('hover');
210			$(this).find(".gnb_2_depth_wrap").removeClass('hover');
211			TweenMax.to($(this).find(">a>strong>i"),0.5,{alpha:0, left:15, ease:Cubic.easeOut});
212			TweenMax.to($(this),0.7,{autoAlpha:1, ease:Cubic.easeOut});
213		}else{
214			$(this).removeClass('hover')
215			$(this).find(".gnb_2_depth_wrap").removeClass('hover');
216			TweenMax.to($(this).find(">a>strong>i"),0.5,{alpha:0, left:15, ease:Cubic.easeOut});
217			TweenMax.to($(this),0.9,{autoAlpha:0.3, ease:Cubic.easeOut});
218		}
219		
220	})
221}
222//2뎁스 메뉴 셋팅
223function settingDetailTwoMenuSetting(){
224	$("#gnb_detail .gnb_detail_wrap>li").each(function(){
225		if(detailMenuNum == $(this).index()){
226			$(this).find(".gnb_2_depth_wrap>li").each(function(){
227				TweenMax.to($(this).find(">a"),0.9,{delay:$(this).index()*0.05, autoAlpha:1, left:0, ease:Cubic.easeOut});
228			})
229		}else if(detailMenuNum == -1){
230			$(this).find(".gnb_2_depth_wrap>li").each(function(){
231				TweenMax.to($(this).find(">a"),0.3,{delay:$(this).index()*0.05, autoAlpha:0, left:50, ease:Cubic.easeOut});
232			})
233		}else{
234			$(this).find(".gnb_2_depth_wrap>li").each(function(){
235				TweenMax.to($(this).find(">a"),0.9,{delay:$(this).index()*0.05, autoAlpha:0, left:50, ease:Cubic.easeOut});
236			})
237		}
238	})
239} 
240//2뎁스 메뉴 오버
241function detailMenuTwoOverHandler(){
242	detailSubMenuNum = $(this).parent().index();
243	activeDetailTwoMenuSetting();
244	settingDetailThreeMenuSetting();
245}
246//2뎁스 메뉴 오버 셋팅
247function activeDetailTwoMenuSetting(){
248	$("#gnb_detail .gnb_detail_wrap>li.hover .gnb_2_depth_wrap.hover>li").each(function(){
249		if(detailSubMenuNum == $(this).index()){
250			$(this).addClass('hover');
251			$(this).find(".gnb_3_depth").addClass('hover');
252			TweenMax.to($(this),0.5,{autoAlpha:1, ease:Cubic.easeOut});
253		}else if(detailSubMenuNum == -1){
254			$(this).removeClass('hover');
255			$(this).find(".gnb_3_depth").removeClass('hover');
256			TweenMax.to($(this),0.7,{autoAlpha:1, ease:Cubic.easeOut});
257		}else{
258			$(this).removeClass('hover');
259			$(this).find(".gnb_3_depth").removeClass('hover');
260			TweenMax.to($(this),0.9,{autoAlpha:0.3, ease:Cubic.easeOut});
261		}
262	})
263}
264//3뎁스 메뉴 셋팅
265function settingDetailThreeMenuSetting(){
266	$("#gnb_detail .gnb_detail_wrap>li.hover .gnb_2_depth_wrap.hover>li").each(function(){

267		if(detailSubMenuNum == $(this).index()){
268			$(this).find(".gnb_3_depth>li").each(function(){
269				TweenMax.to($(this).find(">a"),0.9,{delay:$(this).index()*0.05, autoAlpha:1, left:0, ease:Cubic.easeOut});
270			})
271		}else if(detailSubMenuNum == -1){
272			$(this).find(".gnb_3_depth>li").each(function(){
273				TweenMax.to($(this).find(">a"),0.3,{delay:$(this).index()*0.05, autoAlpha:0, left:50, ease:Cubic.easeOut});
274			})
275		}else{
276			$(this).find(".gnb_3_depth>li").each(function(){
277				TweenMax.to($(this).find(">a"),0.9,{delay:$(this).index()*0.05, autoAlpha:0, left:50, ease:Cubic.easeOut});
278			})
279		}
280	});
281}
282//3뎁스 오버
283function detailMenuThreeOverHandler(){
284	detaildepth3 = $(this).index();
285	detailMenuThreeSetting()
286}
287//3뎁스 아웃
288function detailMenuThreeOutHandler(){
289	detaildepth3 = -1;
290	detailMenuThreeSetting()
291}
292	//3뎁스 오버 셋팅
293function detailMenuThreeSetting(){
294	$(".gnb_3_depth.hover li").each(function(){
295		if(detaildepth3 == $(this).index()){
296			TweenMax.to($(this),0.7,{autoAlpha:1, ease:Cubic.easeOut});
297		}else if(detaildepth3 == -1){
298			TweenMax.to($(this),0.3,{autoAlpha:1, ease:Cubic.easeOut});
299		}else{
300			TweenMax.to($(this),0.5,{autoAlpha:0.3, ease:Cubic.easeOut});
301		}
302	})
303}
304
305$(document).ready(function(){
306	if(getCookie('topPopupBanner')) {
307		$('#topBanner').css('display', 'none');
308		$('body').removeClass('topBannerActive')
309	}
310
311	TweenMax.to($(".gnb_sub_bg"),0,{y:94, ease:Expo.easeOut});
312	/**********상단 메뉴***********************/
313	$("#pc_header .gnb_list>li").bind("mouseenter",depthOneOverHandler)
314	$("#pc_header .gnb_list>li").bind("mouseleave",depthOneOutHandler)
315	
316	$("#gnb .gnb_list .sub li").bind("mouseenter",depthTwoOverHandler)
317	$("#gnb .gnb_list .sub li").bind("mouseleave",depthTwoOutHandler)
318
319	$('#pc_header .gnb_menu').bind("click", fullMenuOpenHander)
320	/***********전체 메뉴****************************/
321	$("#gnb_detail .gnb_detail_wrap>li>a>strong").bind("mouseenter",detailMenuOneOverHandler)
322	$("#gnb_detail .gnb_detail_wrap>li .gnb_2_depth_wrap>li>a").bind("mouseenter",detailMenuTwoOverHandler)
323	$("#gnb_detail .gnb_detail_wrap>li .gnb_3_depth>li").bind("mouseenter",detailMenuThreeOverHandler)
324	$("#gnb_detail .gnb_detail_wrap>li .gnb_3_depth>li").bind("mouseleave",detailMenuThreeOutHandler)
325	$("#gnb_detail .gnb_detail_wrap").bind("mouseleave",detailMenuOneOutHandler)
326	/***********초기 셋팅****************************/
327	if(topMenuNum != -1){
328		settimgTopOneMenu()
329		topSubMenusetting()
330		$("#pc_header").addClass('sub_on');
331	}
332	/***********스크롤에 따른 상단 셋팅****************************/
333	$(document,window).bind("scroll",checkNaviScrollListener)
334	//checkNaviScrollListener();
335	//탑배너
336	$(document).on("click",'#topBanner .topBanner_close', topPopupHideListener);
337	
338	// 메뉴선택시 목록 검색어 sessionStorage 삭제
339	$('#gnb,#tabUl a').click(function(){
340    	sessionStorage.clear();
341    });
342});
343
344function topPopupHideListener(){

345	if($("#topBanner input").prop("checked")){
346		setCookieAt00( 'topPopupBanner', 'Y' , 1);
347	}
348	$("body").removeClass('topBannerActive');
349	$(".gnb_right").css("top","36px");
350	$(".gnb_menu").css("top","30px");
351	$(".visual_bg_slider").css("top","0px");
352	$(".gnb_sub_bg").css("top","0px");
353}