https://www.smu.ac.kr/_res/kor/_js/user/m_mn.js

1$(document).ready(function () {	
2	//----------------------------------
3	//실행 오브젝트 목록
4	//----------------------------------
5	App.mGnb.init({
6		mGnbType: 'depthOnSide', //모바일메뉴 유형 allDepthVertical, depthOnSide, depthOnSideFixed
7		//mGnbWrap: '.slideMenu', //<nav>의 클래스
8		//mGnbBox: '.m-gnb', //gnb mobile ul을 감싸는 div의 클래스
9		//openGnb: 'on', //gnb 오픈 시 <nav>에 붙는 클래스
10		//depth1: 'dep1', //gnb 1뎁스 ul의 클래스
11		//depth2: 'dep2', //gnb 2뎁스 ul의 클래스
12		//depth3: 'dep3', //gnb 3뎁스 ul의 클래스
13		mBtnOpen: '.btn-m-menu', //모바일 gnb를 열림 버튼
14		//mBtnClose: '.slide-close', //모바일 gnb 닫기 버튼	
15		//mGnbBg: '.m-gnb-bg', //모바일 gnb 배경 클래스
16		//mUtil: '.m-util', //모바일 gnb내 utility 영역(예: home, login, sitemap 등)
17		//setCurrent: 'current', //현재 페이지 표시할 클래스
18		//setActive: 'active', //메뉴 열릴 시 표시할 클래스
19		//setCollapse: 'has-dep', //하위 메뉴가 있을 시 메뉴에 붙는 클래스
20		//setFixed: 'all-fixed', //gnb 오픈 시 body에 붙는 클래스(배경 스크롤 막기 위한 클래스)
21		//mGnbWidth: '100%', //모바일메뉴 폭
22		mGnbDirection: 'left', //모바일메뉴 슬라이드 디렉션 왼쪽에서 시작하면 left, 오른쪽에서 시작하면 right
23		activateLater: function() {
24			// User-defined functions
25			$('.btn-m-menu').on('click', function() {
26				if($('body').hasClass('srch-open')){
27					$('.srch-wrap').removeClass('on');
28					$('body').removeClass('srch-open');
29				}
30			});
31		},
32	});
33});
34//======================================================================
35//mobile Gnb
36//======================================================================
37App.mGnb = function () {
38	var self;
39	var settings;
40	var $mGnbType, $mGnbWrap, $mGnbBox, openGnb, depth1, depth2, depth3, $mBtnOpen, $mBtnClose, $mGnbBg, $mUtil, setCurrent, setActive, setCollapse, setFixed, hideClass;
41	var $mGnbWidth, $mGnbDirection;
42	return {
43		init: function(opt) {
44			self = this;
45			// 기본 옵션 정의
46			settings = $.extend({
47				mGnbWrap: '.slideMenu',
48				mGnbBox: '.m-gnb',
49				openGnb: 'on',
50				depth1: 'dep1',
51				depth2: 'dep2',
52				depth3: 'dep3',
53				mBtnOpen: '.btn-menu',
54				mBtnClose: '.slide-close',	
55				mGnbBg: '.m-gnb-bg',
56				mUtil: '.m-util',
57				setCurrent: 'current',
58				setActive: 'active',
59				setCollapse: 'has-dep',
60				setFixed: 'all-fixed',
61				hideClass: 'gnb-hide',
62				mGnbWidth: '100%', //모바일메뉴 폭
63				mGnbDirection: 'right', //모바일메뉴 슬라이드 디렉션 왼쪽에서 시작하면 left, 오른쪽에서 시작하면 right			
64			}, opt);
65
66			$mGnbType = settings.mGnbType;
67			$mGnbWrap = $(settings.mGnbWrap);
68			$mGnbBox = $(settings.mGnbBox);
69			openGnb = settings.openGnb;
70			depth1 = settings.depth1;
71			depth2 = settings.depth2;
72			depth3 = settings.depth3;
73			$mBtnOpen = $(settings.mBtnOpen);
74			$mBtnClose = $(settings.mBtnClose);	
75			$mGnbBg = $(settings.mGnbBg);
76			$mUtil = $(settings.mUtil);
77			setCurrent = settings.setCurrent;
78			setActive = settings.setActive;
79			setCollapse = settings.setCollapse;
80			setFixed = settings.setFixed;
81			hideClass = settings.hideClass;
82			$mGnbWidth = settings.mGnbWidth;
83			$mGnbDirection = settings.mGnbDirection;
84
85			$('body').addClass($mGnbType); //body에 타입 클래스 추가
86
87			self.mGnbSet(opt); //모바일메뉴 기본 setting
88
89			$mBtnOpen.click(function(e) { //모바일메뉴 열기 버튼 클릭 시
90				e.preventDefault(); 
91				self.slideMenuOpen(opt); //모바일메뉴 열기
92			});
93
94			$mBtnClose.click(function (e) {  //모바일메뉴 닫기 버튼 클릭 시
95				e.preventDefault();
96				self.slideMenuClose(opt); //모바일메뉴 닫기
97			});
98			
99			//게시판 사이트 내  common.js에 적용된 소스와 중복되어 주석처리 (2023.07.31)
100			/*self.mGnbDepthToggle(opt); //하위뎁스별 슬라이드 토글*/
101			
102
103			//$mGnbWrap.css({'width': $mGnbWidth}); //모바일메뉴 폭
104			$mGnbWrap.addClass($mGnbDirection); //모바일메뉴 슬라이드 디렉션
105
106			if(opt.activateLater) { //사용자 정의 함수 실행
107				opt.activateLater();
108			}
109		},
110		mGnbSet: function(opt) { //모바일메뉴 기본 setting
111			//1뎁스 메뉴에 hide 클래스로 숨김처리 된 메뉴를 자식요소도 숨김하도록 리스트 삭제
112			$mGnbBox.find('.' + depth1 + ' > li').each(function() {
113				if($(this).find('.' + hideClass).length > 0) {
114					$(this).remove();
115				}
116			});
117			//자식요소가 있는 리스트에 has-dep이라는 클래스 추가
118			$mGnbBox.find('ul').each(function() {
119				$(this).parent('li').addClass(setCollapse);
120			});
121			

122			// 현재 페이지 활성화 메뉴 표시 기능이 중복되어 주석처리 (2023.07.31)
123			/*$mGnbBox.find('a').each(function() {
124				//var menuCd = 'mobile-menu-' + CMS.menuCd;
125				var menuCd = 'mobile-menu-' + _thisHost._cur_menu_cd;
126				if($(this).attr('id') === menuCd) $(this).parent('li').addClass(setCurrent);
127			});*/
128			
129			//현재 페이지 상위 메뉴 오픈
130			$mGnbBox.find('.' + setActive).parentsUntil($mGnbWrap, 'li').addClass(setActive);
131			$mGnbBox.find('li.' + setActive + ' > ul').each(function() {
132				$(this).show();
133			});
134		},
135		slideMenuOpen: function(opt) { //모바일메뉴 열기
136			//열기/닫기 
137			$mGnbWrap.addClass(openGnb);
138			$mGnbBg.show();
139			$mBtnClose.show();
140			$('html, body').addClass(setFixed);
141
142			if($mGnbType == 'depthOnSide' && $('body').hasClass('main') || $mGnbType == 'depthOnSideFixed' && $('body').hasClass('main')) { //모바일메뉴가 1depthOnSide, 1depthOnSideFixed일 때
143				$('.' + depth1 + ' > li:first-of-type > a').trigger('click');
144			} 
145			$mGnbBox.find('li.' + setActive + ' > ul').each(function() { // 모바일 메뉴 2뎁스 노출 : pc -> mobile 리사이즈 대응
146				$(this).show();
147			});
148			if($mGnbType == 'depthOnSideFixed') { //모바일메뉴가 depthOnSideFixed일 때
149				self.setHeight(opt);
150			}
151			$(window).resize(function(){
152				if($(window).width() > 1024){
153					$mGnbWrap.removeClass(openGnb);
154					$mGnbBg.hide();
155					$mBtnClose.hide();
156					$('html, body').removeClass(setFixed)
157				}
158			});
159		},
160		slideMenuClose: function(opt) { //모바일메뉴 닫기
161			$mGnbWrap.removeClass(openGnb);
162			$mGnbBg.hide();
163			$mBtnClose.hide();
164			$('html, body').removeClass(setFixed);
165		},
166		mGnbDepthToggle: function(opt) { //하위뎁스별 슬라이드 toggle
167
168			//모바일 메뉴 제어
169			var thisMenu;
170
171			if($mGnbType == 'allDepthVertical') { //모바일메뉴가 allDepthVertical일 때
172				$mGnbBox.find('.' + setCollapse).find('a[target!=_blank]').click(function (e) {
173					if($(this).next('ul').length > 0) {
174						e.preventDefault();
175						thisMenu = $(this);
176						toggleMenu();
177					}
178				});
179			} else if($mGnbType == 'depthOnSide' || $mGnbType == 'depthOnSideFixed') { //모바일메뉴가 depthOnSide, depthOnSideFixed일 때
180				$mGnbBox.find('.' + depth1 + ' > .' + setCollapse + ' > a[target!=_blank]').click(function (e) { //1뎁스 메뉴 클릭시
181					if($(this).next('ul').length > 0) {
182						e.preventDefault();
183						$(this).next('ul').stop(true).show().parent('li').toggleClass(setActive);	
184						$(this).parent('li').siblings().removeClass(setCurrent).removeClass(setActive).children('ul').stop(true).hide();
185					}
186				});
187				$mGnbBox.find('.' + depth2 + ' .' + setCollapse + ' a[target!=_blank]').click(function (e) { //2뎁스 이하 메뉴 클릭시
188					if($(this).next('ul').length > 0) {
189						e.preventDefault();
190						thisMenu = $(this);
191						toggleMenu();
192					}
193				});
194			}
195
196			function toggleMenu() {
197				thisMenu.next('ul').stop(true).slideToggle('fast').parent('li').toggleClass(setActive);	
198				thisMenu.parent('li').siblings().removeClass(setActive).children('ul').stop(true).slideUp('fast');
199			}
200		},
201		setHeight: function(opt) {
202			var topUtilH = $($mUtil).outerHeight();// 1뎁스 고정 및 높이 인식
203			//$mGnbBox.css({'top': topUtilH + 'px'});
204			$mGnbBox.css({'height':'calc(100% - ' + topUtilH + 'px'});
205		},
206	}
207}();