Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
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.