https://www.dakotagas.com/_files/js/responsivemultimenu.js

1/*
2
3Responsive Mobile Menu v1.1
4Plugin URI: responsivemultimenu.com
5
6Author: Adam Wysocki
7Author URI: http://oncebuilder.com
8
9License: http://opensource.org/licenses/MIT
10
11*/
12
13function adaptMenu() {
14	/* 	toggle menu on resize */
15	$('.rmm').each(function() {
16		// initialize vars
17		var maxWidth = 0;
18		var width = 0;
19
20		// width of menu list (non-toggled)
21		$('.rmm-menu').children("li").each(function() {
22			if($(this).parent().hasClass('rmm-menu')){
23				width = $(this).outerWidth();
24				if(width>0){
25					maxWidth += width;
26				}
27			}
28		});
29
30		// compare width
31		//var abc = screen.width;
32		//console.log("screen width = " + abc);
33		//var width = $('.rmm').css('max-width');
34		//width = width.replace('px', ''); 
35		//console.log("this.parent.width = " + ($(this).parent().width()));
36		
37		var windowWidth = $(window).width();
38		var navMainContainerWidth = $('.nav-main-container').width();
39		//console.log('windowWidth = ' + windowWidth + 'px');
40		//console.log('navMainContainerWidth = ' + navMainContainerWidth + 'px');
41
42		if ( windowWidth > 1111 ) {
43			$('.nav-main-container').width('670px');
44			$('.rmm-menu').removeClass("rmm-mobile");
45			
46			//remove all classes from mobile verion
47			$(".rmm-menu ul").removeClass("rmm-subview");
48			$(".rmm-menu li").removeClass("rmm-subover-hidden");
49			$(".rmm-menu li").removeClass("rmm-subover-visible");
50			$(".rmm-menu a").removeClass("rmm-subover-header");
51
52			$(".rmm-toggled").removeClass("rmm-closed");
53			$('.rmm-toggled').hide();
54			
55			//$('.rmm-toggled').removeClass("rmm-view");
56			//$('.rmm-toggled').addClass("rmm-closed");
57		}else {
58			$('.nav-main-container').width('50px');
59			$('.rmm-menu').addClass("rmm-mobile");
60			$('.rmm-toggled').show();
61			$('.rmm-toggled').addClass("rmm-closed");
62			
63			//$('.rmm-toggled').removeClass("rmm-closed");
64		}
65		        // Check window height - unpin header if height < 850px
66        var windowHeight = window.innerHeight;
67        //console.log("windowHeight = " + windowHeight);
68        if (windowHeight < 850)
69        {
70            $("#navheader").addClass("shortPage");
71        }
72        else
73        {
74            $("#navheader").removeClass("shortPage");
75        }
76
77	});
78}
79
80function responsiveMultiMenu() {
81	$('.rmm').each(function() {
82		// create mobile menu classes here to light up HTML
83		$(this).find("ul").addClass("rmm-submenu");
84		$(this).find("ul:first").addClass("rmm-menu");
85		$(this).find("ul:first").removeClass("rmm-submenu");
86		$(this).find('.rmm-submenu').prepend( '<li class="rmm-back"><a href="#">back</a></li>' );
87		$(this).find("ul").prev().addClass("rmm-dropdown");
88	
89		// initialize vars
90		var maxWidth = 0;
91		var width = 0;
92
93		// width of menu list (non-toggled)
94		$('.rmm-menu').children("li").each(function() {
95			if($(this).parent().hasClass('rmm-menu')){
96				width = $(this).outerWidth();//outerWidth();
97				if(width>0){
98					maxWidth += width;
99				}
100				//console.log("maxWidth = " + maxWidth);
101				//console.log("width = " + width);
102			}
103		});
104
105		if ($.support.leadingWhitespace) {
106			$(this).css('max-width' , (maxWidth+5)+'px');
107			//console.log("$.support.leadingWhitespace | " + (maxWidth+5) + "px");
108		}else{
109			$(this).css('max-width' , (maxWidth+5)+'px');
110			//console.log("else | " + (maxWidth+5) + "px");
111		}
112		
113		// create dropdown button
114		var str=''
115		str+='<div class="rmm-toggled rmm-view rmm-closed">'
116			str+='<div class="rmm-toggled-controls">'
117			str+='<div class="rmm-toggled-button"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div>';
118			str+='</div>';
119		str+='</div>';
120		
121		$(this).prepend(str);
122	});
123	
124	// click interacts in mobile wersion
125	$('.rmm-dropdown').click(function (e) {
126		if($(this).parents(".rmm-menu").hasClass('rmm-mobile')){
127			e.preventDefault();
128			e.stopPropagation();
129			
130			$(this).next().addClass("rmm-subview");
131
132			var index=$(this).parent().index();
133			
134			var i=0;
135			$(this).parent().parent().children("li").each(function() {
136				if(index==$(this).index()){
137					$(this).removeClass("rmm-subover-hidden");
138					$(this).addClass("rmm-subover-visible");
139				}else{
140					$(this).removeClass("rmm-subover-visible");
141					$(this).addClass("rmm-subover-hidden");
142				}
143			});
144			$(this).addClass("rmm-subover-header");
145		}
146	});
147	
148	// click back interacts in mobile version
149	$('.rmm-back a').click(function () {
150		$(this).parent().parent().prev().removeClass("rmm-subover-header");
151		$(this).parent().parent().removeClass("rmm-subview");
152		$(this).parent().parent().parent().parent().find("li").removeClass("rmm-subover-hidden");
153		$(this).parent().parent().parent().parent().find("li").removeClass("rmm-subover-visible");
154	});
155	
156	// click toggler interacts in mobile version
157	$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
158		if ($(this).is(".rmm-closed")) {
159			$(this).removeClass("rmm-closed");
160		}else {
161			$(this).addClass("rmm-closed");
162		}
163	});	
164}
165
166$(window).on('load', function(){
167    responsiveMultiMenu();
168	adaptMenu();
169});
170
171
172$(window).resize(function() {
173 	adaptMenu();
174});