FANDOM


Info non-talk NavFrame have been deprecated in favor of collapsible tables since September 2007 (only for tables?).

Shortcut: WP:NAVFRAME 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 armoured fighting vehicles (AFVs) of World War II

</div> </div>

List of armoured fighting vehicles of World War II
Soviet armored fighting vehicle production during World War II

How to useEditar

NavFrame divsEditar

The basic concept here is to use the div element within a Wiki article's markup code to identify certain content (which we'll call the "details" here) that we want the user to be able to "show" or "hide". The markup code used to achieve this effect comprises three main classes: NavFrame, NavHead, NavContent. The default behavior of this code will initially "show" the details, as well as a link to "hide" the details. To reverse the default behavior, so that the details are initially hidden, the NavContent element can be declared with style="display:none;".

Simple exampleEditar

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>


To initially hide the content do this:

<div class="NavFrame">
  <div class="NavHead">[... This is the title of the hidden content ...]</div>
  <div class="NavContent" style="display:none;">
    [... This content is initially hidden ...]
  </div>
</div>


Mixed classes exampleEditar

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; it does not have to be plain text, you can get creative here ...]</div>
  <div class="NavContent anotherclass">
    [... The content you want to hide goes here ...]
  </div>
</div>

Collapsible tablesEditar

See main article: Wikipedia:Collapsible tables

The initial state of any collapsible content can be controlled using a "collapsible table", because it also allows a table with only one element with content, and a header.

Limitations Editar

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.

Accessibility Editar

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.

Templates Editar

Navigation templates comparison
Collapsible Header color Image Groups Style (body)
parameter/s
Examples
{{Navbox}} collapsible navbox Left/right of body Yes check Sí Yes check Sí {{United States Congress}}
  1. REDIRECT Template:BullPlantilla:Template redirect {{Solar System}}
{{Navbox with columns}} collapsible navbox Left/right of columns X mark No Yes check Sí {{Current U.S. Senators}}
  1. REDIRECT Template:BullPlantilla:Template redirect {{Czech lands}}
{{Navbox years}} collapsible navbox X mark No X mark No X mark No {{Wimbledon tournaments}}
{{Navbox with collapsible groups}} collapsible navbox Left/right of body and/or in each list Yes check Sí Yes check Sí {{University of Michigan}}
  1. REDIRECT Template:BullPlantilla:Template redirect {{Scouting}}
Collapsible attributes
Type CSS classes Javascript Collapses when Custom
initial state
Nesting
Collapsible tables collapsible Defined in Common.js 2 or more autocollapse on page Yes check Sí Yes check Sí

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.

También en FANDOM

Wiki al azar