Wikipédia:NavFrame

Documentação para caixas de navegação dinâmicas.

Caixas de navegação dinâmicas usam uma combinação de CSS e de Javascript para criar caixas de navegação expansíveis. Os detalhes técnicos estão presentes em MediaWiki:Gadget-ElementosOcultaveis.css e em MediaWiki:Gadget-ElementosOcultaveis.js.

Exemplo:

Modo de uso

Divs NavFrame

O conceito básico consiste em usar a tag HTML Div dentro da linguagem de formatação wiki, de modo a criar conteúdo que o leitor possa esconder ou expandir. A marcação usada para atingir esse fim consiste sobretudo do uso de três classes: NavFrame, NavHead, NavContent.

O exemplo abaixo usa Javascript para adicionar o botão esconder/expandir na NavHead (cabeçalho/barra de título), e tornar o conteúdo oculto ou visível alternadamente. Os web browsers que não suportam javascript, ou que tenham-no desactivado, o conteúdo estará sempre visível e o botão show/link não estará presente.

Por padrão, este código mostra o conteúdo e um link para escondê-lo. Para que o oposto ocorra, que o conteúdo fique escondido inicialmente, use class="NavFrame collapsed" (em vez de class="NavFrame") no div de fora. Não adicione style="display:none;" a NavContent, porque isso impossibilitará a visualização do conteúdo para utilizadores sem Javascript.

Exemplo simples

Precisas de criar três elementos div:

<div class="NavFrame">
  <div class="NavHead">[... O título da caixa vai aqui ...]</div>
  <div class="NavContent">
    [... O que conteúdo que queres ocultar insere-se aqui ...]
  </div>
</div>

[... O título da caixa vai aqui ...]

[... O que conteúdo que queres ocultar insere-se aqui ...]

Para esconder o conteúdo inicialmente:

<div class="NavFrame collapsed">
  <div class="NavHead">[... Título da caixa ...]</div>
  <div class="NavContent">
    [... O conteúdo aqui aparecerá inicialmente oculto ...]
  </div>
</div>

[... Título da caixa ...]

[... O conteúdo aqui aparecerá inicialmente oculto ...]

Exemplo com classes mistas

Podes definir outras classes além das referidas acima, de forma a criar uma designed mais estilizado:

<div class="messagebox standard-talk NavFrame">
  <div class="algumaclassealeatória NavHead">
    [... Isto é o título; não tem que ser necessáriamente texto simples, podes ser criativo ...]</div>
  <div class="NavContent outraclasse">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
</div>

[... Isto é o título; não tem que ser necessáriamente texto simples, podes ser criativo ...]

[... O conteúdo a ocultar vai aqui ...]

Legenda em vez de cabeçalho

Se trocares a ordem dos dois elementos div interiores, obtens uma legenda sempre visível debaixo do conteúdo opcionalmente escondido, ao invés de um cabeçalho sempre visível:

<div class="NavFrame">
  <div class="NavContent">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
  <div class="NavHead">[... Esta é a legenda por debaixo do conteúdo ...]</div>
</div>

[... O conteúdo a ocultar vai aqui ...]

[... Esta é a legenda por debaixo do conteúdo ...]

Se o título não cabe numa única linha

Se o título for muito longo, a formatação sai estroncada:

<div style="width: 20em">
<div class="NavFrame">
  <div class="NavHead">[... Este é o título do conteúdo que queres ocultar ...]</div>
  <div class="NavContent">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
</div>
</div>

[... Este é o título do conteúdo que queres ocultar ...]

[... O conteúdo a ocultar vai aqui ...]

Para corrigir isto, tens que adicionar height: auto à tag style em NavHead div, e algo mais (palha) para deixar espaço para o botão esconder/expandir:

<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>
[... Este é o título do conteúdo que queres ocultar ...]
  </div>
  <div class="NavContent">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
</div>
</div>

[... Este é o título do conteúdo que queres ocultar ...]

[... O conteúdo a ocultar vai aqui ...]

Tabelas expansíveis

O estado inicial de qualquer conteúdo expansível pode ser definido usando "collapsible table", porque também permite uma tabela apenas com um conteúdo e cabeçalho.

Alinhar

Para alinhar contéudo à esquerda, adicione

 <div style="text-align: left;">

seguindo por

 </div>

após o conteúdo no fim:

<div class="NavFrame collapsed">
  <div class="NavHead">Alinhar conteúdo à esquerda</div>
  <div class="NavContent">
<div style="text-align: left;">
Conteúdo adicionado aqui e alinhado à esquerda, em vez de centrado.
  </div>
</div>
</div>

Alinhar conteúdo à esquerda

Conteúdo adicionado aqui e alinhado à esquerda, em vez de centrado.

O mesmo pode ser feito para alinhar à direita, substituindo left por right.

Limitações

De momento, as três classes Nav* têm styles próprios. Ao misturar classes, pode acontecer que uma classe cancele outra (no exemplo acima NavFrame está a cancelar os styles de .messagebox.standard-talk).

Esta limitação não afecta collapsible tables.

Navegadores

Todos os navegadores web a partir do Internet Explorar 5.5 e adiante (IE6/7/8, Firefox, Safari/Chrome/KHTML, Opera 8/9, etc.) que suportam JavaScript irão expandir estes elementos correctamente.

O Internet Explorer 5 e outros navegadores que não suportam JavaScript não vão poder ler os elementos, pelo que o botão esconder/expandir não aparecerá e o conteúdo estará expandido.

Ver também

Comparação das predefinições de navegação
ver discutir editar	Desmontável	Cor de cabeçalho	Imagem	Grupos	Parâmetro/s de estilo (corpo)	Exemplos
{{Navbox}}	desmontável	navbox	Esquerda/direita do corpo	Sim	Sim	{{Navbox Sistema Solar}}
{{Navbox com grupos anexos}}	desmontável	navbox	Esquerda/direita do corpo e/ou em cada lista	Sim	Sim	{{Universidade de Michigan}}
{{Navbox with columns}}	desmontável	navbox	Esquerda/direita de colunas	Não	Sim	{{Senadores dos EUA}} {{Chéquia}}

Atributos desmontáveis
Tipo	Classes CSS	JavaScript	Desmonta-se quando	Estado inicial personalizado	Aninhamento
Tabelas expansíveis	collapsible	Definido em MediaWiki:Gadget-ElementosOcultaveis.js	2 ou mais autocollapse na página	Sim	Sim