Switch menu and Onclick header css

[rane]

1) Script Title: Switch Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...switchmenu.htm

3) Describe problem: I would like to add to the Switch Menu code so that when i click on the headers, the header css-formatting changes to whatever I decide.

Example:

Header1
- submenu1
- submenu2
Header2
- submenu3
- submenu4

Header1 and Header2 is plain text formatted with a font, size etc. If I click on Header1...the submenu pops up as usual, but then I'd like to change the backgroundcolor on Header1 text together with the color of Header1. IF i then click on Header2 afterwards...the previous onclick formatting should disappear and then be added to the Header2 text.

Simply a kinda header highlighting onclick, altho it should disappear once you click on another header.

How can this be done, I wonder?

[jscheuer1]

Put this class selector and styles in your stylesheet (red):

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.titleon {
background-color:#000000;
color:#ECECFF;
}

.submenu{
margin-bottom: 0.5em;
}
</style>

Just make sure it is after the .menutitle styles and set it to whatever you want the open title style to be. You only need to include those styles that are different from the .menutitle selector's.

Next add to the function SwitchMenu as shown (red) or just replace it with this one:

function SwitchMenu(obj, e){
	if(document.getElementById){
var titles=document.getElementById("masterdiv").getElementsByTagName("div");
for (var i_tem = 0; i_tem < titles.length; i_tem++)
if(titles[i_tem].className.indexOf('titleon')>-1)
titles[i_tem].className=titles[i_tem].className.replace(/ titleon/,'');
e.className=e.className+' titleon';
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		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";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

And, add to the function onloadfunction or just replace it with this one:

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!=""){
var saved=document.getElementById(cookievalue)
saved.style.display="block"
while(saved=saved.previousSibling)
if(saved.className&&saved.className.indexOf('menutitle')>-1){
saved.className=saved.className+' titleon';
break;
}
}
}
}

Finally, change all of these:

onclick="SwitchMenu('sub1')"

to be like so:

onclick="SwitchMenu('sub1',this)"

[rane]

Thanks John,

the style does change the headers when i click on them. Altho, if i click on another header afterwards, the previous-clicked headers remain styled instead of getting reset, as i would prefer. In general, if you click on a header thats already styled (with .titleon), it should reset (or change to another style if thats easier to code).

Any solution?

[jscheuer1]

I really didn't notice that when I did the mod. Solution is perhaps too strong a word. Had I noticed it (it is of course, as you describe) I would have simply put this:

e.className=e.className+' titleon';

in a different spot. Use this SwitchMenu function:

function SwitchMenu(obj, e){
	if(document.getElementById){
var titles=document.getElementById("masterdiv").getElementsByTagName("div");
for (var i_tem = 0; i_tem < titles.length; i_tem++)
if(titles[i_tem].className.indexOf('titleon')>-1)
titles[i_tem].className=titles[i_tem].className.replace(/ titleon/,'');
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		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";
			}
			el.style.display = "block";
e.className=e.className+' titleon';
		}else{
			el.style.display = "none";
		}
	}
}

Sorry about that.

[rane]

hey John,

i've send you a private message with the web adress, im testing the script on. That 1 line unfortunately didnt work as planned.

[jscheuer1]

You've deviated from the demo markup. The this keyword refers to the element in which it appears, you have changed which one that is. Where you have this:

<div class="menutitle"><a href="javascript: void(0);" onclick="SwitchMenu('sub21',this);">Bilstereo/TV</a> (<u>102</u>)</div>

The demo used (without the this keyword):

<div class="menutitle" onclick="SwitchMenu('sub21',this);">Bilstereo/TV (<u>102</u>)</div>

But to get what I think you are after, you should use:

<div class="menutitle"><a href="javascript: void(0);" onclick="SwitchMenu('sub21',this.parentNode);">Bilstereo/TV</a> (<u>102</u>)</div>

or:

<div class="menutitle" onclick="SwitchMenu('sub21',this);"><a href="javascript: void(0);">Bilstereo/TV</a> (<u>102</u>)</div>

And, change your added style to select the desired element:

.titleon a {
background-color:#000000;
color:#ECECFF;
}

Note: In IE, using href="javascript:void(0);" will cause problems with animated .gif images, sometimes with scripts and possibly with other dynamic content. If you go with:

<div class="menutitle"><a href="#" onclick="SwitchMenu('sub21',this.parentNode);return false;">Bilstereo/TV</a> (<u>102</u>)</div>

It would be a safer way to do it. So too would be styling and marking up your title division so as to not require the href at all. A good solution here would be to make the above change and then substitute the URL for a page in place of #. This page will be navigated to only by non-javascript enabled browsers and would represent their fall-back content.

[rane]

Thanks a lot John. It seems ive gotten it to work now the way I want.

One irritating thing tho here afterwards.....I just checked the site on Vistas Internet Explorer 7 browser. And the darn thing doesnt seem to close the previous opened headerdropdown when clicking a new header. In other words, you can click all headers so all submenus will be displayed at the same time. Not optimal

[jscheuer1]

Well, I don't have vista to test on but in IE 7 on XP it works OK:

http://home.comcast.net/~jscheuer1/s...ader_css_h.htm

How does that look in vista's IE 7?

[rane]

Microsofts weird....i didnt change a thing and now it works in Vista. Oh well...thanks for all your help John. Really appreciate it

[markv]

Hi,

Thanks also for this help - I wanted the same thing. There's just one problem I now have... I was already using:

onmouseout=\"this.className='menutitle'\" onmouseover=\"this.className='menutitle_on';

in the code to highlight the headers onmouseover but the onmouseout removes the color from the selected tab as well.

Does that make sense?

Any help would be very much appreciated.

markv