User:Cacycle/navbox demo

Improved usability and accessibility demo for navigation boxes

Demo page for improved Template:Navbox for better usability, please see Template talk:Navbox#Usability and Accessibility.

Please use Shift-Reload to update to the latest version.

Installation

In order to see the correct demo you have to add the following code snippets to your user script and user style pages:

Add to User:YourUsername/monobook.js (or User:YourUsername/vector.js):

importScript('User:Cacycle/navbox.js');

Add to User:YourUsername/monobook.css (or User:YourUsername/vector.css):

@import url(http://en.wikipedia.org/w/index.php?title=User:Cacycle/navbox.css&action=raw&ctype=text/css);

After saving these changes you have to clear your browser cache, e.g. with Shift-Reload.

For testing simply use {{User:Cacycle/navbox}} instead of {{Navbox}}.

Changes

• User:Cacycle/navbox.js has the changed JavaScript functions from Mediawiki:Common.js
• User:Cacycle/navbox.css has the changed JavaScript functions from Mediawiki:Common.css
• User:Cacycle/navbox contains the changed template from Template:Navbox
• User:Cacycle/navbar contains the changed template from Template:Navbar (sub-template for the [edit] / v · d · e links)

The changes to Mediawiki:Common.js are the addition of configurable title popup texts and the insertion of the show/hide button after the header title, not before. (There is some additional code to remove the original function calls just for the purpose of this demo.) Mediawiki:Common.css has the new css for the button, including the cursor changing to a hand and underlining the button upon hovering.

The only changes to Template:Navbox are the style changes of the [edit] / v · d · e links from float:left;text-align:left to float:right;text-align:right) and the call of Template:Navbar with notalk=1, noview=1, mini=0, brackets=1, and notext=1

The changes to Template:Navbar (sub-template for the [edit] / v · d · e links) are conservative for backward compatibility. I have only added the following new parameters:

• noview=1: suppress the "v" / "view" link to the template's page
• notalk=1: suppress the "d" / "talk" links to the template's talk page
• notext=1: suppress the "This box" text above the links for mini=1 and plain=1

It is possible to always show all three edit links as [view • talk • edit] or [v • d • e] by adding the following CSS code to User:YourUsername/monobook.css (or User:YourUsername/vector.css):

.navbarEditLinks { display: inline; }

Recent changes

09/04/2009:

• MS-IE < 7 displays transparent GIFs instead of PNGs as arrows
• Replaced a span with an anchor (A) tag for hover compatibility in MS-IE < 7

09/02/2009:

• MS-IE compatibility, now uses a background image for the arrow
• Added a hover-over button style
• Centered the box title

Tested browsers

• Firefox 3.5.2
• Seamonkey 1.1.17
• Chrome 2.0.172.43
• Opera 9.64
• Internet Explorer 8.0.6001.18702

Bugs

• MS-IE on Wikipedia, but not on a local test environment, moves the title and the button upon clicking due to the button length change - strange! Can anybody help?

Examples

The following examples are taken from Template:Navbox, feel free to add more.

No image

With image, without groups

With two images, without groups, multiple lists

With image, groups, above, below

Child navboxes

It is possible to place multiple navboxes within a single border with the use of the border parameter, or by specifying the first parameter to be "child". The basic code for doing this is as follows (which adds a subgroup for the first group/list area):

Subgroups example

Main page: Template:Navbox subgroup

This example shows how subgroups can be used. It is recommended that one uses {{Navbox subgroup}}, but the same result can be reached by using {{Navbox}} with border = child or the first unnamed parameter set to child. Note that the evenodd parameter is used to reverse striping in some of the subgroups in order to get all of the stripes to line up properly. If you wish to remove the striping altogether, you can set liststyle = background:transparent; in each of the navboxes.

Multiple show/hides in a single container

Main page: Template:Navbox with collapsible groups

The example below is generated using a regular navbox for the main container, then its list1, list2, and list3 parameters each contain another navbox, with border = child set. Note that each of the child navboxes has its own VDE navbar; these could be hidden using navbar = plain for each of them, or by just leaving out the name parameter (child navboxes do not require the name parameter to be set, unlike regular navboxes).