https://www.bridgestone.com/etc/js/jquery-sliding-menu.js

1
2	/*
3	 *
4	 *	jQuery Sliding Menu Plugin
5	 *	Mobile app list-style navigation in the browser
6	 *
7	 *	Written by Ali Zahid
8	 *	http://designplox.com/jquery-sliding-menu
9	 *
10	 */
11
12(function($)
13{
14	var usedIds = [];
15
16	$.fn.menu = function(options)
17	{
18		var selector = this.selector;
19
20		var settings = $.extend(
21		{
22			dataJSON: false,
23			backLabel: 'Back'
24
25		}, options);
26
27		return this.each(function()
28		{
29			var self = this,
30				menu = $(self),
31				data;
32
33			if (menu.hasClass('sliding-menu'))
34			{
35				return;
36			}
37
38			var menuWidth = menu.width();
39
40			if (settings.dataJSON)
41			{
42				data = processJSON(settings.dataJSON);
43			}
44			else
45			{
46				data = process(menu);
47			}
48
49			menu.empty().addClass('sliding-menu');
50
51			var rootPanel;
52
53			if (settings.dataJSON)
54			{
55				$(data).each(function(index, item)
56				{
57					var panel = $('<ul></ul>');
58
59					if (item.root)
60					{
61						rootPanel = '#' + item.id;
62					}
63
64					panel.attr('id', item.id);
65					panel.addClass('menu-panel');
66					panel.width(menuWidth);
67
68					$(item.children).each(function(index, item)
69					{
70						var link = $('<a></a>');
71
72						link.attr('class', item.styleClass);
73						link.attr('href', item.href);
74						link.text(item.label);
75
76						var li = $('<li></li>');
77
78						li.append(link);
79
80						panel.append(li);
81
82					});
83
84					menu.append(panel);
85
86				});
87			}
88			else
89			{
90				$(data).each(function(index, item)
91				{
92					var panel = $(item);
93
94					if (panel.hasClass('menu-panel-root'))
95					{
96						rootPanel = '#' + panel.attr('id');
97					}
98
99					panel.width(menuWidth);
100
101					menu.append(item);
102
103				});
104			}
105
106			rootPanel = $(rootPanel);
107			rootPanel.addClass('menu-panel-root');
108
109			var currentPanel = rootPanel;
110
111			menu.height(rootPanel.height());
112
113			var wrapper = $('<div></div>').addClass('sliding-menu-wrapper').width(data.length * menuWidth);
114
115			menu.wrapInner(wrapper);
116
117			wrapper = $('.sliding-menu-wrapper', menu);
118
119			$('a', self).on('click', function(e)
120			{
121				var href = $(this).attr('href'),
122					label = $(this).text();
123
124				if (wrapper.is(':animated'))
125				{
126					e.preventDefault();
127
128					return;
129				}
130
131				if (href == '#')
132				{
133					e.preventDefault();
134				}
135				else if (href.indexOf('#menu-panel') == 0)
136				{
137					var target = $(href),
138						isBack = $(this).hasClass('back'),
139						marginLeft = parseInt(wrapper.css('margin-left'));
140
141					if (isBack)
142					{
143						if (href == '#menu-panel-back')
144						{
145							target = currentPanel.prev();
146						}
147
148						wrapper.stop(true, true).animate(
149						{
150							marginLeft: marginLeft + menuWidth
151
152						}, 'fast');
153					}
154					else
155					{
156						target.insertAfter(currentPanel);
157
158						if (settings.backLabel === true)
159						{
160							$('.back', target).text(label);
161						}
162						else
163						{
164							$('.back', target).text(settings.backLabel);
165						}
166
167						wrapper.stop(true, true).animate(
168						{
169							marginLeft: marginLeft - menuWidth
170
171						}, 'fast');
172					}
173
174					currentPanel = target;
175
176					menu.stop(true, true).animate(
177					{
178						height: target.height()
179
180					}, 'fast');
181
182					e.preventDefault();
183				}
184
185			});
186
187			return this;
188
189		});
190
191		function process(data)
192		{
193			var ul = $('ul', data),
194				panels = [];
195
196			$(ul).each(function(index, item)
197			{
198				var panel = $(item),
199					handler = panel.prev(),
200					id = getNewId();
201
202				if (handler.length == 1)
203				{
204					handler.addClass('nav').attr('href', '#menu-panel-' + id);
205				}
206
207				panel.attr('id', 'menu-panel-' + id);
208
209				if (index == 0)
210				{
211					panel.addClass('menu-panel-root');
212				}
213				else
214				{
215					panel.addClass('menu-panel');
216
217					var li = $('<li></li>'),
218						back = $('<a></a>').addClass('back').attr('href', '#menu-panel-back');
219
220					panel.prepend(back);
221				}
222
223				panels.push(item);
224
225			});
226
227			return panels;
228		}
229
230		function processJSON(data, parent)
231		{
232			var root = { id: 'menu-panel-' + getNewId(), children: [], root: (parent ? false : true) },
233				panels = [];
234
235			if (parent)
236			{
237				root.children.push(
238				{
239					styleClass: 'back',
240					href: '#' + parent.id
241
242				});
243			}
244
245			$(data).each(function(index, item)
246			{
247				root.children.push(item);
248
249				if (item.children)
250				{
251					var panel = processJSON(item.children, root);
252
253					item.href = '#' + panel[0].id;
254					item.styleClass = 'nav';
255
256					panels = panels.concat(panel);
257				}
258
259			});
260
261			return [root].concat(panels);
262		}
263
264		function getNewId()
265		{
266			var id;
267
268			do
269			{
270				id = Math.random().toString(36).substring(3, 8);
271			}
272			while (usedIds.indexOf(id) >= 0);
273
274			usedIds.push(id);
275
276			return id;
277		}
278
279	};
280
281} (jQuery));