The [BrushedTemplate] uses a menu at the top of the screen with drop down boxes.
Since this was implemented by using .css stuff, you can also use dropdowns
in the body of your pages. With some care.
\\--[DF|DirkFrederickx], Jun 2004

! Usage

Write the menu as a list and enclose it in {{{%%dropDownList}}} tags.
Nested sublist are used to contain the drop down menu items. 

{{{
%%dropDownList
* Item 1
** subitem 1
** subitem 2
* [Item2|BrushedTemplateDropDownMenu]
** [Recent Changes]
** [WikiEtiquette]
** [Page Index]
* [Item3|Main]
** item [1]
** item [2]
** item [3]
%%
}}}

Here is the result:
%%dropDownList
* Item 1
** subitem 1
** subitem 2
* [Item2|BrushedTemplateDropDownMenu]
** [Recent Changes]
** [WikiEtiquette]
** [Page Index]
* [Item3|Main]
** item [1]
** item [2]
** item [3]
%%

End of the menu


! How does it work

The .css was inspired by several articles on the web; mainly  
Suckerfish Dropdowns at [http://www.alistapart.com/articles/dropdowns/] 
by [Patrick Griffiths|http://www.alistapart.com/authors/patrickgriffiths] 
and the drop down menu examples by David Lindquist on [http://www.gazingus.org]
helped me a lot.

In order to get it running also on IE and Opera, I had to stretch it a bit.

With some support of javascript, the hidden drop down menus should appear when you hover 
the mouse over the buttons of the menu. Note how the positioning of the
menu on the screen is different for Opera, IE and the other browser.

Another tricky part of this feature is related to the way JSPWiki generates nested lists.
Unfortunately, the nested {{<ul>}} tags are actually not nested inside the
parent {{<li>}}.  This is handled in both the javascript and the css.


What you need to do:
* add following .css to ''template/<Your[WikiTemplate]>/jspwiki.css'' [1]
* add some javascript to your .js file to have a fix for .css hover in ie and opera [2]

[#1]__CSS Stylesheet additions__

{{{

.dropDownList
   { margin:    0;
     padding:   0.5em 0 0.5em 0;
     font-size: x-small; 
   }

.dropDownList > ul
   { position:  relative; 
   }

.dropDownList ul
   { margin:  0;
     padding: 0;
   }     

.dropDownList ul li
   { margin:      0;
     padding:     0.5em;
     display:     inline; 
     list-style:  none;
   }
   
.dropDownList ul li.dropDownListFocus
   { font-weight: bold;
   }
   
.dropDownList ul ul li
   { display:     block;
     font-weight: normal;
     margin:      0;
     padding:     0.5em;
   }   
   
.dropDownList ul ul
   { visibility: hidden;
     position:   absolute; 
     left:       0;
     top:        1.25em;
     z-index:    9999;  /* always visible, on top */

     margin:     0;
     padding:    0;
     background: white;
     border:     1px solid  #cccccc;
   }

}}}

[#2]__Javascript support routines__

{{{
// 005. enableTopMenu  DF / May 2004
// CSS based, 'suckerfish dropdowns' and David Linquists dropdown menu
//
// <div class="dropDownList" >
//   <ul>
//     <li>menu-item
//       <ul>dropdown stuff </ul>
//     </li>
//
// or 
//
// <div id="topMenu" class="dropDownList" >
//   <ul>
//     <li>menu-item</li>
//     <ul>dropdown stuff </ul>
// 
//       
// called after loading the page
// look for all <DIV class="dropDownList">
//var previousLI = null ; /* already defined */
var dropdownBase;
function enableTopMenu()
{
  if (!document.createElement) return;

  // find a <div id="topMenu" class="dropDownList"> element
  var divArr = document.getElementsByTagName("div");
  if (! divArr) return; 

  for (var i=0; i<divArr.length; i++) 
  {
    if ( divArr[i].className == "dropDownList" )
    {
      dropDownBase  = divArr[i].offsetLeft;
      //alert(dropDownBase);
      for (var j=0; j<divArr[i].childNodes.length; j++)
      {
        previousLI = null;
        enableTopMenu1(divArr[i].childNodes[j]);
      }   
    } 
  }  
}

function enableTopMenu1(node)
{
  if (node.nodeName == "LI") previousLI = node;
  if ( (node.nodeName == "UL") && (previousLI) )
  {
    enableTopMenu2(previousLI,node);
    previousLI = null;
    return;
  }

  if (node.hasChildNodes) 
  {
    for (var i=0; i<node.childNodes.length; i++) 
    { 
      enableTopMenu1(node.childNodes[i]);
    }
  }

}

function enableTopMenu2(li, ul)
{
  //alert("left:"+li.offsetLeft+" top:"+li.offsetTop+" lineHeight:"+li.offsetHeight);
  var base = dropDownBase;
  if (window.opera)  
  { /* need some dirty trick : base=0 for the floating searchbox -- blub */
    li.onmouseover= function() 
    { 
      if (base==0) ul.style.top = li.offsetTop /*+ li.offsetHeight*/ + "px";
      if (base!=0) ul.style.left = li.offsetLeft - dropDownBase + "px";
      ul.style.visibility = "visible";
    }
  } else if (IE5)  
  { /* plopperdeplop */
    li.onmouseover= function() 
    { 
      ul.style.top = li.offsetTop + li.offsetHeight*3/4 + "px";
      ul.style.left = li.offsetLeft - dropDownBase + "px";
      ul.style.visibility = "visible";
    }
  } else { 

    li.onmouseover= function() 
    { 
      ul.style.top  = li.offsetTop + li.offsetHeight + "px" ;
      ul.style.left = li.offsetLeft + "px";
      ul.style.visibility = "visible";
    }
  }

  li.onmouseout = function()  { ul.style.visibility = "hidden";   }
  ul.onmouseover= function()  { ul.style.visibility = "visible";  }
  ul.onmouseout = function()  { ul.style.visibility = "hidden";   }

}

}}}

In the default jspwiki template, the window onload function is defined in {{search_highlight.js}},\\
You'll need to extend it with a call to the {{enableTopMenu}} function. 
{{{
function runOnLoad 
{
  googleSearchHighlight();
  enableTopMenu();
}
window.onload = runOnLoad;
}}}
 

!Example

See also [BrushedTemplate]