https://gerhai.org.br/js/jquery.mobilemenu.js

1(function($){
2	
3	//plugin's default options
4	var settings = {
5		prependTo: 'nav',				//insert at top of page by default
6		switchWidth: 768,				//width at which to switch to select, and back again
7		topOptionText: 'Select a page:'	//default "unselected" state
8	},
9	
10	menuCount = 0,						//used as a unique index for each menu if no ID exists
11	uniqueLinks = [];					//used to store unique list items for combining lists
12
13	//go to page
14	function goTo(url){document.location.href = url;}
15	
16	//does menu exist?
17	function menuExists(){return ($('.mnav').length) ? true : false;}
18
19	//validate selector's matched list(s)
20	function isList($this){
21		var pass = true;
22		$this.each(function(){
23			if(!$(this).is('ul') && !$(this).is('ol')){
24				pass=false;
25			}
26		});
27		return pass;
28	}//isList()
29
30	//function to decide if mobile or not
31	function isMobile(){return ($(document).width() < settings.switchWidth);}
32	
33	//function to get text value of element, but not it's children
34	function getText($item){return $.trim($item.clone().children('ul, ol').remove().end().text());}
35	
36	//function to check if URL is unique
37	function isUrlUnique(url){return ($.inArray(url, uniqueLinks) === -1) ? true : false;}
38
39	//function to create options in the select menu
40	function createOption($item, $container, text){
41		//if no text param is passed, use list item's text, otherwise use settings.groupPageText
42		var $selected='', $disabled='', $sel_text='';
43		
44		if ($item.hasClass('current')) $selected='selected';
45		if ($item.hasClass('disabled')) {
46			if ($('.current').length) $disabled='disabled';
47			else $disabled='selected';
48		}
49		
50		$sel_text=$.trim(getText($item));
51		$sel_text = $sel_text.replace('»', '');
52		if ($item.parent('ul ul').length) $sel_text = ' – ' + $sel_text;
53		if ($item.parent('ul ul ul').length) $sel_text = '– ' + $sel_text;
54		if ($item.parent('ul ul ul ul').length) $sel_text = '– ' + $sel_text;
55
56		if(!text){$('<option value="'+$item.find('a:first').attr('href')+'" ' + $selected + ' ' + $disabled + '>' + $sel_text +'</option>').appendTo($container);}
57		else {$('<option value="'+$item.find('a:first').attr('href')+'" ' + $selected + ' ' + $disabled + '>'+text+'</option>').appendTo($container);}
58	}//createOption()
59	
60	//function to create submenus
61	function createGroup($group, $container){
62		//loop through each sub-nav list
63		$group.children('ul, ol').each(function(){
64			$(this).children('li').each(function(){
65				createOption($(this), $container);
66				
67				$(this).each(function(){
68					var $li_ch = $(this),
69						$container_ch =  $container;
70					createGroup($li_ch, $container_ch);
71				});
72			});
73		});
74		
75	}//createGroup()
76	
77	//function to create <select> menu
78	function createSelect($menu){
79		//create <select> to insert into the page
80		var $select = $('<select id="mm'+menuCount+'" class="mnav">');
81		menuCount++;
82		
83		//create default option if the text is set (set to null for no option)
84		if(settings.topOptionText){createOption($('<li class="disabled"><a href="#">'+settings.topOptionText+'</a></li>'), $select);}
85		
86		//loop through first list items
87		$menu.children('li').each(function(){
88			var $li = $(this);
89
90			//if nested select is wanted, and has sub-nav, add optgroup element with child options
91			if($li.children('ul, ol').length){
92				createOption($li, $select);
93				createGroup($li, $select);
94			}
95			
96			//otherwise it's a single level select menu, so build option
97			else {createOption($li, $select);}
98		});
99		
100		//add change event and prepend menu to set element
101		$select
102			.change(function(){goTo($(this).val());})
103			.prependTo(settings.prependTo);
104	}//createSelect()
105
106	
107	//function to run plugin functionality
108	function runPlugin(){
109		//menu doesn't exist
110		if(isMobile() && !menuExists()){
111			$menus.each(function(){
112				createSelect($(this));
113			});
114		}
115
116		//menu exists, and browser is mobile width
117		if(isMobile() && menuExists()){
118			$('.mnav').show();
119			$menus.hide();
120		}
121
122		//otherwise, hide the mobile menu
123		if(!isMobile() && menuExists()){
124			$('.mnav').hide();
125			$menus.show();
126		}
127	}//runPlugin()
128
129	//plugin definition
130	$.fn.mobileMenu = function(options){
131		//override the default settings if user provides some
132		if(options){$.extend(settings, options);}

133		//check if user has run the plugin against list element(s)
134		if(isList($(this))){
135			$menus = $(this);
136			runPlugin();
137			$(window).resize(function(){runPlugin();});
138		} else {
139			alert('mobileMenu only works with <ul>/<ol>');
140		}
141	};//mobileMenu()
142})(jQuery);
143
144$(document).ready(function(){
145	$('.sf-menu').mobileMenu();
146});