«ܘܝܩܝܦܕܝܐ:NavFrame»: ܦܘܪܫܐ ܒܝܢܝ ܬܢܝܬ̈ܐ
Content deleted Content added
ܙ ܒܘܛ: ܫܘܢܝܐ ܕ ܐܣܘܪ̈ܐ ܕܐܢܛܪܘܝܩܝ, ܐܝܬ ܗܫܐ ܒܘܝܩܝܓܠܝܬ̈ܐ ܥܠ d:q13395701 |
ܙ Bot: Replace deprecated <source> tag and "enclose" parameter; ܫܘܚܠܦ̈ܐ ܫܘܦܪ̈ܢܝܐ |
||
ܣܪܛܐ 1:
{{notice|The use of NavFrame for tables has been deprecated in favor of [[
{{shortcut|WP:NAVFRAME}}
Documentation for '''dynamic navigation boxes'''.
Dynamic navigation boxes use a combination of [[CSS]] and [[Javascript]] to make collapsible navigation boxes.
Example (click "show" or "hide" to see the good bits):
ܣܪܛܐ 11:
From: [[User:Mzajac/Soviet-legacy_AFV_Navbox]].-->
== How to use ==
=== NavFrame divs ===
The basic concept here is to use the [[Span and div|'''div''']] [[HTML element|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: <code>'''NavFrame''', '''NavHead''', '''NavContent'''</code>.
The underlying implementation uses [[Javascript]] to add a "show" or "hide" link in the <code>NavHead</code> part, and to turn the visibility of the <code>NavContent</code> part on or off.
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 <code>class="NavFrame collapsed"</code> (instead of <code>class="NavFrame"</code>) in the outer div element.
==== Simple example ====
You will need to create three <code>div</code> elements:
<
<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 class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
ܣܪܛܐ 36:
To initially hide the content do this:
<
<div class="NavHead">[... This is the title of the hidden content ...]</div>
<div class="NavContent">
[... This content is initially hidden ...]
</div>
</div></
<div class="NavFrame collapsed">
<div class="NavHead">[... This is the title of the hidden content ...]</div>
ܣܪܛܐ 49:
</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="somerandomclass NavHead">
[... This is the title; it does not have to be plain text, you can get creative here ...]</div>
ܣܪܛܐ 57:
[... The content you want to hide goes here ...]
</div>
</div></
<div class="messagebox standard-talk NavFrame">
<div class="somerandomclass NavHead">
ܣܪܛܐ 66:
</div>
==== Getting a caption instead of a heading ====
If you swap the order of the two inner <code>div</code> 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="NavContent">
[... The content you want to hide goes here ...]
</div>
<div class="NavHead">[... This is the caption below your collapsible content ...]</div>
</div></
<div class="NavFrame">
<div class="NavContent">
ܣܪܛܐ 82:
</div>
==== If the title doesn't fit on one line ====
If the title is too long, then the formatting is very bad:
<
<div class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
ܣܪܛܐ 91:
</div>
</div>
</div></
<div style="width: 20em">
<div class="NavFrame">
ܣܪܛܐ 102:
To correct this, you need to add <code>height: auto</code> to the style of the <code>NavHead</code> <code>div</code>, and a dummy element to leave space for the "show/hide" link:
<
<div class="NavFrame" style="width: 20em">
<div class="NavHead" style="height:auto">
ܣܪܛܐ 112:
</div>
</div>
</div></
<div style="width: 20em">
<div class="NavFrame" style="width: 20em">
ܣܪܛܐ 125:
</div>
=== Collapsible tables ===
{{see main|Help:Collapsing}}
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 <
<div class="NavFrame collapsed" style="text-align:left">
<div class="NavHead">Left-alignment</div>
ܣܪܛܐ 151:
== Templates ==
* [[
* [[
{{Navigational templates}}
{{DEFAULTSORT:NavFrame}}
[[
[[ko:위키백과:NavFrame]]
|