Set the state of a drop down menu in a cookie [Archive]

Deanoo

04-20-2005, 05:11 PM

Hi all,

I would like to know if anyone can help me. I have created a javasript/CSS drop down menu that, when you click a menu header, a submenu appears. Click again and it dissapears. This is done using the CSS display attribute. The menu is shown on all pages in the site using a <!-- #file include.

When you click on a submenu item, the link takes you to the relevant page. The problem is that when the new page loads, the menu refreshes and all open sub menus close.

I would like to be able to save the state of the menu (i.e. what sub menus are showing), possibly as a session cookie, so that the user can navigate the site without having to open the menus on every page.

Is this possible?

And more importantly - can anyone give me a pointer on how to do it.

Unfortunately the site is on a restricted Intranet so I cannot give you a link. However, I can send the code to anyone who may be interested in helping.

Thanks in advance.

Deanoo

hemebond

04-20-2005, 10:18 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Q_21158909</title>

<style type="text/css">
ul {list-style-position:inside;padding-left:1em;}

li.closed {list-style-image:url("/images/icon_folder_closed.png");}
li.closed > ul {display:none;}
li.open {list-style-image:url("/images/icon_folder_open.png");}
li.open > ul {display:block;}

li {list-style-image:url("/images/icon_file.png");}
</style>
</head>
<body>
<ul id="directory">
<li><a href="" onclick="return false">Folder 1</a>
<ul>
<li><a href="" onclick="return false">Folder 1_1</a>
<ul>
<li><a href="">Item 1</a></li>
</ul>
</li>
<li><a href="" onclick="return false">Folder 1_2</a>
<ul>
<li><a href="">Item 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="" onclick="return false">Folder 2</a>
<ul>
<li><a href="" onclick="return false">Folder 2_1</a>
<ul>
<li><a href="">Item 1</a></li>
</ul>
</li>
<li><a href="" onclick="return false">Folder 2_2</a>
<ul>
<li><a href="">Item 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
var list = document.getElementById("directory").getElementsByTagName("ul");
for(var i = 0; i < list.length; i++)
{
if(String(list[i].parentNode.nodeName).toLowerCase() == 'li')
{
if(window.ie)
{
list[i].parentNode.onclick = open;
}
else
{
list[i].parentNode.addEventListener("click",open,true);
}

var reg = new RegExp("(?:\\W|\\s)" + i + "(?:\\W|\\s|$)","g");
if(String(document.cookie).search(reg) == -1)
{
list[i].open = false;
list[i].parentNode.className = 'closed';
if(window.ie) list[i].style.display = 'none';
}
else
{
list[i].open = true;
list[i].parentNode.className = 'open';
if(window.ie) list[i].style.display = '';
}
}
}

function open(e)
{
if(window.ie)
{
window.event.cancelBubble = true;
}
else
{
e.stopPropagation();
e.preventDefault;
}

var i;
for(i = 0; i < list.length; i++)
{
if(window.ie)
{
if(list[i] == this.getElementsByTagName('ul')[0])
{
break;
}
}
else
{
if(list[i] == e.target.getElementsByTagName('ul')[0])
{
break;
}
}
}

list[i].open = (list[i].open) ? false : true;
list[i].parentNode.className = list[i].open ? 'open' : 'closed';
if(window.ie)
{
list[i].style.display = list[i].open ? '' : 'none';
}

write_cookie();
}

function write_cookie()
{
var str = '';
for(var i = 0; i < list.length; i++)
{
if(list[i].open)
{
if(str.length > 0)
{
str += ',';
}
str += i;
}
}
document.cookie = "open_folders=" + str;
}
</script>
</html>