Smart Folding Menu Tree Script

**iam_ames** · 04-14-2005, 02:58 PM

In the script mentioned in the subject i notice the folders start so far in to the screen. what i mean is there is a space between the left most edge of the page and where the folder starts. Is there a way of getting rid of this space? I have no margins on my page. it just seems to want to put the folders there and i cant see anywhere in the code where its telling it to do that.

Also the subfolders start very far along meaning the width of the overall tree is very large. is there a way of reducing this?

Sorry but i'm pretty much new to all of this.

Hope someone can help me.

Andrew

**jscheuer1** · 04-15-2005, 05:02 AM

Let me guess, using NS7.2 or FF? Anyways, try this style:

Code:

<style>
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif);}
#foldinglist{list-style-image:url(list.gif);
position:relative!important;position:auto;left:-18;}
body{margin:0}
ul {margin-left:0!important;margin-left:25px}
</style>

What browser are you using?

**iam_ames** · 04-15-2005, 07:05 AM

Thankyou so much that worked a treat!

I have another query but im pretty sure of the answer (being a big fat no)

is it easy to modify this code so that when one level is opened, the level that is currently open is closed? I know there is another tree on your site that does this but i was just wondering if it was possible to make this tree do it, and if so how difficult is it? bearing in mind im a newbie and i suck

thanks again

**jscheuer1** · 04-15-2005, 07:38 AM

Actually, it is a small thin 'no'. I'll have to think about it. Someone else might see it right away but, check my tagline at the bottom right. I'm not familiar with this code. It is interesting though.

**jscheuer1** · 04-17-2005, 02:24 AM

The more I played with this one the more difficult it appeared. I essentially 'gave up' when NS7.2 appeared to be ignoring its own conventions. The script relies heavily upon child and parent node elements of the tags involved. There must be a way but, since this is my first foray into that realm, when I realized that the Switch Menu does essentially what you want already, just without the cool opening and closing folders, that I'd give that a crack. So far so good, still working on it though.

**jscheuer1** · 04-18-2005, 04:51 PM

OK, I gave up on the Smart Folding Menu Tree Script for this and instead used the Switch Menu, adding folders and the capability for 1 nested level. Here is a demo (uses same folder images as Smart Fold):

Code:

<html><head>
<title>Switch Menu - w/folders Demo</title>
<style type="text/css">

.pictitle{
font-family:verdana;
font-size:normal;
font-weight:bold;
padding:0 0 1em 0.5em;
}

.hdpic {
position:relative;
top:2px
}

img.lst {
margin:0 .5em 0 1em;
position:relative;
top:4px
}

img.ssub{
margin:0 0 0 1em;
position:relative;
top:2px
}

#ssub{
margin:0 .5em 0 1.5em;
}

.submenu{
padding-bottom: 0.5em;
font-family:verdana;
font-size:.9em;
}

.ssubmenu{
margin-bottom: 0.5em;
font-family:verdana;
font-size:1em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script w/folders & 1 nested level added
* Original script by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
* Modified by John Davenport Scheuer for folders and 1 level of nesting
* Visit http://www.dynamicdrive.com/forums/showthread.php?p=8034#post8034
* for full Modified source - user name: jscheuer1
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="local" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('.ssubmenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var elpic = document.getElementById(obj+'pic');
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
	var arpic = document.getElementById("masterdiv").getElementsByTagName("img"); //jds
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			for (var i=0; i<arpic.length; i++){
				if (arpic[i].className!=='lst') {//jds
				if (arpic[i].className!=='ssub') //jds
				arpic[i].src = "fold.gif";
			}			
			}
			el.style.display = "block";
			if (elpic)
			elpic.src = "open.gif";
		}else{
			el.style.display = "none";
			if (elpic)			
			elpic.src = "fold.gif";
		}
	}
}

function SwitchsubMenu(obj){
	if(document.getElementById){
	var selpic = document.getElementById(obj+'pic');
	var sel = document.getElementById(obj);
	var sar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
	var sarpic = document.getElementById("masterdiv").getElementsByTagName("img"); //jds
		if(sel.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<sar.length; i++){
				if (sar[i].className=="ssubmenu") //DynamicDrive.com change
				sar[i].style.display = "none";
			}
			for (var i=0; i<sarpic.length; i++){
				if (sarpic[i].className=='ssub') //jds
				sarpic[i].src = "fold.gif";			
			}
			sel.style.display = "block";
			selpic.src = "open.gif";
		}else{
			sel.style.display = "none";
			selpic.src = "fold.gif";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!=""){
document.getElementById(cookievalue).style.display="block"
document.getElementById(cookievalue+'pic').src="open.gif"
}
}
if (persistmenu=="yes"){
var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
var scookievalue=get_cookie(scookiename)
if (scookievalue!=""){
document.getElementById(scookievalue).style.display="block"
document.getElementById(scookievalue+'pic').src="open.gif"
}
}
}

