To se dá pohodlně řešit přes cookies. Tady máš skript pro menu s libovolným počtem úrovní(z toho důvodu je tam i plugin $.getPath(), kterým se zjistí selektor poslední otevřené větve pro uložení do cookies):
Kód:
<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>
Menu
</title>
<meta charset='utf-8' />
<script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script>
// Práce s cookies
cookies = {
/**
* Nastaví cookie
*
* @param name Jméno
* @param value Hodnota
* @param expiration Počet dní pro uchování cookie(nepovinný)
*/
set: function(name, value, expiration) {
var date = new Date();
date.setDate(date.getDate() + expiration);
expiration = !expiration ? '' : ';expires=' + date.toUTCString();
document.cookie = name + '=' + escape(value) + expiration;
},
/**
* Vrací hodnotu cookie
*
* @param name Jméno
*/
get: function(name) {
if (document.cookie.length) {
var start = document.cookie.indexOf(name + '=');
if (start != -1) {
start += name.length + 1;
end = document.cookie.indexOf(';', start);
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(start, end));
}
}
return null;
}
};
/**
* Vrací selektor prvku
*/
jQuery.fn.getPath = function () {
if (this.length != 1)
throw '$.getPath: Musí být předán přesně jeden element.';
var path, node = this;
while (node.length) {
var
realNode = node[0]
name = (
realNode.localName ||
realNode.tagName ||
realNode.nodeName
);
if (!name || name == '#document')
break;
name = name.toLowerCase();
if (realNode.id)
return name + '#' + realNode.id + (path ? '>' + path : '');
else if (realNode.className)
name += '.' + realNode.className.split(/\s+/).join('.');
var
parent = node.parent(),
siblings = parent.children(name);
if (siblings.length > 1)
name += ':eq(' + siblings.index(node) + ')';
path = name + (path ? '>' + path : '');
node = parent;
}
return path;
};
// Inicializace menu
$(function () {
// Procházení kategorií
$('.menu').on('click', 'a', function() {
var
$menu = $(this),
$submenu = $menu.next('ul');
if ($submenu.length) {
if ($submenu.is(':visible')) {
$submenu
.find('ul')
.slideUp();
cookies.set('menu', $submenu.closest('ul').getPath());
}
else
cookies.set('menu', $submenu.getPath());
$submenu
.slideToggle()
.parent()
.siblings()
.find('ul')
.slideUp();
}
});
// Rozevření poslední struktury menu
var menu = cookies.get('menu');
if (menu) {
var $menu = $(menu);
while (!$menu.is('.menu')) {
$menu = $menu
.slideDown(0)
// .closest('ul') - closest z nějakého důvodu v 1.7 nefunguje správně
.parent()
.parent();
}
cookies.set('menu', '');
}
});
</script>
<style>
.menu li ul {
display: none;
}
</style>
</head>
<body>
<ul class='menu'>
<li>
<a href='#'>
menu 1
</a>
<ul>
<li>
<a href='#'>
menu 1 1
</a>
<ul>
<li>
<a href='#'>
menu 1 1 1
</a>
</li>
<li>
<a href='#'>
menu 1 1 2
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
menu 1 2
</a>
<ul>
<li>
<a href='#'>
menu 1 2 1
</a>
</li>
<li>
<a href='#'>
menu 1 2 2
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>
menu 2
</a>
<ul>
<li>
<a href='#'>
menu 2 1
</a>
</li>
<li>
<a href='#'>
menu 2 2
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
menu 3
</a>
<ul>
<li>
<a href='#'>
menu 3 1
</a>
</li>
<li>
<a href='#'>
menu 3 2
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
