I have a menu that I'd like to keep it's state across the site as opposed to one page and also want the ability to use multiple menus on a page.
Somehow I can't get the cookie to work at all even with one menu on a single page. Any ideas?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jCollapser Demo page</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu li ul').hide();
var cookieValue = $.cookie('menuCookie') || '';
$('#menu > li > h2').each(function(index) {
var $this = $(this), $checkElement = $this.next('ul');
if (cookieValue.indexOf((index)) > -1) {
$checkElement.show();
}
$this.click(function() {
if ($checkElement.is(':hidden')) {
$checkElement.slideDown();
cookieValue = cookieValue + index;
$.cookie('menuCookie', cookieValue);
} else {
$checkElement.slideUp();
cookieValue = cookieValue.replace(index,'');
$.cookie('menuCookie', cookieValue);
}
return false;
});
});
});
</script>
<style type="text/css">
.collapse {
background: transparent url('collapse.gif') no-repeat scroll 0% 0%;
height: 11px;
position: relative;
left: 120px;
width: 11px;
}
.expand {
background:transparent url('expand.gif') no-repeat scroll 0% 0%;
display:none;
height:11px;
position:relative;
width:11px;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<h2>About Us</h2>
<ul class="allLists">
<li><a href="showcase.html" title="Project showcase">Project showcase</a></li>
<li><a href="staff.html" title="Who We are">Who We are</a></li>
<li><a href="location.html" title="Location/Directions">Location/Directions</a></li>
<li><a href="javascript:;" title="IT WD staff access">IT WD staff access</a></li>
</ul>
</li>
<li>
<h2>IT Related Links</h2>
<ul class="allLists">
<li><a href="http://www.it.udel.edu/" title="IT Home">IT Home</a></li>
<li><a href="http://www.udel.edu/help/" title="IT Help">IT Help</a></li>
</ul>
</li>
</ul>
</body>
</html>