Collapsing Css Menu

**wampthing** · April 14, 2006

the photo section of my website is getting too larg for the current way I have the menu set up.

I am looking for a way to have the menu show only the years until clicked. Once a year has been clicked I want to see only the months for that year. Is there a good way to do that. I have seen CSS nav menus, but not what I am looking for.

Any ideas?

**TCH-Bruce** · April 14, 2006

Check out this one

**wampthing** · April 14, 2006

It looks like that is going to work great. THanks!

My only question has to do with the JavaScript.

All my photos have the nav as the include. I need to reference the JS file in the header. The include doesnt have a header. Does that mean that I nave to go into each of my documents and add it?

I guess the easiest way is to do a search and replace type of function does that sound right?

**wampthing** · April 15, 2006

Ok Got it working.

I had gone and added the JS in the header of the files the nav was being included in. I dont know if I needed to do that as the only way for me to get it to work was to include the WHOLE html document (<header>,<body> CSS and all).

It sems to work great on Firefox, IE and Opera.

Check it out and let me know what you think!

www.myjensen.com/photos/

**TCH-Don** · April 15, 2006

Dave it looks great!

**Kevan** · April 15, 2006

Dave,

It looks great in FF

I am getting unexpected results though.

I see the correct menu of years only. When I click a year the available months appear below it as expected.

What I didn't expect to happen is the menu fully expanding when I click a month. While the photos are loading all years and all months are displayed on the menu (everything expanded). Then, Once the last photo of the month completes loading, the menu totally collapses. Had the year I clicked remained open it would not have been so obvious. On months with few photos you don't notice it, it's the months with a ful page of photos to load that leaves it open long enough to notice.

I had expected only the year I selected to stay expanded.

I don't know about these things yet but I'd like to learn something if I can discuss it a monent.... Could you use frames here? Put the menu in a separate frame and the pictures in another? By doing that would it then leave the menu in the same state with each click? (I mean the page would not completely reload with every click on a month, thus resetting the menu state.) I don't know if it's a good idea to use frames anymore, I'm just wondering out loud so to speak)

Thanks for sharing

**wampthing** · April 15, 2006

Ive noticed the same thing, and I am not sure why that happens. I wish there was a way to have the year that I selected stay open, but I don't know how. If anyone has Ideas I would love to hear them.

I had used frames previously and miss that aspect of it. I do wish that the side menu would stay in a similar state as well.

Id like to find a solution other than frames though.....

**TCH-Bruce** · April 15, 2006

Dave looks good but I am seeing the same results. I found a few other methods to do the same thing by googling for "css collapsable menu".

**jayson** · April 15, 2006

I editted to fit my needs, it works great as a .html file, but when I try to incorperate it into a .PHP, it all works except that the menus do not collapse, they stay exdpanded....what, would the problem be...

:thumbup1:

**wampthing** · April 15, 2006

I changed it from html to PHP with no problems. Id take it back to html to verify that it still works there.

**TweezerMan** · April 15, 2006

What I didn't expect to happen is the menu fully expanding when I click a month. While the photos are loading all years and all months are displayed on the menu (everything expanded). Then, Once the last photo of the month completes loading, the menu totally collapses. Had the year I clicked remained open it would not have been so obvious. On months with few photos you don't notice it, it's the months with a ful page of photos to load that leaves it open long enough to notice.

I had expected only the year I selected to stay expanded.

Ive noticed the same thing, and I am not sure why that happens. I wish there was a way to have the year that I selected stay open, but I don't know how. If anyone has Ideas I would love to hear them.

I had used frames previously and miss that aspect of it. I do wish that the side menu would stay in a similar state as well.

Id like to find a solution other than frames though.....

The menu initially appears fully expanded when a page is loaded because the menu's CSS is set up to show the entire menu. Your menu's javascript subsequently tweaks the CSS on the fly to collapse all of the years so the months are not displayed. Since javascript does not begin executing until a page has fully loaded, the menu is going to be fully visible for a short time. There really isn't any way around this behavior. If you code the CSS for your menu to hide all of the months, and someone visits your site with javascript disabled in their browser, they will never see the links nor have any way to access them. These visitors should see the menu fully expanded.

There's more than one way for the menu to have a particular year stay open when clicking links within the menu. I tested some code I added to the prepareMenu() function to perform this task:

>function prepareMenu() {
if (!document.getElementById || !document.getElementsByTagName) return false;
if (!document.getElementById("menu")) return false;

var links = document.getElementById("menu").getElementsByTagName("a");
for (var i=0; i<links.length; i++) {		
	links[i].onclick = function() {
		toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
		return false;
	}
	if (links[i].href == window.location) {
		toggleMenu(links[i].parentNode.parentNode, links[i]);
	}
}
}

This is the code I added:

>if (links[i].href == window.location) {
		toggleMenu(links[i].parentNode.parentNode, links[i]);
	}

When the browser is running this code, the page has already been loaded, and all of the years have been collapsed with javascript. The prepareMenu() function goes through all of the <a href> tags (links) in the menu and adds code to the year links to toggle the expansion and collapse of years when they are clicked.

