https://origami-cdo.it/js/selectnav.js

1/*!
2 * SelectNav.js (v. 0.1)
3 * Converts your <ul>/<ol> navigation into a dropdown list for small screens
4 */
5
6window.selectnav = (function(){
7	
8"use strict";
9			
10	var selectnav = function(element,options){
11		
12		element = document.getElementById(element);
13
14		// return immediately if element doesn't exist	
15		if( ! element) 
16			return;
17
18		// return immediately if element is not a list
19		if( ! islist(element) )	
20			return;
21
22		document.documentElement.className += " js";
23
24		// retreive options and set defaults
25		var o = options || {},
26			
27			activeclass = o.activeclass || 'active',
28			autoselect = typeof(o.autoselect) === "boolean" ? o.autoselect : true,
29			nested = typeof(o.nested) === "boolean" ? o.nested : true,
30			indent = o.indent || "→",
31			label = o.label || "- Navigation -",
32			
33			// helper variables
34			level = 0,
35			selected = " selected ";
36
37		// insert the freshly created dropdown navigation after the existing navigation
38		element.insertAdjacentHTML('afterend', parselist(element) );
39
40		var nav = document.getElementById(id());
41		
42		// autoforward on click
43		if (nav.addEventListener) nav.addEventListener('change',goTo);
44		if (nav.attachEvent) nav.attachEvent('onchange', goTo);
45		
46		return nav;
47		
48		function goTo(e){
49			
50			// Crossbrowser issues - http://www.quirksmode.org/js/events_properties.html
51			var targ;
52			if (!e) e = window.event;
53			if (e.target) targ = e.target;
54			else if (e.srcElement) targ = e.srcElement;
55			if (targ.nodeType === 3) // defeat Safari bug
56				targ = targ.parentNode;	
57		
58			if(targ.value) window.location.href = targ.value; 
59		}
60		
61		function islist(list){
62			var n = list.nodeName.toLowerCase();
63			return (n === 'ul' || n === 'ol');
64		}
65		
66		function id(nextId){
67			for(var j=1; document.getElementById('selectnav'+j);j++);
68			return (nextId) ? 'selectnav'+j : 'selectnav'+(j-1);
69		}
70
71		function parselist(list){
72
73			// go one level down
74			level++;
75	
76			var length = list.children.length,
77				html = '',
78				prefix = '',
79				k = level-1
80				;
81	
82			// return immediately if has no children
83			if (!length) return;
84		
85			if(k) {
86				while(k--){
87					prefix += indent;
88				}
89				prefix += " ";
90			}
91			
92			for(var i=0; i < length; i++){	
93		
94				var link = list.children[i].children[0];
95				var text = link.innerText || link.textContent;		
96				var isselected = '';
97		
98				if(activeclass){
99					isselected = link.className.search(activeclass) !== -1 || link.parentElement.className.search(activeclass) !== -1 ? selected : '';	
100				}
101		
102				if(autoselect && !isselected){
103					isselected = link.href === document.URL ? selected : '';
104				}
105				
106				html += '<option value="' + link.href + '" ' + isselected + '>' + prefix + text +'</option>';
107		
108				if(nested){
109					var subElement = list.children[i].children[1];
110					if( subElement && islist(subElement) ){
111						html += parselist(subElement);
112					}
113				}
114			}
115			
116			// adds label
117			if(level === 1 && label) html = '<option value="">' + label + '</option>' + html;
118		
119			// add <select> tag to the top level of the list
120			if(level === 1) html = '<select class="selectnav" id="'+id(true)+'">' + html + '</select>';
121	
122			// go 1 level up
123			level--;
124	
125			return html;
126		}
127
128	};
129	
130	return function (element,options) { 
131		selectnav(element,options);
132	};
133
134
135})();