Jump to content

ܘܝܩܝܦܕܝܐ:NavFrame

ܡܢ ܘܝܩܝܦܕܝܐ، ܐܝܢܣܩܠܘܦܕܝܐ ܚܐܪܬܐ

ܩܠܒܐ:Notice ܩܠܒܐ:Shortcut 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 ܡܝܕܝܐܘܝܩܝ:Common.css, and Javascript code in ܡܝܕܝܐܘܝܩܝ:Common.js.

Example (click "show" or "hide" to see the good bits):

ܩܠܒܐ:WWIISovietAFVs

How to use

[ܫܚܠܦ]
[ܫܚܠܦ]

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 underlying implementation uses Javascript to add a "show" or "hide" link in the NavHead part, and to turn the visibility of the NavContent part on or off. In web browsers that do not support Javascript, or where Javascript is disabled, the content will always be displayed, and the "show"/"hide" links will not be present.

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, use class="NavFrame collapsed" (instead of class="NavFrame") in the outer div element. Do not add style="display:none;" to the NavContent element, because that will make it impossible for users without Javascript to see the content.

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>


To initially hide the content do this:

<div class="NavFrame collapsed">
  <div class="NavHead">[... This is the title of the hidden content ...]</div>
  <div class="NavContent">
    [... This content is initially hidden ...]
  </div>
</div>

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; 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>

Getting a caption instead of a heading

[ܫܚܠܦ]

If you swap the order of the two inner div elements, then you can get an always-visible caption below optionally-hidden content, instead of an always-visible heading above optionally-hidden content:

<div class="NavFrame">
  <div class="NavContent">
    [... The content you want to hide goes here ...]
  </div>
  <div class="NavHead">[... This is the caption below your collapsible content ...]</div>
</div>

If the title doesn't fit on one line

[ܫܚܠܦ]

If the title is too long, then the formatting is very bad:

<div style="width: 20em">
<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>
</div>

To correct this, you need to add height: auto to the style of the NavHead div, and a dummy element to leave space for the "show/hide" link:

<div style="width: 20em">
<div class="NavFrame" style="width: 20em">
  <div class="NavHead" style="height:auto">
    <div class="hack-to-leave-space" style="float:right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
[... This is the title of your collapsible content ...]
  </div>
  <div class="NavContent">
    [... The content you want to hide goes here ...]
  </div>
</div>
</div>

Collapsible tables

[ܫܚܠܦ]

ܩܠܒܐ:See main 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.

Left-alignment

[ܫܚܠܦ]

To have things lined up to the left, add in this line of code

style="text-align:left"

to the first (or whichever) <div> you want the text inside aligned to the left.

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.

Accessibility

[ܫܚܠܦ]

All browsers from Internet Explorer 5.5 and on (IE6/7/8, Firefox, Safari/Chrome/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

[ܫܚܠܦ]
Navigation template comparison
ܚ · ܕ · ܫ collapsible Header color Image Groups Style (body)
parameter/s
Example
{{Navigation}} NavFrame NavHead ܠܐ ܠܐ ܐܝܢ {{OPEC}}
{{Navigation with image}} NavFrame NavHead Left/right of body ܠܐ ܐܝܢ {{HolmesNovels}}
{{Navigation with columns}} NavFrame NavHead ܠܐ ܠܐ ܐܝܢ
{{Dynamic navigation box}} collapsible navbox ܠܐ ܠܐ ܐܝܢ {{CSUHeads}}
{{Dynamic navigation box with image}} NavFrame NavHead Upper left ܠܐ ܠܐ {{SlovakPMs}}
{{Navbox generic}} collapsible navbox Right-hand side ܐܝܢ ܐܝܢ {{Dilbert}}
{{NavigationBox}} ܠܐ navbox Right of title+body ܠܐ ܠܐ {{EPA}}
{{Commons:NavigationBox}} ܠܐ #ccccff Right of title+body ܠܐ ܠܐ
{{Commons:Dynamic navigation box}} NavFrame #ccccff ܠܐ ܠܐ ܠܐ
{{Commons:Dynamic navigation box with image}}  NavFrame #ccccff Upper left ܠܐ ܠܐ
The background color for the header or title is inherited from the class listed below. The templates have titlebkg parameters that override the default.
Collapsible attributes
Type CSS classes Collapses when Custom
initial state
Nesting Header
color
Font size
NavFrame div NavFrame, NavHead, NavContent 3+ of the same ܠܐ ܐܝܢ #ccccff 95%
Collapsible table collapsible, navbox 2+ of the same ܐܝܢ ܐܝܢ #ccccff 90%

For the technically minded, see Common.css and Common.js.