The code I added compares each menu link with the URL currently being displayed in the browser. If there is a match, the year containing that link is toggled again so it is displayed expanded (giving the effect that I believe you're wanting).

I had gone and added the JS in the header of the files the nav was being included in. I dont know if I needed to do that as the only way for me to get it to work was to include the WHOLE html document (<header>,<body> CSS and all).

It is working, but something is not right with the way you're including the files. You should not include an entire HTML document that has its own <html>, <head> and <body> tags into the <head> section of another HTML page - it's not valid HTML.

If you look at the HTML source from one of your photo pages, you can see the extra <html>, <head> and <body> tags, as well as duplicated <head> elements such as <link> tags linking to your stylesheets and <script> tags linking to your javascripts. I can't tell from the HTML source what you're doing wrong, but I'm sure there a better way to do it that will generate valid HTML for your pages.

Hope this helps...

**wampthing** · April 15, 2006

Wow, thanks for the lengthy reply. Lots of good information. Ill look into all this when I am done doing my Honey-Dos

Thanks!

**wampthing** · April 16, 2006

Works Perfect!!!!

Thanks.

The year of the current selection of photos stays open, and I was able to get the <head> <body> etc out of the include. I had to leave the Java Script reference in there. Is that bad to have it in there twice, once in the header and then again right above the links as well? Assuming its not, Everything is perfect!

Thanks again

Edited April 16, 2006 by wampthing

**TweezerMan** · April 16, 2006

Glad to know the script change I suggested works the way you want it to!

Assuming the duplicate <script> tags both referenced the same file, I don't suppose there would be any harm (nor do much good either). In this case though, the duplicate tags are not referencing the same file.

In the <head> section of your page, you have this <script> tag:

><script type="text/javascript" src="/pool/jscript/jscript/global.js"></script>

And just above your menu code, you have this <script> tag:

><script type="text/javascript" src="/pool/jscript/global.js"></script>

The src path in the first <script> tag is not correct (there's an extra "/jscript" in the path), so it does not load anything, making the second <script> tag necessary for your menus to work.

Just before both of the above tags are another set of duplicate <script> tags:

><script type="text/javascript" src="/pool/jscript/addloadevent.js"></script>

I'd suggest fixing the link in the first <script> tag in the <head> section of your page, then removing the duplicates from the <body> section of your page.

You also have some duplicate <link> tags referencing stylesheets.

In the <head> section of your page, you have this link tag:

><link href="/Templates/assets/mycss.css" rel="stylesheet" type="text/css">

This file does not appear to exist, so it does nothing on your page.

Right after that tag is the following <link> tag:

><link href="/assets/mycss.css" rel="stylesheet" type="text/css">

There is nothing wrong with this tag or its placement.

Then, right after the <body> tag is a duplicate of the above tag:

><link href="/assets/mycss.css" rel="stylesheet" type="text/css">

This tag can be safely removed from your page.

If you really want to get fancy, you could take the code from the addloadevent.js file (which is a single function with about 10 lines of code), add it to the bottom of your global.js file, then eliminate the <script> tag that loads addloadevent.js in your HTML. One <script> tag is better than two if you ask me!

Hope this helps...

**jayson** · April 16, 2006

Glad you got it to work, I still can not get mine to collapse...So I am moving on to try a different collapsing CSS

**jayson** · April 16, 2006

Give this a try... It is completly javascript free collapsing CSS

<html>

<head>

<!--

#nav, #nav ul

{

padding:0;

margin:0;

list-style-type:none;

padding-left:10px;

border-width:1px;

border-color:#0000FF;

}

#nav

{

background-color:#AAAAFF;

width:200px;

border-style:solid;

position:fixed;

right:6em;

top:14ex;

}

#nav ul

{

background-color:#BBBBFF;

width:188px;

border-style:dotted;

}

#nav li:hover

{

background-color:#DDDDFF;

}

#nav a:before

{

content:"[";

}

#nav a:after

{

content:"]";

}

#m1, #m2, #m3

{

display:none;

}

#m1:target, #m2:target, #m3:target

{

display:block;

}

-->

</style>

</head>

<body>

<li><a href="#s11">Submenu 1.1</a></li>

<li><a href="#s12">Submenu 1.2</a></li>

<li><a href="#s13">Submenu 1.3</a></li>

</ul></li>

<li><a href="#s21">Submenu 2.1</a></li>

<li><a href="#s22">Submenu 2.2</a></li>

<li><a href="#s23">Submenu 2.3</a></li>

</ul></li>

<li><a href="#s31">Submenu 3.1</a></li>

<li><a href="#s32">Submenu 3.2</a></li>

<li><a href="#s33">Submenu 3.3</a></li>

</ul></li>

</ul>

</body>

</html>

**wampthing** · April 16, 2006

David,

All fixed. Thanks for taking the time to look into the code so closely for me.

Everything was surprisingly easy to fix once I was able (with your help) to see the problems. It is amazing how stupid little things like "/jscript/jscript" can mess you up and frustrate you to death. Come to find out its just a stupid mistake that I wasn't able to identify.

**wampthing** · April 16, 2006

Give this a try... It is completly javascript free collapsing CSS

Thanks Jayson. Im going to look into this as well. Seeing how I have the other working how I want it to, Ill most likely leave it there, but this will be fun to see another method of doing it.

**Kevan** · April 16, 2006

Great! It works and looks good now.

Super collaboration Dave and David

I agree -->

**TCH-Don** · April 16, 2006

Dave it looks good.

Good job David

Sign In

Collapsing Css Menu

Recommended Posts

wampthing

TCH-Bruce

wampthing

wampthing

TCH-Don

Kevan

wampthing

TCH-Bruce

jayson

wampthing

TweezerMan

wampthing

wampthing

TweezerMan

jayson

jayson

wampthing

wampthing

Kevan

TCH-Don

Join the conversation

Hosting