1. <style>
3. main *,
4. main *:before,
5. main *:after { border-radius: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; outline: none; padding: 0; }
7. main a { color: #16A085; text-decoration: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; }
9. main a:hover { color: #1ABC9C; }
10. main h1 { font-weight: 300; }
11. main h2 { font-weight: 300; margin: 3em 0 1em 0; }
12. main p { margin: 2em 0; }
13. main pre { background: #34495E; color: #ECF0F1; line-height: 1.4; padding: 2em; tab-size: 4; }
14. main header,
15. main section,
16. main #menu { background: #7F8C8D; }
17. main #menu a { color: #FFF; }
18. @media (max-width: 64rem) {
19. main h2 { margin-top: 2em; }
20. }
22. main .sliding-menu { overflow: hidden; position: relative; }
23. main .sliding-menu ul { float: left; margin: 0; }
24. main .sliding-menu li { list-style: none; margin: 0; }
25. main .sliding-menu a { display: block; padding: 1em; }
26. main .sliding-menu a:hover { background: #333; color: #FFF; }
27. main .sliding-menu a.nav:before { content: '\3009'; float: right; margin-left: 1em; }
28. main .sliding-menu a.back { background: #555; color: #FFF; }
29. main .sliding-menu a.back:before { content: '\3008'; float: left; margin-right: 1em; }
31. </style>
32. <script src="/js/index.php?js=jquery.js"></script>
33. <script>
35. (function($){
36. var usedIds = [];
38. $.fn.menu = function(options){
39. var selector = this.selector;
40. var settings = $.extend({
41. dataJSON: false,
42. backLabel: 'Back'
44. }, options);
46. return this.each(function(){
47. var self = this,
48. menu = $(self),
49. data;
51. if (menu.hasClass('sliding-menu')){
52. return;
53. }
54. var menuWidth = menu.width();
56. if (settings.dataJSON){
57. data = processJSON(settings.dataJSON);
58. }else{
59. data = process(menu);
60. }
62. menu.empty().addClass('sliding-menu');
64. var rootPanel;
66. if (settings.dataJSON){
67. $(data).each(function(index, item){
68. var panel = $('<ul></ul>');
70. if (item.root){
71. rootPanel = '#' + item.id;
72. }
73. panel.attr('id', item.id);
74. panel.addClass('menu-panel');
75. panel.width(menuWidth);
77. $(item.children).each(function(index, item){
78. var link = $('<a></a>');
80. link.attr('class', item.styleClass);
81. link.attr('href', item.href);
82. link.text(item.label);
83. var li = $('<li></li>');
84. li.append(link);
85. panel.append(li);
86. });
87. menu.append(panel);
89. });
90. }else{
91. $(data).each(function(index, item){
92. var panel = $(item);
94. if (panel.hasClass('menu-panel-root')){
95. rootPanel = '#' + panel.attr('id');
96. }
97. panel.width(menuWidth);
98. menu.append(item);
99. });
100. }
102. rootPanel = $(rootPanel);
103. rootPanel.addClass('menu-panel-root');
104. var currentPanel = rootPanel;
105. menu.height(rootPanel.height());
106. var wrapper = $('<div></div>').addClass('sliding-menu-wrapper').width(data.length * menuWidth);
107. menu.wrapInner(wrapper);
108. wrapper = $('.sliding-menu-wrapper', menu);
109. $('a', self).on('click', function(e){
110. var href = $(this).attr('href'),
111. label = $(this).text();
113. if (wrapper.is(':animated')){
114. e.preventDefault();
115. return;
116. }
118. if (href == '#'){
119. e.preventDefault();
120. }else if (href.indexOf('#menu-panel') == 0){
121. var target = $(href),
122. isBack = $(this).hasClass('back'),
123. marginLeft = parseInt(wrapper.css('margin-left'));
125. if (isBack){
126. if (href == '#menu-panel-back'){
127. target = currentPanel.prev();
128. }
130. wrapper.stop(true, true).animate({
131. marginLeft: marginLeft + menuWidth
132. }, 'fast');
133. }else{
134. target.insertAfter(currentPanel);
135. if (settings.backLabel === true){
136. $('.back', target).text(label);
137. }else{
138. $('.back', target).text(settings.backLabel);
139. }
140. wrapper.stop(true, true).animate({
141. marginLeft: marginLeft - menuWidth
142. }, 'fast');
143. }
144. currentPanel = target;
145. menu.stop(true, true).animate({
146. height: target.height()
147. }, 'fast');
148. e.preventDefault();
149. }
150. });
151. return this;
152. });
154. function process(data){
155. var ul = $('ul', data),
156. panels = [];
157. $(ul).each(function(index, item){
158. var panel = $(item),
159. handler = panel.prev(),
160. id = getNewId();
162. if (handler.length == 1){
163. handler.addClass('nav').attr('href', '#menu-panel-' + id);
164. }
165. panel.attr('id', 'menu-panel-' + id);
166. if (index == 0){
167. panel.addClass('menu-panel-root');
168. }else{
169. panel.addClass('menu-panel');
170. var li = $('<li></li>'),
171. back = $('<a></a>').addClass('back').attr('href', '#menu-panel-back');
172. panel.prepend(back);
173. }
174. panels.push(item);
175. });
176. return panels;
177. }
179. function processJSON(data, parent){
180. var root = { id: 'menu-panel-' + getNewId(), children: [], root: (parent ? false : true) },
181. panels = [];
182. if (parent){
183. root.children.push({
184. styleClass: 'back',
185. href: '#' + parent.id
186. });
187. }
188. $(data).each(function(index, item){
189. root.children.push(item);
190. if (item.children){
191. var panel = processJSON(item.children, root);
192. item.href = '#' + panel[0].id;
193. item.styleClass = 'nav';
194. panels = panels.concat(panel);
195. }
196. });
197. return [root].concat(panels);
198. }
200. function getNewId(){
201. var id;
202. do{
203. id = Math.random().toString(36).substring(3, 8);
204. }
205. while (usedIds.indexOf(id) >= 0);
206. usedIds.push(id);
207. return id;
208. }
209. };
210. } (jQuery));
211. </script>
212. <script>
213. $(document).ready(function(){
214. $('#menu').menu();
215. });
216. </script>
217. <section>
218. <h2>Demo</h2>
219. <div id="menu">
220. <ul>
221. <li>
222. <a href="#">Artists</a>
223. <ul>
224. <li>
225. <a href="#">Aerosmith</a>
226. <ul>
227. <li>
228. <a href="#">Get Your Wings</a>
229. <ul>
230. <li>
231. <a href="#">Train Kept A-Rollin'</a>
232. </li>
233. <li>
234. <a href="#">Same Old Song and Dance</a>
235. </li>
236. </ul>
237. </li>
238. </ul>
239. </li>
240. <li>
241. <a href="#">Eagles</a>
242. <ul>
243. <li>
244. <a href="#">Hotel California</a>
245. <ul>
246. <li>
247. <a href="#">Hotel California</a>
248. </li>
249. <li>
250. <a href="#">Pretty Maids All in a Row</a>
251. </li>
252. </ul>
253. </li>
254. </ul>
255. </li>
256. <li>
257. <a href="#">Led Zeppelin</a>
258. <ul>
259. <li>
260. <a href="#">Physical Graffiti</a>
261. <ul>
262. <li>
263. <a href="#">In My Time of Dying</a>
264. </li>
265. <li>
266. <a href="#">Houses of the Holy</a>
267. </li>
268. </ul>
269. </li>
270. </ul>
271. </li>
272. </ul>
273. </li>
274. <li>
275. <a href="#">Albums</a>
276. <ul>
277. <li>
278. <a href="#">Get Your Wings</a>
279. <ul>
280. <li>
281. <a href="#">Train Kept A-Rollin'</a>
282. </li>
283. <li>
284. <a href="#">Same Old Song and Dance</a>
285. </li>
286. </ul>
287. </li>
288. <li>
289. <a href="#">Hotel California</a>
290. <ul>
291. <li>
292. <a href="#">Hotel California</a>
293. </li>
294. <li>
295. <a href="#">Pretty Maids All in a Row</a>
296. </li>
297. </ul>
298. </li>
299. <li>
300. <a href="#">Physical Graffiti</a>
301. <ul>
302. <li>
303. <a href="#">In My Time of Dying</a>
304. </li>
305. <li>
306. <a href="#">Houses of the Holy</a>
307. </li>
308. </ul>
309. </li>
310. </ul>
311. </li>
312. <li>
313. <a href="#">Songs</a>
314. <ul>
315. <li>
316. <a href="#">In My Time of Dying</a>
317. </li>
318. <li>
319. <a href="#">Houses of the Holy</a>
320. </li>
321. <li>
322. <a href="#">Hotel California</a>
323. </li>
324. <li>
325. <a href="#">Pretty Maids All in a Row</a>
326. </li>
327. <li>
328. <a href="#">Train Kept A-Rollin'</a>
329. </li>
330. <li>
331. <a href="#">Same Old Song and Dance</a>
332. </li>
333. </ul>
334. </li>
335. <li>
336. <a href="#">Genres</a>
337. <ul>
338. <li>
339. <a href="#">Rock</a>
340. <ul>
341. <li>
342. <a href="#">Hotel California</a>
343. </li>
344. <li>
345. <a href="#">Pretty Maids All in a Row</a>
346. </li>
347. <li>
348. <a href="#">Train Kept A-Rollin'</a>
349. </li>
350. <li>
351. <a href="#">Same Old Song and Dance</a>
352. </li>
353. </ul>
354. </li>
355. <li>
356. <a href="#">Hard rock</a>
357. <ul>
358. <li>
359. <a href="#">In My Time of Dying</a>
360. </li>
361. <li>
362. <a href="#">Houses of the Holy</a>
363. </li>
364. </ul>
365. </li>
366. </ul>
367. </li>
368. <li>
369. <a href="#">Settings</a>
370. <ul>
371. <li>
372. <a href="#">Profile</a>
373. </li>
374. <li>
375. <a href="#">Player</a>
376. <ul>
377. <li>
378. <a href="#">Volume</a>
379. </li>
380. <li>
381. <a href="#">Equalizer</a>
382. </li>
383. </ul>
384. </li>
385. </ul>
386. </li>
387. </ul>
388. </div>
389. </section>

	<style>

	main *,
	main *:before,
	main *:after { border-radius: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; outline: none; padding: 0; }

	main a { color: #16A085; text-decoration: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; }

	main a:hover { color: #1ABC9C; }
	main h1 { font-weight: 300; }
	main h2 { font-weight: 300; margin: 3em 0 1em 0; }
	main p { margin: 2em 0; }
	main pre { background: #34495E; color: #ECF0F1; line-height: 1.4; padding: 2em; tab-size: 4; }
	main header,
	main section,
	main #menu { background: #7F8C8D; }
	main #menu a { color: #FFF; }
	@media (max-width: 64rem) {
	main h2 { margin-top: 2em; }
	}

main .sliding-menu { overflow: hidden; position: relative; }
main .sliding-menu ul { float: left; margin: 0; }
main .sliding-menu li { list-style: none; margin: 0; }
main .sliding-menu a { display: block; padding: 1em; }
main .sliding-menu a:hover { background: #333; color: #FFF; }
main .sliding-menu a.nav:before { content: '\3009'; float: right; margin-left: 1em; }
main .sliding-menu a.back { background: #555; color: #FFF; }
main .sliding-menu a.back:before { content: '\3008'; float: left; margin-right: 1em; }
  
</style>
<script src="/js/index.php?js=jquery.js"></script>
<script>

(function($){
	var usedIds = [];

	$.fn.menu = function(options){
		var selector = this.selector;
		var settings = $.extend({
			dataJSON: false,
			backLabel: 'Back'

		}, options);

		return this.each(function(){
			var self = this,
				menu = $(self),
				data;

			if (menu.hasClass('sliding-menu')){
				return;
			}
			var menuWidth = menu.width();

			if (settings.dataJSON){
				data = processJSON(settings.dataJSON);
			}else{
				data = process(menu);
			}

			menu.empty().addClass('sliding-menu');

			var rootPanel;

			if (settings.dataJSON){
				$(data).each(function(index, item){
					var panel = $('<ul></ul>');

					if (item.root){
						rootPanel = '#' + item.id;
					}
					panel.attr('id', item.id);
					panel.addClass('menu-panel');
					panel.width(menuWidth);

					$(item.children).each(function(index, item){
						var link = $('<a></a>');

						link.attr('class', item.styleClass);
						link.attr('href', item.href);
						link.text(item.label);
						var li = $('<li></li>');
						li.append(link);
						panel.append(li);
					});
					menu.append(panel);

				});
			}else{
				$(data).each(function(index, item){
					var panel = $(item);

					if (panel.hasClass('menu-panel-root')){
						rootPanel = '#' + panel.attr('id');
					}
					panel.width(menuWidth);
					menu.append(item);
				});
			}

			rootPanel = $(rootPanel);
			rootPanel.addClass('menu-panel-root');
			var currentPanel = rootPanel;
			menu.height(rootPanel.height());
			var wrapper = $('<div></div>').addClass('sliding-menu-wrapper').width(data.length * menuWidth);
			menu.wrapInner(wrapper);
			wrapper = $('.sliding-menu-wrapper', menu);
			$('a', self).on('click', function(e){
				var href = $(this).attr('href'),
					label = $(this).text();

				if (wrapper.is(':animated')){
					e.preventDefault();
					return;
				}

				if (href == '#'){
					e.preventDefault();
				}else if (href.indexOf('#menu-panel') == 0){
					var target = $(href),
					isBack = $(this).hasClass('back'),
					marginLeft = parseInt(wrapper.css('margin-left'));

					if (isBack){
						if (href == '#menu-panel-back'){
							target = currentPanel.prev();
						}

						wrapper.stop(true, true).animate({
						marginLeft: marginLeft + menuWidth
						}, 'fast');
					}else{
						target.insertAfter(currentPanel);
						if (settings.backLabel === true){
							$('.back', target).text(label);
						}else{
							$('.back', target).text(settings.backLabel);
						}
						wrapper.stop(true, true).animate({
							marginLeft: marginLeft - menuWidth
						}, 'fast');
					}
					currentPanel = target;
					menu.stop(true, true).animate({
						height: target.height()
					}, 'fast');
					e.preventDefault();
				}
			});
			return this;
		});

		function process(data){
			var ul = $('ul', data),
			panels = [];
			$(ul).each(function(index, item){
				var panel = $(item),
				handler = panel.prev(),
				id = getNewId();

				if (handler.length == 1){
					handler.addClass('nav').attr('href', '#menu-panel-' + id);
				}
				panel.attr('id', 'menu-panel-' + id);
				if (index == 0){
					panel.addClass('menu-panel-root');
				}else{
					panel.addClass('menu-panel');
					var li = $('<li></li>'),
					back = $('<a></a>').addClass('back').attr('href', '#menu-panel-back');
					panel.prepend(back);
				}
				panels.push(item);
			});
			return panels;
		}

		function processJSON(data, parent){
			var root = { id: 'menu-panel-' + getNewId(), children: [], root: (parent ? false : true) },
			panels = [];
			if (parent){
				root.children.push({
					styleClass: 'back',
					href: '#' + parent.id
				});
			}
			$(data).each(function(index, item){
				root.children.push(item);
				if (item.children){
					var panel = processJSON(item.children, root);
					item.href = '#' + panel[0].id;
					item.styleClass = 'nav';
					panels = panels.concat(panel);
				}
			});
			return [root].concat(panels);
		}

		function getNewId(){
			var id;
			do{
				id = Math.random().toString(36).substring(3, 8);
			}
			while (usedIds.indexOf(id) >= 0);
			usedIds.push(id);
			return id;
		}
	};
} (jQuery));
		</script>
		<script>
			$(document).ready(function(){
				$('#menu').menu();
			});
		</script>
		<section>
			<h2>Demo</h2>
			<div id="menu">
				<ul>
					<li>
						<a href="#">Artists</a>
						<ul>
							<li>
								<a href="#">Aerosmith</a>
								<ul>
									<li>
										<a href="#">Get Your Wings</a>
										<ul>
											<li>
												<a href="#">Train Kept A-Rollin'</a>
											</li>
											<li>
												<a href="#">Same Old Song and Dance</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Eagles</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
										<ul>
											<li>
												<a href="#">Hotel California</a>
											</li>
											<li>
												<a href="#">Pretty Maids All in a Row</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Led Zeppelin</a>
								<ul>
									<li>
										<a href="#">Physical Graffiti</a>
										<ul>
											<li>
												<a href="#">In My Time of Dying</a>
											</li>
											<li>
												<a href="#">Houses of the Holy</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Albums</a>
						<ul>
							<li>
								<a href="#">Get Your Wings</a>
								<ul>
									<li>
										<a href="#">Train Kept A-Rollin'</a>
									</li>
									<li>
										<a href="#">Same Old Song and Dance</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Hotel California</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
									</li>
									<li>
										<a href="#">Pretty Maids All in a Row</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Physical Graffiti</a>
								<ul>
									<li>
										<a href="#">In My Time of Dying</a>
									</li>
									<li>
										<a href="#">Houses of the Holy</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Songs</a>
						<ul>
							<li>
								<a href="#">In My Time of Dying</a>
							</li>
							<li>
								<a href="#">Houses of the Holy</a>
							</li>
							<li>
								<a href="#">Hotel California</a>
							</li>
							<li>
								<a href="#">Pretty Maids All in a Row</a>
							</li>
							<li>
								<a href="#">Train Kept A-Rollin'</a>
							</li>
							<li>
								<a href="#">Same Old Song and Dance</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Genres</a>
						<ul>
							<li>
								<a href="#">Rock</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
									</li>
									<li>
										<a href="#">Pretty Maids All in a Row</a>
									</li>
									<li>
										<a href="#">Train Kept A-Rollin'</a>
									</li>
									<li>
										<a href="#">Same Old Song and Dance</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Hard rock</a>
								<ul>
									<li>
										<a href="#">In My Time of Dying</a>
									</li>
									<li>
										<a href="#">Houses of the Holy</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Settings</a>
						<ul>
							<li>
								<a href="#">Profile</a>
							</li>
							<li>
								<a href="#">Player</a>
								<ul>
									<li>
										<a href="#">Volume</a>
									</li>
									<li>
										<a href="#">Equalizer</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</section>