Highlighting menu items on click

[Shap5202]

I apologize in advance if this has been covered, but I couldn't find anything in the archives.

I have a menu with 3 menu items and 3 corresponding divs. If you click on a menu option it unhides the div. And keeps the menu item (and only the clicked one) highlighted. The below code highlights the item, but the highlighting doesnt go away. Is there a way I can unhighlight the item?


my menu_data.js is

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
menubgimage="section_bar_bkg.gif";
offbgcolor="#eeeeee";
offcolor="#525252";
imagepadding=3;
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
pagebgimage="section_bar_bkg_hover.gif";
separatorcolor="#9ba6c2";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
align="center";
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("image=icon_contents.gif;text=Contents;bgimage=section_bar_bkg.gif;overbgimage=section_bar_bkg_hover.gif;clickfunction=showDiv('contents');");
aI("image=icon_index.gif;text=Index;bgimage=section_bar_bkg.gif;overbgimage=section_bar_bkg_hover.gif;clickfunction=showDiv('index');");
aI("image=icon_search.gif;text=Search;bgimage=section_bar_bkg.gif;overbgimage=section_bar_bkg_hover.gif;clickfunction=showDiv('search');");
}

drawMenus();

and my html page looks like (the relavent parts at least)

Code: Select all

script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="https://milonic.com/">DHTML JavaScript Website Pull Down Navigation Menu By Milonic</a></noscript>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
<script src="mmpagehighlighter.js" type=text/javascript></script>

<BR>
<BR>

<script>
function hideAll(){
	hide('contents');
	hide('index');
	hide('search');
}

function showDiv(name){
	hideAll();
	show(name);
	mmItemActivateByText(name);
}

function hide(id) {
	which = document.getElementById(id);
	if (!document.getElementById || which == null)
		return
	which.style.display = "none";
}

// show a element based on ID
function show(id) {
	which = document.getElementById(id);
	if (!document.getElementById || which == null) {
		return
	}

	//mozilla required a different style to display <TR>'s
	if(which.nodeName == "TR" && !IE)
		which.style.display = "table-row";
	else
		which.style.display = "block";
}

</script>

<div id="main">
	<div id="contents" class="data" style="display:none;">
		Context Div
	</div>

	<div id="index" class="data" style="display:none;">
		Index Div
	</div>

	<div id="search" class="data" style="display:none;">
		Search Div
	</div>
</div>

[Shap5202]

I came up with a solution... might not be the best way, but it works until I hear of a better way... i changed the showDIv JS function above to this

Code: Select all

function showDiv(name){
	hideAll();
	show(name);

	if(current > -1){
		_mi[current][46]= 'section_bar_bkg.gif';
		BDMenu(_mi[current][0]);
	}
	current=_itemRef;
	_mi[current][46]= 'section_bar_bkg_hover.gif';
	BDMenu(_mi[current][0]);
}

and added 'var current = -1' at the start of the <script> tag so it will set the bgimage of the selected item to the hover state on click, and when you click on another item, resets the image.