OK this is very rough and ready with a couple of bugs that I can’t track down, including it only works when clicking the black box to the left of the items, not the item it’s self.
The css is a mess, but I don’t have time to track these down but it will give you a good start.
1 Download the following 3 JS packages.
jquery -
http://jquery.com/
jquery cookie -
http://plugins.jquery.com/files/jquery.cookie.js.txt rename this one to jquery.cookie.js
jquery tree view -
http://jquery.bassistance.de/treeview/jquery.treeview.zip
the tree view will need to be unzipped and upload the entire folder
2 upload these files to assets/js (you may need to create the folder js under assets)
3 create a new template with the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="/assets/css/menus.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/assets/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/assets/js/jquery-treeview/jquery.treeview.min.js"></script>
<script type="text/javascript" src="/assets/js/asd.js"></script>
</head>
<body>
[Wayfinder? &startId=`2` &outerTpl=`engouter` &innerTpl=`inner`]
[Wayfinder? &startId=`9`&outerTpl=`gerouter` &innerTpl=`inner`]
[*content*]
</body>
</html>
you will need to replace the startid on each wayfinder call to match your own document ids
4 create a file called asd.js with the following content and upload this to the assets/js folder
$(document).ready(function(){
$("#treemenu-english").treeview({
persist: "location",
collapsed: true,
unique: true
});
$("#treemenu-german").treeview({
persist: "location",
collapsed: true,
unique: true
});
});
5 copy and paste the following into a file called menus.css
.treeview, .treeview ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
.treeview ul {
background-color: #680805;
margin-top:4px;
}
.treeview .hitarea {
background:#000 url(../../images/treeview-famfamfam.gif) no-repeat scroll -64px -25px;
cursor:pointer;
float:left;
height:16px;
margin-left:-16px;
width:16px;
}
* html .hitarea {
display:inline;
float:none;
}
.treeview li {
margin:0pt;
padding:3px 0pt 3px 16px;
}
.treeview a.selected {
background-color:#EEEEEE;
}
#treecontrol {
display:none;
margin:1em 0pt;
}
.treeview .hover {
color:red;
cursor:pointer;
}
.treeview li {
background:transparent url(../../images/treeview-red-line.gif) no-repeat scroll 0pt;
}
.treeview li.collapsable, .treeview li.expandable {
background-position:0pt -176px;
}
.treeview .expandable-hitarea {
background-position:-80px -3px;
}
.treeview li.last {
background-position:0pt -1766px;
}
.treeview li.lastCollapsable, .treeview li.lastExpandable {
background-image:url(../../images/treeview-famfamfam.gif);
}
.treeview li.lastCollapsable {
background-position:0pt -111px;
}
.treeview li.lastExpandable {
background-position:-32px -67px;
}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
background-position:0pt 50%;
}
and upload this to assets/css
6 create 3 chucks as follows
engouter
<ul id="treemenu-english"[+wf.classes+]>
[+wf.wrapper+]
</ul>
gerouter
<ul id="treemenu-german"[+wf.classes+]>
[+wf.wrapper+]
</ul>
inner
<ul[+wf.classes+]>
[+wf.wrapper+]
</ul>
You can see it running at
http://www.cww.org.uk/test.html
