User:Cacycle/navbox demo
![](http://upload.wikimedia.org/wikipedia/en/thumb/1/1a/Navbox_demo.png/350px-Navbox_demo.png)
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
[edit]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://wiki.riteme.site/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
[edit]
- 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
[edit]
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
[edit]
- Firefox 3.5.2
- Seamonkey 1.1.17
- Chrome 2.0.172.43
- Opera 9.64
- Internet Explorer 8.0.6001.18702
Bugs
[edit]
- 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
[edit]
The following examples are taken from Template:Navbox, feel free to add more.
No image
[edit]
MSC Malaysia Centre Area Major landmarks Infrastructure Prime applications
With image, without groups
[edit]
MSC Malaysia ![](//upload.wikimedia.org/wikipedia/commons/thumb/6/66/Flag_of_Malaysia.svg/80px-Flag_of_Malaysia.svg.png)
With two images, without groups, multiple lists
[edit]
MSC Malaysia ![](//upload.wikimedia.org/wikipedia/commons/thumb/6/66/Flag_of_Malaysia.svg/80px-Flag_of_Malaysia.svg.png)
![](//upload.wikimedia.org/wikipedia/commons/thumb/6/66/Flag_of_Malaysia.svg/80px-Flag_of_Malaysia.svg.png)
With image, groups, above, below
[edit]
MSC Malaysia Above text goes here Centre ![](//upload.wikimedia.org/wikipedia/commons/thumb/6/66/Flag_of_Malaysia.svg/80px-Flag_of_Malaysia.svg.png)
Area Major landmarks Infrastructure Prime applications Website: www.msc.com.my
Child navboxes
[edit]
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
[edit]
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 Subgroup Example Above Group1 List1 ![](//upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/100px-Flag_of_the_United_States.svg.png)
Group2 Group2.1 List1 Group2.2 List2 Group2.3 List3
Group3 List3 Group4 Group4.1 List1 Group4.2 List2 Group4.3 List3
Below
Multiple show/hides in a single container
[edit]
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).