Set the state of a drop down menu in a cookie

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

Code:

<!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>
		<!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]-->
		<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>

Deanoo · 04-21-2005, 09:11 AM

Many thanks hemebond

will give it a try and let you know

Deanoo · 04-22-2005, 02:36 PM

hemebond,

excellent!!!

Thank you very much indeed.

Deanoo