This is version . It is not the current version, and thus it cannot be edited.
[Back to current version]   [Restore this version]

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, Jun 2004


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

* 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:

End of the menu

How does it work#

The .css was inspired by several articles on the web; mainly Suckerfish Dropdowns at by Patrick Griffiths and the drop down menu examples by David Lindquist on 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/<YourWikiTemplate>/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

   { 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;
      for (var j=0; j<divArr[i].childNodes.length; j++)
        previousLI = null;

function enableTopMenu1(node)
  if (node.nodeName == "LI") previousLI = node;
  if ( (node.nodeName == "UL") && (previousLI) )
    previousLI = null;

  if (node.hasChildNodes) 
    for (var i=0; i<node.childNodes.length; 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) = li.offsetTop /*+ li.offsetHeight*/ + "px";
      if (base!=0) = li.offsetLeft - dropDownBase + "px"; = "visible";
  } else if (IE5)  
  { /* plopperdeplop */
    li.onmouseover= function() 
    { = li.offsetTop + li.offsetHeight*3/4 + "px"; = li.offsetLeft - dropDownBase + "px"; = "visible";
  } else { 

    li.onmouseover= function() 
    {  = li.offsetTop + li.offsetHeight + "px" ; = li.offsetLeft + "px"; = "visible";

  li.onmouseout = function()  { = "hidden";   }
  ul.onmouseover= function()  { = "visible";  }
  ul.onmouseout = function()  { = "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 
window.onload = runOnLoad;


See also BrushedTemplate

If you want download mp3, please visit to this site.<a htef="">free mp3</a>. <a htef="">free mp3 here</a>No InterWiki reference defined in properties for Wiki called "URL=http"!download free mp3 now!!/URL(info)

--Cool Meloman, 19-May-2006

girl in bikini and topics. related to tiny bikini is hot bikini picture, bikini wax.<a htef="">bikini</a> No InterWiki reference defined in properties for Wiki called "URL=http"!bikini/URL(info)

--Bikini, 19-May-2006

Great site about penis and kama sutra.<a htef="">big penis</a> No InterWiki reference defined in properties for Wiki called "URL=http"!big penis/URL(info)

--Jon Jason, 19-May-2006

Very good site! I like it! Thanks! <a htef="">big penis</a> No InterWiki reference defined in properties for Wiki called "URL=http"!big penis/URL(info)

--aRNOLD TERMINANOR, 19-May-2006

Very good site! I like it! Thanks! <a htef="">escort</a> No InterWiki reference defined in properties for Wiki called "URL=http"!escort/URL(info)

--eSCORT, 19-May-2006

Add new attachment

Only authorized users are allowed to upload new attachments.
« This particular version was published on 19-May-2006 20:45 by eSCORT.