Wikipedia:NavFrame
From Wikipedia, the free encyclopedia
Documentation for dynamic navigation boxes.
Dynamic navigation boxes use a combination of CSS and Javascript to make collapsible navigation boxes. The technical parts comprise style sheet declarations in MediaWiki:Common.css, and Javascript code in MediaWiki:Common.js.
Example (click "show" or "hide" to see the good bits):
| Soviet and post-Soviet armoured fighting vehicles after World War II | ||||||||
|---|---|---|---|---|---|---|---|---|
|
||||||||
| List of armoured fighting vehicles by country | ||||||||
Contents |
[edit] How to use
[edit] NavFrame divs
With div, you can hide almost anything. There are three main classes: NavFrame, NavHead, NavContent.
[edit] Simple example
You will need to create three div elements:
<div class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
<div class="NavContent">
[... The content you want to hide goes here ...]
</div>
</div>
[... The content you want to hide goes here ...]
[edit] Mixed classes example
You can even apply other classes along with these, making a more styled design rather than if you were to use the standard classes:
<div class="messagebox standard-talk NavFrame">
<div class="somerandomclass NavHead">[... This is the title of your collapsible content ...]</div>
<div class="NavContent anotherclass">
[... The content you want to hide goes here ...]
</div>
</div>
[edit] Collapsible tables
[edit] Simple example
Tables are simpler to work with, as you merely need to add the collapsible to the table itself. For the [hide]/[show] link to appear, the table's first row must be a header row, i.e. begin (in wikisyntax) with an exclamation mark. The use of the class toccolours in the example below is merely for appearance; it is not needed for collapsible to function:
{| class="toccolours collapsible" width="60%"
!colspan="2"| Fun with table columns
|-
| Column 1 || Column 2
|}
| Fun with table columns | |
|---|---|
| Column 1 | Column 2 |
[edit] Auto-collapsing tables
You have two choices of auto-collapse. In addition to the collapsible class, you can add either collapsed or autocollapse. The first always collapses a table. autocollapse only collapses a table if there are at least two collapsible tables on a page.
{| class="toccolours collapsible autocollapse" width=60%
|-
! colspan="2" | This autocollapse table will collapse because there are at least two collapsible tables on this page.
|-
| Column 1 || Column 2
|}
| This autocollapse table will collapse because there are at least two collapsible tables on this page. | |
|---|---|
| Column 1 | Column 2 |
{| class="toccolours collapsible collapsed" width=60%
|-
! colspan="2" | This table will always collapse
|-
| Column 1 || Column 2
|}
| This table will always collapse | |
|---|---|
| Column 1 | Column 2 |
[edit] Limitations
Currently, the three Nav* classes apply styles of their own. When mixing classes, this causes some of the Nav styles to override other styles (in the above example, NavFrame is overriding the styles from .messagebox.standard-talk).
This limitation does not affect collapsible tables.
[edit] Accessibility
All browsers from Internet Explorer 5.5 and on (IE5.5/6/7, Firefox, Safari / KHTML, Opera 8/9, etc.) that support JavaScript will properly collapse the elements.
Internet Explorer 5 and browsers which do not support JavaScript will render the elements without the [hide/show] links and will not collapse them.
[edit] Templates
| collapsible | Header color† | Image | Groups | Style parameter |
Example | |
|---|---|---|---|---|---|---|
| {{Navigation}} | NavFrame | NavHead | No | No | No | {{OPEC}} |
| {{Navigation with image}} | NavFrame | NavHead | Left/right of body | No | No | {{HolmesNovels}} |
| {{Navigation with columns}} | NavFrame | NavHead | No | No | No | |
| {{Dynamic navigation box}} | collapsible | navbox | No | No | Yes | {{CSUHeads}} |
| {{Dynamic navigation box with image}} | NavFrame | NavHead | Upper left | No | No | {{SlovakPMs}} |
| {{Navbox generic}} | collapsible | navbox | Right-hand side | Yes | Yes | {{Dilbert}} |
| {{Navbox generic with image}} | collapsible | navbox | Right-hand side | Yes | Yes | {{Jewish life}} |
| {{NavigationBox}} | No | navbox | Right of title+body | No | No | {{EPA}} |
| {{Commons:NavigationBox}} | No | #ccccff | Right of title+body | No | No | |
| {{Commons:Dynamic navigation box}} | NavFrame | #ccccff | No | No | No | |
| {{Commons:Dynamic navigation box with image}} | NavFrame | #ccccff | Upper left | No | No | |
| † The background color for the header or title is inherited from the class listed below. The templates have titlebkg parameters that override the default. | ||||||
| Type | CSS classes | Collapses when | Custom initial state |
Nesting | Header color |
Font size |
|---|---|---|---|---|---|---|
| NavFrame div | NavFrame, NavHead, NavContent | 3+ of the same | No | Yes | #ccccff | 95% |
| Collapsible table | collapsible, navbox | 2+ of the same | Yes | No | #ccccff | 90% |
|
For the technically minded, see Common.css and Common.js. |
||||||
