https://www.toyota-rikeijosei.or.jp/common/js/slide_menu.js

1// JavaScript Document
2
3// Menu
4$(function(){
5	// 変数
6	var body = $(document.body), //body object
7		menu = $('nav'), //navi object
8		header = $('header'), //header object
9		headerlogo = $('#header-logo'), //header object
10		layer = $('.layer'), //sp overlayer
11		clbutton = $('.close-button'), //sp close
12		menuBtn = $('.header-spmenu'), //menu buttun
13		menuWidth = menu.outerWidth(), //menu width
14		attmenu = $('nav').find('ul > li > ul'), //sub menu object
15		leng = attmenu.length, //sub menu object
16		current, //current menu
17		num,
18		winw,
19		sc;
20		var width = parseInt($("#Width").val());
21    	var height = parseInt($("#Height").val());
22		
23	
24	// default
25	
26	var dfPC = function(){
27		$('#navi-inner').perfectScrollbar('destroy');
28		menu.css({'right' : 0 });
29		body.css({'left' : 0 }).removeClass('open');
30		layer.hide();
31		for(i=0;i<leng;i++){
32			attmenu.eq(i).hide();
33		}
34		removebody();
35	};
36	
37	var dfSP = function(){
38		$('#navi-inner').perfectScrollbar();
39		menu.css({'right' : menuWidth*-1 });
40		for(i=0;i<leng;i++){
41			attmenu.eq(i).hide();
42		}
43	};
44	
45	// PC menu
46	
47	$('nav > ul > li').hover(function(){
48		current = $(this);
49		num = $(this).find("ul");
50		if(winw == "pc"){
51			$(this).addClass('navrollover');
52			if( typeof num !== 'undefined' && num !== false ){
53				num.eq(0).not(":animated").slideDown(400);
54			}else{
55			   
56			}
57		}
58	},function(){
59		if(winw == "pc"){
60			$(this).removeClass('navrollover');
61			$(num.eq(0),this).slideUp(200);
62		}
63	});
64	
65	// SP menu
66	function removebody() {
67		body.css({
68			'top' : 0	
69		});
70		$(window).scrollTop(sc);
71		headerlogo.show();
72	}
73	
74	$(function(){
75		menuBtn.on('click', function(){
76			sc=$(window).scrollTop();
77			menuWidth = menu.outerWidth();
78			body.toggleClass('open');
79			if(body.hasClass('open')){
80				layer.show();
81				headerlogo.hide();
82				$("#navi-inner").scrollTop(0).perfectScrollbar('update');
83				
84				body.animate({'left' : menuWidth*-1 }, 300);    
85				body.css({
86					'top' : sc*-1
87				});     
88				menu.animate({'right' : 0 }, 300);                    
89			} else {
90				
91				layer.hide();
92				menu.animate({'right' : menuWidth*-1 }, 300);
93				body.animate({'left' : 0 }, 300);  
94				removebody();         
95			}             
96		});
97		layer.on('click', function(){
98			menu.animate({'right' : menuWidth*-1 }, 300);
99			body.animate({'left' : 0 }, 300).removeClass('open');
100			removebody();
101			layer.hide();
102		});
103		clbutton.on('click', function(){
104			menu.animate({'right' : menuWidth*-1 }, 300);
105			body.animate({'left' : 0 }, 300).removeClass('open');
106			removebody();
107			layer.hide();
108		});
109	});
110	
111	function changeSize() {
112		var width = parseInt($("#Width").val());
113		var height = parseInt($("#Height").val());
114	
115		$("#navi-inner").width(width).height(height);
116	
117		// update scrollbars
118		$('#navi-inner').perfectScrollbar('update');
119	}
120	
121	$(function() {
122		$('nav > ul > li > ul').each(function(){
123			var list = $(this);
124			var triger = $(list.prev());
125			
126			triger.on('click', function(){
127				if(winw != "pc"){
128					(event.preventDefault) ? event.preventDefault():event.returnValue=false;
129					list.slideToggle();
130					changeSize();
131				} else {
132					
133				}
134			});
135		});
136	});
137	
138	// スクロールイベントの監視
139	
140	$(document).ready(function() {
141		$(window).scroll(function () {
142			if ($(this).scrollTop() > 10) {
143				header.addClass('headerbg');
144			} else {
145				header.removeClass('headerbg');
146			}
147		});
148	});
149	
150	// リサイズイベントの監視
151	var func = function(){
152		var windowWidth = $(window).width(),
153			windowXs = 480,
154			windowSm = 768,
155			windowLg = 1200;
156		if (windowWidth <= windowXs) {
157			if(winw != "sp"){
158				winw = "sp";
159				dfSP();
160			}
161		} else if (windowWidth <= windowSm) {
162			if(winw != "sp"){
163				winw = "sp";
164				dfSP();
165			}
166		} else if (windowWidth <= windowLg) {
167			if(winw != "pc"){
168				winw = "pc";
169				dfPC();
170			}
171		} else{
172			if(winw != "pc"){
173				winw = "pc";
174				dfPC();
175			}
176		}
177	};
178	$(window).resize(function($){
179		menuWidth = menu.outerWidth();
180		func();
181	});
182	$(document).ready(function($){
183    	func();
184	});
185});