er wordt een cookie ingesteld die onthoud welke menu-items geopend waren en welke gesloten. De volgende keer als je dus op de site komt, zijn dezelfde mappen van het menu dus gesloten en dezelfde mappen geopend als de vorige keer.
wat ik eigenlijk wil:
als je bij een bezoek aan de website map 1 wilt openen, en vervolgens map2, moeten beide mappen open zijn/blijven. echter bij een nieuw bezoek op de site wil ik dat alle mappen weer gesloten zijn.
de onderstaande code werkt dus prima, alleen ik wil bij een body onload, dus een volledig collapsed menu en geen expanded.
Ik zie alleen niet zo snel waar ik het zou moeten aanpassen, ben nl totaal niet bekend met javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Modules</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#treeMenu, #treeMenu ul {
list-style-type: none;
background: url(modules/tree-branch.gif) repeat-y;
padding: 0;
padding-left: 10px;
margin: 0;
}
#treeMenu li {
padding: 0px;
padding-left: 3px;
margin: 2px 0px 2px 0px;
background: url(modules/tree-leaf.gif) no-repeat;
}
#treeMenu a {
text-decoration: none;
color: black;
padding: 0px 4px 0px 15px;
background: url(modules/folder_grey.png) no-repeat;
margin: 2px 0px 2px 0px;
height: auto;
}
* > #treeMenu a:hover {
filter: alpha(opacity=50);
-moz-opacity:.50;
}
#treeMenu .itemOpen {
background: url(modules/tree-node-open.gif) no-repeat;
}
#treeMenu .itemOpenEnd {
background: white url(modules/tree-node-open-end.gif) no-repeat;
}
#treeMenu .itemOpen ul, #treeMenu .itemOpenEnd ul {
display: block;
}
#treeMenu .itemOpen a, #treeMenu .itemOpenEnd a {
background: url(modules/folder_grey_open.png) no-repeat;
}
#treeMenu .itemClose {
background: url(modules/tree-node.gif) no-repeat;
}
#treeMenu .itemCloseEnd {
background: white url(modules/tree-node-end.gif) no-repeat;
}
#treeMenu .itemClose ul, #treeMenu .itemCloseEnd ul {
display: none;
}
#treeMenu .itemClose a, #treeMenu .itemCloseEnd a {
background: url(modules/folder_grey.png) no-repeat;
}
#treeMenu li.endItem {
background: white url(modules/tree-leaf-end.gif) no-repeat;
}
#treeMenu .item a {
background: url(modules/ascii.png) no-repeat;
padding-right: 2px;
}
#treeMenu #treeMenuSelect a {
border: 1px dotted gray;
background-color: #e2e2e2;
}
.smallblacktext {
font-family: calibri, verdana, sans-serif;
font-size: 9pt;
color: #000000;
font-weight: normal;
text-decoration: none;
}
/**
* Defenitions for the icons
*/
#treeMenu .home a {
background: url(modules/home.png) no-repeat;
}
#treeMenu .home li a {
background: url(modules/html.png) no-repeat;
}
#treeMenu .history a, #treeMenu .home .history a {
background: url(modules/history.png) no-repeat;
}
#treeMenu .gear a {
background: url(modules/gear.png) no-repeat;
}
#treeMenu .gear li a {
background: url(modules/ascii.png) no-repeat;
}
</style>
<script type="text/javascript">
//<![CDATA[
/**
* cssTreeMenu
* Author: E. Vlieg - Flydesign.nl
*/
/**
* Create the + and - items in the menu and find the selected node
*/
onload = function(){
makeMenu(document.getElementById('treeMenu'));
// Find the selected node and open all the parent menus
if(document.getElementById('treeMenuSelect')){
openParentNode(document.getElementById('treeMenuSelect'));
}
}
/**
* Save the last state so we can show the current state the next time
*/
onunload = function(){
saveState();
}
var aTreeMenu = new Array();
var makeMenuParentsOpenMenu = true;
/**
* Save the last state in a cookie with the format "i-i-i"
* Where i is an integer which matches the number of the submenu that is currently open
*/
function saveState(){
var aCookie = new Array();
for(var i = 0; i < aTreeMenu.length; i++){
if(aTreeMenu[i].className.indexOf("itemOpen") != -1)
aCookie[aCookie.length] = i;
}
var sCookie = "treeMenuState="+escape(aCookie.join("-"));
document.cookie = sCookie;
}
/**
* Run through the given list and check if a li node contains a ul node.
* If this is true, create a clickable node to expand the ul
* @param object oTree
*/
function makeMenu(oTree){
var oChilds = oTree.childNodes;
var bLast = false;
var aLastState = getCookie("treeMenuState").split("-");
// Iterate through every child
for(var i=oChilds.length-1; i >= 0; i--){
// Create a new submenu when the li element contains a ul element
if(oChilds[i].nodeName == "LI" && hasSubmenu(oChilds[i])){
// If this is the last node, give it a different class
var sClassName = (arrayContains(aLastState, aTreeMenu.length))? " itemOpen" : " itemClose";
if(!bLast){
oChilds[i].className += sClassName + "End";
bLast = true;
} else
oChilds[i].className += sClassName;
aTreeMenu[aTreeMenu.length] = oChilds[i];
// If the boolean is set and the href of the firstChild A is '#'
// the item opens and closes the menu
if(makeMenuParentsOpenMenu && oChilds[i].firstChild.nodeName == "A"){
if(oChilds[i].firstChild.href == location.href.replace("#","")+"#"){
oChilds[i].firstChild.href="javascript:void(0);";
oChilds[i].firstChild.onclick = function(event){
if(!event){
event = window.event;
oObj = event.srcElement.parentNode;
} else
oObj = event.target.parentNode;
event.cancelBubble = true;
switchClassname(oObj);
};
}
}
// Register the event handler for this node
oChilds[i].onclick = function(event){
if(!event){
event = window.event;
oObj = event.srcElement;
} else
oObj = event.target;
event.cancelBubble = true;
switchClassname(oObj);
};
} else if(oChilds[i].nodeName == "LI") {
oChilds[i].className = "item " + oChilds[i].className;
// If this is the last node, give it an extra class
if(!bLast){
oChilds[i].className += " endItem";
bLast = true;
}
}
}
}
/**
* Switch the classname of an object
* @param object oObj
*/
function switchClassname(oObj){
if(oObj.className.indexOf("itemOpen") != -1){
oObj.className = oObj.className.replace("itemOpen", "itemClose");
} else if(oObj.className.indexOf("itemClose") != -1) {
oObj.className = oObj.className.replace("itemClose", "itemOpen");
}
}
/**
* Checks if a list object contains a ul object
* @param object oList
* @return boolean
*/
function hasSubmenu(oList){
var oMenuChilds = oList.childNodes;
var bHasList = false;
// Iterate through all the child nodes and search for a ul tag
for(var j = 0; j < oMenuChilds.length; j++){
if(oMenuChilds[j].nodeName == "UL") {
makeMenu(oMenuChilds[j]);
bHasList = true;
}
}
return bHasList;
}
/**
* Finds the parent menu in which this item is placed and opens the menu
* @param object oItem
*/
function openParentNode(oItem){
if(oItem.parentNode.nodeName == "UL" && oItem.parentNode.parentNode.nodeName == "LI"){
oMenu = oItem.parentNode.parentNode;
oMenu.className = oMenu.className.replace("itemClose", "itemOpen");
openParentNode(oMenu);
}
}
/**
* Returns the value of the cookie with the given name
* @param string name
* @return string
*/
function getCookie(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var a = cookies[i].split("=");
if (a.length == 2) {
if (a[0] == name) {
return unescape(a[1]);
}
}
}
return "";
}
/**
* Checks if the needle exists in the haystack
* @param array aSrc
* @param string sNeedle
* @return boolean
*/
function arrayContains(aHayStack, sNeedle){
for (var i = 0; i < aHayStack.length; i++) {
if (aHayStack[i] == sNeedle)
return true;
}
return false;
}
//]]>
</script>
</head>
<body>
