View Full Version : Cookies for aqtree3clickable menu

01-07-2007, 03:31 PM
Can anyone point me in the right direction here? I want to add cookie function to this menu so that when the user changes pages, the menu remains expanded exactly how they have clicked.

The menu will be an include on every page of the site via php.

I have tried several different ways, and it turns out I just dont know enough javascript, I just can't wrap my head around it for some reason. :confused:

I got the code below from here: http://kryogenix.org/code/browser/aqlists/


Converts an unordered list to an explorer-style tree, with clickable

To make this work, simply add one line to your HTML:
<script type="text/javascript" src="aqtree3clickable.js"></script>

and then make the top UL of your nested unordered list of class

That's it. No registration function, nothing.


Stuart Langridge, November 2002

Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/) and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)


addEvent(window, "load", makeTreesC);

function makeTreesC() {
// We don't actually need createElement, but we do
// need good DOM support, so this is a good check.
if (!document.createElement) return;

uls = document.getElementsByTagName("ul");
for (uli=0;uli<uls.length;uli++) {
ul = uls[uli];
if (ul.nodeName == "UL" && ul.className == "aqtree3clickable") {

function processULELC(ul) {
if (!ul.childNodes || ul.childNodes.length == 0) return;
// Iterate LIs
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
var item = ul.childNodes[itemi];
if (item.nodeName == "LI") {
// Iterate things in this LI
var a;
var subul;
subul = "";
for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
var sitem = item.childNodes[sitemi];
switch (sitem.nodeName) {
case "A": a = sitem; break;
case "UL": subul = sitem;
if (subul) {
} else {
a.parentNode.className = "aq3bullet";

function associateELC(a,ul) {
if (a.parentNode.className.indexOf('aq3open') == -1)
a.parentNode.className = 'aq3closed';
a.onclick = function () {
this.parentNode.className = (this.parentNode.className=='aq3open') ? "aq3closed" : "aq3open";
return false;

/* Utility functions */

function addEvent(obj, evType, fn){
/* adds an eventListener for browsers which support it
Written by Scott Andrew: nice one, Scott */
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;

Here's how the menu currently assigns classes:

<div id="leftnav">
<ul class="aqtree3clickable">
<li><a href="#">Home</a>
<li><a href="template_copy(1).html">Blank Banners</a>
<li class= "aq3open"><a href="http://www.alistapart.com">Stock Banners</a>
<li><a href="http://www.alistapart.com">Economy</a>
<li><a href="http://www.alistapart.com/stories/phpswitch/">Premium</a></li>
<li class="aq3open"><a href="http://simon.incutio.com">Custom Banners</a>
<li><a href="http://simon.incutio.com">Economy</a>
<li><a href="http://simon.incutio.com/categories/dhtml/">Premium</a>
<li class="aq3open"><a href="#">Pole Banners</a>
<ul class="aqtree3clickable">
<li><a href="#">Stock</a></li>

Again any help would help me sleep again!