|
|
Java menu script>Menu Make>Smart
Folding Menu Tree Script
|
Description: A
folding menu tree that contains links and sublinks. Click on the folder icon to expand it.
Browsers apart from IE 4+ or NS6+ will see the tree fully expanded (degrades well). The
menu supports arbitrary nesting of sub-lists, and uses session cookies to give it
persistance. In the past, whenever you opened a folder and clicked a link inside, when you
returned, the folder reverts back to its initial, closed state. What a waste of time of
having to reopen the folder(s) each time you return to view the links inside. Using
cookies, this "smart" folder script will actually remember the state of the
folder tree when you navigate to another page, so when you come back, it will look just
the way you had remembered it to be. If you can't appreciate this feature, you can bet
your surfers will!
Note: This persistance feature is only visible in, obviously, cookie enabled IE 4
browsers. |
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script><font face="Verdana">
<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.news.bbc.co.uk">BBC
News</a></li>
</ul>
<li id="foldheader">Webmaster</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">Dynamic
Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript
Kit</a></li>
<li><a
href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>
<li id="foldheader">Nested Example</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">outer
1</a></li>
<li><a href="http://www.dynamicdrive.com">outer
2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">nested
1</a></li>
<li><a href="http://www.dynamicdrive.com">nested
2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer
3</a></li>
<li><a href="http://www.dynamicdrive.com">outer
4</a></li>
</ul>
</ul>
</font>
<p align="center"><font face="Arial"
size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic
Drive</a></font></p>
<script language="JavaScript1.2">
<!--
function get_cookie(Name) {
//Get cookie routine by Shelley Powers
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
var foldercontentarray=new Array()
var c=0
if (ns6){
for (i=0;i<document.getElementsByTagName("UL").length;i++){
if (document.getElementsByTagName("UL")[i].id=="foldinglist"){
foldercontentarray[c]=document.getElementsByTagName("UL")[i]
c++
}
}
}
if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(" ")
for (i=0 ; i < openresults.length ; i++){
if (ns6){
foldercontentarray[openresults[i]].style.display=''
foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(open.gif)"
}
else{
foldinglist[openresults[i]].style.display=''
document.all[foldinglist[openresults[i]].sourceIndex
-1].style.listStyleImage="url(open.gif)"
}
}
}
if (ns6||ie4){
var nodelength=ns6? c-1 : foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}
function checkit(){
for (i=0 ; i <= nodelength ; i++){
if
((ns6&&foldercontentarray[i].style.display=='')||(ie4&&foldinglist[i].style.display==''))
openones=openones + " " + i
}
document.cookie=window.location.pathname+"="+openones
}
if (ns6||ie4)
window.onunload=checkit
//-->
</script> |
|
|
|
|
