Web Analytics Made Easy -
StatCounter expand/collapse menu help - CodingForum

Announcement

Collapse
No announcement yet.

expand/collapse menu help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • expand/collapse menu help

    I am using this code on my site, and this is pretty much a really stupid question, but I can't for the life of me figure out how to make it closed automatically. As in, closed on the site load, and you have to click on the link/image to open it, rather than it being open on load, and click to close it.

    http://www.dhtmlshock.com/site-navig...nu/default.asp

    Thanks.

  • #2
    You mean you want it to stay open/closed even when the user goes to another page? You would have to use cookies (or some sort of URL hackery). Here's something I'd done a while ago.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>Q_21155737</title>
    		<style type="text/css">
    			ul	{list-style-position:inside;padding-left:1em;}
    
    			li.closed		{list-style-image:url("/images/icon_folder_closed.png");}
    			li.closed > ul	{display:none;}
    			li.open			{list-style-image:url("/images/icon_folder_open.png");}
    			li.open > ul	{display:block;}
    
    			li	{list-style-image:url("/images/icon_file.png");}
    		</style>
    	</head>
    	<body>
    		<ul id="directory">
    			<li><a href="">Folder 1</a>
    				<ul>
    					<li><a href="">Folder 1_1</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    					<li><a href="">Folder 1_2</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li><a href="">Folder 2</a>
    				<ul>
    					<li><a href="">Folder 2_1</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    					<li><a href="">Folder 2_2</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    		</ul>
    
    		<script type="text/javascript">
    			var list = document.getElementById("directory").getElementsByTagName("ul");
    			for(var i = 0; i < list.length; i++)
    			{
    				if(String(list[i].parentNode.nodeName).toLowerCase() == 'li')
    				{
    					list[i].parentNode.addEventListener("click",open,true);
    
    					var reg = new RegExp("(?:\\W|\\s)" + i + "(?:\\W|\\s|$)","g");
    					if(String(document.cookie).search(reg) == -1)
    					{
    						list[i].open = false;
    						list[i].parentNode.className = 'closed';
    					}
    					else
    					{
    						list[i].open = true;
    						list[i].parentNode.className = 'open';
    					}
    				}
    			}
    
    			function open(e)
    			{
    				e.stopPropagation();
    				e.preventDefault;
    
    				var i;
    				for(i = 0; i < list.length; i++)
    					if(list[i] == e.target.getElementsByTagName("ul")[0])
    						break;
    
    				list[i].open = (list[i].open) ? false : true;
    				list[i].parentNode.className = list[i].open ? 'open' : 'closed';
    
    				write_cookie();
    			}
    
    			function write_cookie()
    			{
    				var str = '';
    				for(var i = 0; i < list.length; i++)
    				{
    					if(list[i].open)
    					{
    						if(str.length > 0)
    						{
    							str += ',';
    						}
    						str += i;
    					}
    				}
    				document.cookie = "open_folders=" + str;
    			}
    		</script>
    	</body>
    </html>
    There's seems to be a problem with the icons though. I'll try and work it out.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

    Comment

    Working...
    X