Dynamic Navigation

Show/Hide Boxes

This method is from [Page|Wiki News front page], it involves three parts, CSS styles, JavaScript code and a template, which follow here:

Add these CSS rules to MediaWiki:Common.css

<css> div.Boxmerge, div.NavFrame {

       margin: 0px;
       padding: 2px;
       border: 1px solid #aaaaaa;
       text-align: center;
       border-collapse: collapse;
       font-size: 95%;

} div.Boxmerge div.NavFrame {

       border-style: none;
       border-style: hidden;

} div.NavFrame + div.NavFrame {

       border-top-style: none;
       border-top-style: hidden;

} div.NavPic {

       background-color: #ffffff;
       margin: 0px;
       padding: 2px;
       float: left;

} div.NavFrame div.NavHead {

       height: 1.6em;
       font-weight: bold;
       font-size: 100%;
       background-color: #efefef;
       position:relative;

} div.NavFrame p {

       font-size: 100%;

} div.NavFrame div.NavContent {

       font-size: 100%;

} div.NavFrame div.NavContent p {

       font-size: 100%;

} div.NavEnd {

       margin: 0px;
       padding: 0px;
       line-height: 1px;
       clear: both;

} a.NavToggle {

       position:absolute;
       top:0px;
       right:3px;
       font-weight:normal;
       font-size:smaller;

} </css>

Add this JavaScript to MediaWiki:Common.js

<js> // for backwards compatibility var addLoadEvent = addOnloadHook;

// Cookie set/get functions from W3C function setCookie(c_name, value, expiredays) {

 var exdate = new Date();
 exdate.setDate(exdate.getDate() + expiredays);
 document.cookie = c_name+ "=" +escape(value) +
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());

}

function getCookie(c_name) {

 if (document.cookie.length > 0) {
   c_start = document.cookie.indexOf(c_name + "=");
   if (c_start != -1) { 
     c_start = c_start + c_name.length + 1; 
     c_end = document.cookie.indexOf(";", c_start);
     if (c_end == -1) c_end = document.cookie.length;
     return unescape(document.cookie.substring(c_start, c_end));
   } 
 }
 return "";

}

// hasClass()

// Description: Uses regular expressions and caching for better performance.
// Maintainers: w:User:Mike Dillon, w:User:R. Koot, w:User:SG

var hasClass = (function () {

   var reCache = {};
   return function (element, className) {
     return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s

Create the Template:DynamicNavigation containing this wikitext

<div style="clear:both;text-align:center;{{#if:{{{WIDTH|}}}|width:{{{WIDTH}}}| }};margin:auto;"  align="center" class="NavFrame {{{EXT|}}}">
<div class="NavHead" style="clear:both;text-align:center;background:{{{BGCOLOR}}};">{{{TITLE}}}</div>
<div class="NavContent" style="clear:both;text-align:left;">
{{{CONTENT}}}
</div>
<div class="NavContent" style="clear:both;font-size: 90%;text-align:left;">
{{{SMALLCONTENT|}}}
</div>
</div>
<noinclude><pre>Parameter:
  BGCOLOR = colour of the heading of the navigation box
  TITLE   = heading of the navigation box
  CONTENT = contents of the navigation box.  Use &#124; to separate links.
            It is not possible to include a pipe ("|") in the contents
            as this symbol is used to separate parameters.
  SMALLCONTENT = OPTIONAL. as per CONTENT but produces 90% fontsize
  WIDTH   = Optional parameter to limit width
  EXT     = Optional extentions [space seperated list. case-sensitive] so far only NavOnce
      EXT=NavOnce    =    only allow one navbox with this extention visible at a time (closes other one's)

  </pre></noinclude>