Jquery slide menue master
Ein anderes Menü was klein ist aber viel rein passt-
Download-archiv
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery Sliding Menu Plugin</title>
<style>
/* style */
*,
*:before,
*:after { border-radius: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; outline: none; padding: 0; }
body { background: #FFF; color: #2C3E50; cursor: default; font: 300 1.4em/1 'Helvetica Neue', Arial, sans-serif; }
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; }
a:hover { color: #1ABC9C; }
h1 { font-weight: 300; }
h2 { font-weight: 300; margin: 3em 0 1em 0; }
p { margin: 2em 0; }
pre { background: #34495E; color: #ECF0F1; line-height: 1.4; padding: 2em; tab-size: 4; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th,
td { font-weight: 300; line-height: 1; padding: 1em; text-align: left; vertical-align: middle; }
tbody th { font-family: 'Consolas', monospace; }
tbody tr:nth-child(2n+1) { background: #ECF0F1; }
header,
section,
footer { margin: 5em auto; max-width: 90%; width: 40em; }
#social { margin: 1rem auto; overflow: hidden; }
#github,
#tweet { float: left; }
footer { background: #7F8C8D; color: #BDC3C7; font-size: 1rem; margin: 0; max-width: 100%; padding: 2em; text-align: center; width: 100%; }
footer a { color: #ECF0F1; }
/* menu */
#menu { background: #7F8C8D; }
#menu a { color: #FFF; }
/* responsive */
@media (max-width: 64rem) {
body { font-size: 1em; }
h2 { margin-top: 2em; }
}
/*
*
* jQuery Sliding Menu Plugin
* Mobile app list-style navigation in the browser
*
* Written by Ali Zahid
* http://designplox.com/jquery-sliding-menu
*
*/
.sliding-menu { overflow: hidden; position: relative; }
.sliding-menu ul { float: left; margin: 0; }
.sliding-menu li { list-style: none; margin: 0; }
.sliding-menu a { display: block; padding: 1em; }
.sliding-menu a:hover { background: #333; color: #FFF; }
.sliding-menu a.nav:before { content: '\3009'; float: right; margin-left: 1em; }
.sliding-menu a.back { background: #555; color: #FFF; }
.sliding-menu a.back:before { content: '\3008'; float: left; margin-right: 1em; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
/*
*
* jQuery Sliding Menu Plugin
* Mobile app list-style navigation in the browser
*
* Written by Ali Zahid
* http://designplox.com/jquery-sliding-menu
*
*/
(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>
</head>
<body>
<header>
<h1>jQuery Sliding Menu</h1>
<p>The creatively named, mobile-like, list-style, responsive sliding navigation menu</p>
</header>
<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>
<section>
<h2>Usage</h2>
<pre>$('#selector').menu(options);</pre>
</section>
<section>
<h2>Options</h2>
<table>
<tbody>
<tr>
<th>dataJSON</th>
<td>false</td>
<td>A JSON object to build the menu from. View sample <a href="https://gist.github.com/alizahid/10833297">here</a>.</td>
</tr>
<tr>
<th>backLabel</th>
<td>'Back'</td>
<td>Label for the back button. Set to <em>true</em> to use the link's own label.</td>
</tr>
</tbody>
</table>
</section>
<footer>
Developed and maintained by <a href="//twitter.com/alizahid0">Ali Zahid</a> under the <a href="http://opensource.org/licenses/MIT">MIT license</a>
</footer>
</body>
</html>