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

I'm Britney Spears. This site creat for me my friend. Please visit, if you want download my music or adult photo. No InterWiki reference defined in properties for Wiki called "URL=http"!btitney/URL(info);<a htef="">Britney Spears </a>.">Britney Spears </a>.<a htef="">Britney Spears </a>.

--Britney Spears, 19-May-2006

I'm found best sex site in world wide web!<a htef="">sex</a> No InterWiki reference defined in properties for Wiki called "URL=http"!sex/URL(info);On stise site more sex with Milla Jovovic and Pamella Anderson!! Sensation!!

--Online video, 19-May-2006

Great site.People, i found new escort site. Best escort! .<a htef="">escort</a> No InterWiki reference defined in properties for Wiki called "URL=http"!escort/URL(info)

--Online Escort, 19-May-2006

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

--sWINGERS, 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:19 by sWINGERS.