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

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:

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 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/<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


.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

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-50) was last changed on 01-May-2012 14:39 by 195.248.173.67