www.ekr-home.de

To: 		webmaster@dhtmlcentral.com
Subject: 	A small extension to your DHTML menu code

Hello Thomas,

I've used your menu code from
http://www.dhtmlcentral.com/tutorials/tutorials.asp?page=0&id=14
- first of all, thanks a lot for it, it seems to be perfect for what
it does.

I use it in a static XHTML site; the menu is in SSIs and included by
all content pages.

I have extended your code a bit so the current page (or rather the
<a> leading to the current page) is always visible in the menu,
and highlighted as well. See http://www.ekr-home.de for a small
example (just click around in the menu, it's visible immediately).

One feature of it is that if a page is linked several times in the
menu, -all- occurences are visible and highlighted. This is
intentional, and it would be trivial to change it I guess (some
global JS flag...).

--------------- new CSS ------------------------
// for each class a.myMenu*, add another class a.myMenu*high with
// font-weight:bold (or whatever fits your style)

a.myMenu0high
{
	display:block;
	position:relative;
	background-color:silver;
	padding:3px;
	text-decoration:none;
	color:Navy;
	border:1px solid red;
	margin-top:10px;
	font-weight:bold;  // <-----
}

a.myMenu1high
{
	text-decoration:none;
	font-weight:bold; // <---------
}
------------------------------------------------

At the top of your "loopElements" function:

---------------------------------------------------
function loopElements(el,level)
{
  // This should be optimized so it is calculated outside of
  // loopElements, and passed as a parameter, if the menu is long.

  var baseUrl=""+self.document.URL;
  var i=baseUrl.lastIndexOf("/");
  if (i>0)
  {
  	baseUrl=baseUrl.substr(i);
  }
---------------------------------------------------

In the <a> branch of your loopElements function:

------------------------------------------------------
       if(temp.tagName.toLowerCase() == "a")
       {
         //We found the A tag - set class
         temp.className = "myMenu"+level;
    	 temp.onclick = showHide;

	// --- snip --- new code follows

    	 var linkUrl=""+temp; // I didn't find a good way to query
    	                      // the URL, but this works in Opera
    	                      // and IE6
    	 var t=linkUrl.lastIndexOf("/");
    	 if (t>0)
    	 {
    	 	linkUrl=linkUrl.substr(t);
    	 	if (linkUrl == baseUrl)
    	 	{
    	 		// We found the current page
    	 		// Highlight it
    	 		temp.className=temp.className+"high";
    	 		// So travel up the tree of <ul>'s, and unhide
    	 		// them
    	 		var par=temp.parentNode;
    	 		var count=0;
    	 		while (par && count<50)
    	 		{
    	 			count++;
					if (par.tagName
					&& par.tagName.toLowerCase() == "ul"
					&& par.style
					&& par.style.display == "none")
					{
						par.style.display="";
					}
					par = par.parentNode;
    	 		}
    	 	}
    	 }

	// --- snip --- new code ends

       }
       else if(temp.tagName.toLowerCase() == "ul")
       {
       	 temp.style.display = "none";
----------------------------------------------------------------

Thanks again for your good job on the menu, and feel free to do
with this extension whatever you like. :-)

Ekkehard