Highlighting menu items on click

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:16

Highlighting menu items on click

Poster: Shap5202
Dated: Thursday February 2 2006 - 19:35:02 GMT

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:

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:

script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.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>

Poster: Shap5202
Dated: Friday February 3 2006 - 14:45:00 GMT

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:

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.

Industrial Strength JavaScript and DHTML Menus

Highlighting menu items on click