Hi Graham,
I have edited the code so that it will remember what section you last opened, I have done this by saving a cookie when a menu is selected and I am looking to see if this cookie exists when the code is initialised. I have also added Id's to the top top level navigation so that these can be used to set the cookies, you can change these to what ever you like. Below is the complete page.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* Menu Navigation Styles */
#menu{
border:1px solid #000000;
}
#content #menu,#menu li ul{
list-style:none;
margin:0px;
}
#menu li,#menu li ul li{
padding:5px;
margin:0px;
}
#menu li{
background:#F0DFBE;
font-weight:bold;
color:#D98E16;
cursor:pointer;
padding-bottom:5px;
}
#menu li h4{
background:url(../img/arr_down.gif) no-repeat right;
font-size:11px;
}
#menu li.over h4{
background-image:url(../img/arr_right.gif);
}
#menu li a{
color:#D98E16;
text-decoration:none;
}
#menu li.over{
padding-bottom:0px;
}
#menu li ul{
display:block;
margin-top:5px;
}
#menu li.over ul{
display:none;
}
#menu li ul li{
background:#F7F2E4;
}
#menu li ul li a{
color:#636363;
font-weight:normal;
text-decoration:none;
}
#menu li ul li a:hover{
color:#636363;
text-decoration:underline;
}
</style>
<script language="JavaScript" type="text/javascript">
var Nav = {
Init : function(){
navRoot = document.getElementById('menu').getElementsByTagName('LI');
for(i=0; i<navRoot.length; i++){
//Check if the cookie value matches current id if so don't hide
if(Cookie.Read('section') != navRoot[i].id){
navRoot[i].className = 'over'; //Set default class
};
navRoot[i].onclick = Nav.Click; //Add Click event
};
},
Click : function(){
//Close all menus
for(i=0; i<navRoot.length; i++){
navRoot[i].className='over';
};
//Open clicked menu
this.className = '';
Cookie.Create('section', this.id, 5); //create open menu cookie save for 5 days
return false;
}
};
/*
General cookie function based on quirksmode examples
http://www.quirksmode.org/js/cookies.html
*/
var Cookie = {
Create : function(name, value, days){
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
},
Read : function(name){
var nameEQ = name.toLowerCase() + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i].toLowerCase();
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
Erase : function(){
this.Create(name, "", -1);
}
};
window.onload=Nav.Init;
</script>
</head>
<body>
<ul id="menu">
<li id="section1">
<h4>Menu Section 1</h4>
<ul>
<li><a href="#">Sublink 11</a></li>
<li><a href="#">Sublink 12</a></li>
<li><a href="#">Sublink 13</a></li>
<li><a href="#">Sublink 14</a></li>
</ul>
</li>
<li id="section2">Menu Section 2
<ul>
<li><a href="#">Sublink 21</a></li>
<li><a href="#">Sublink 22</a></li>
<li><a href="#">Sublink 23</a></li>
<li><a href="#">Sublink 24</a></li>
</ul>
</li>
<li id="section3"><a href="#">Menu Main Link</a></li>
<li id="section4">Menu Section 3
<ul>
<li><a href="#">Sublink 31</a></li>
<li><a href="#">Sublink 32</a></li>
<li><a href="#">Sublink 33</a></li>
<li><a href="#">Sublink 34</a></li>
</ul>
</li>
</ul>
</body>
</html>
Bookmarks