function savemenustate(){
var inc=1, blockid=""
var sinc=1, sblockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
while (document.getElementById("ssub"+sinc)){
if (document.getElementById("ssub"+sinc).style.display=="block"){
sblockid="ssub"+sinc
break
}
sinc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
var scookievalue=(persisttype=="sitewide")? sblockid+";path=/" : sblockid
document.cookie=scookiename+"="+scookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
</head>

<body leftmargin="10" marginwidth="10">


<!-- Keep all menus within masterdiv-->
<!-- Uncomment Below for centered Menu -->
<!--div style="text-align:left;margin:50px 40% 0 40%;overflow:visible;" id="masterdiv"-->
<!-- Comment Below for centered Menu -->
<div id="masterdiv">
<nobr>

<!--Header for 1st sub Menu-->
	<img class="hdpic" id="sub1pic" src="fold.gif" onclick="SwitchMenu('sub1')"><span class="pictitle">- Site Menu</span><br><!--End 1st sub Menu Header-->
	<span class="submenu" id="sub1"><!--This tag begins 1st sub Menu's items-->
<!--1st nested header-->
	<img class="ssub" id="ssub1pic" src="fold.gif" onclick="SwitchsubMenu('ssub1')"><span class="pictitle">- What's New</span><br>
            <span class=ssubmenu id=ssub1><!--begin 1st nested items-->
                  <img id="ssub" class="lst" src="list.gif"><a href="http://www.statestreetblues.com/">State Street Blues Stroll!</a><br>
                  <img id="ssub" class="lst" src="list.gif"><a href="http://www.mediajazzbynight.com/">Media Jazz by Night!</a><br>
            </span><!--end 1st nested items-->
	<img class="ssub" id="ssub2pic" src="fold.gif" onclick="SwitchsubMenu('ssub2')"><span class="pictitle">- Search</span><br>
            <span class=ssubmenu id=ssub2>
                  <img id="ssub" class="lst" src="list.gif"><a href="http://www.yahoo.com/">Yahoo!</a><br>
                  <img id="ssub" class="lst" src="list.gif"><a href="http://www.google.com/">Google</a><br>
            </span>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/hot.htm">What's hot</a><br>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/revised.htm">Revised Scripts</a><br>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/morezone/">More Zone</a><br>
	</span><!--End 1st sub Menu items-->

	<img class="hdpic" id="sub2pic" src="fold.gif" onclick="SwitchMenu('sub2')"><span class="pictitle">- FAQ/Help</span><br>
	<span class="submenu" id="sub2">
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/notice.htm">Usage Terms</a><br>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/faqs.htm">DHTML FAQs</a><br>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/help.htm">Scripts FAQs</a><br>
	</span>

	<img class="hdpic" id="sub3pic" src="fold.gif" onclick="SwitchMenu('sub3')"><span class="pictitle">- Help Forum</span><br>
	<span class="submenu" id="sub3">
		<img class="lst" src="list.gif"><a href="http://www.codingforums.com">Coding Forums</a><br>
	</span>
	
	<img class="hdpic" id="sub4pic" src="fold.gif" onclick="SwitchMenu('sub4')"><span class="pictitle">- Cool Links</span><br>
	<span class="submenu" id="sub4">
		<img class="lst" src="list.gif"><a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
		<img class="lst" src="list.gif"><a href="http://www.freewarejava.com">Freewarejava</a><br>
		<img class="lst" src="list.gif"><a href="http://www.cooltext.com">Cool Text</a><br>
	</span>

	<img class="hdpic" id="sub5pic" src="fold.gif" onclick="SwitchMenu('sub5')"><span class="pictitle">- About</span><br>
	<span class="submenu" id="sub5">
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
	</span>

</nobr></div>
</body></html>

Thread: Smart Folding Menu Tree Script

Thread Tools

Search Thread

Smart Folding Menu Tree Script

It works!

Bookmarks

Bookmarks

Posting Permissions