Karl Swedberg wrote:
: On my test page (http://test.learningjquery.com/cookie-menu.html), I
: put a link to another page with the same script and menu so you can
: see the persistence of the expand/collapse state.
Never being able to leave well enough alone and having a little time
on my hands, I squeezed the cookie information into a separate object.
By calling an instance of it (using new) we can easily have multiple
menus on a page.
Here is the beginning of the cookieMenu code:
$.fn.cookieMenu = function(cookieName){
var $topLevel = this.find('li ul');
$topLevel.hide();
var menuCookie = new $.cookie.menu(cookieName);
menuCookie.showCookie();
Using a cookie object reduced the size of each click function. The
bigIndex() function is a private method of the $.cookie.menu object.
var $this = $(this), $checkElement = $this.next('ul');
if ( menuCookie.isOpen(index) ) {
$checkElement.show();
}
$this.click(function() {
if ($checkElement.is(':hidden')) {
$checkElement.slideDown();
menuCookie.open(index);
} else {
$checkElement.slideUp();
menuCookie.close(index);
}
menuCookie.showCookie();
return false;
});
I also made calling the menus little simpler. It assumes the
structure of the menu is a simple unordered list of lists like we have
been using.
<script type="text/javascript" src="/site/code/jquery.cookie.js"></script>
<script type="text/javascript"
src="/site/code/jquery.cookie-menu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu-1').cookieMenu('cookie-1');
$('#menu-2').cookieMenu('cookie-2');
});
</script>
There are three menus on my test page. The top menu is the same on
both pages while the bottom one on each page use different cookies.
http://www.clarksonenergyhomes.com/demos/jq/cookie-menu.html
HTH,
Charles K. Clarkson
--
Mobile Homes Specialist
Free Market Advocate
Web Programmer
254 968-8328
http://www.clarksonenergyhomes.com/wordpress/about/
