 | Dynmenu, introdução aos menus dinâmicos com DHTML | |||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||
 | | |||||||||||||||||||||||||||||||
| english | |||||||||||||||||||||||||||||||
 |
Nesta página encontra-se uma descrição pormenorizada de cada ficheiro usado neste guia. O leitor é livre de copiar, colar ou adaptar o código apresentado nas suas páginas. Ao longo da página há excertos do código utilizado mas pode aceder aos ficheiros completos a partir das sources. Os menus dinâmicos foram concebidos a partir do princípio da modularidade: a maior parte do código está escrito em páginas próprias que são chamadas nas páginas HTML. Esta prática ajudará o leitor a criar o código para múltiplas páginas e contribuirá sobremaneira para manter, rever e actualizar as páginas. | ||||||||
| Style sheet: dm.css | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Este ficheiro desempenha uma dupla função:
Embora só a primeira função seja relevante para os menus dinâmicos, é importante salientar que é preferível usar style sheets para codificar a apresentação visual das páginas do que embeber a informação visual nas páginas HTML: ao usar style sheets garante-se a coerência do design em todo o sítio e há apenas uma página a modificar ou actualizar quando se revê o sítio, em vez das dezenas ou centenas páginas HTML. Cada menu dinâmico é definido por uma linha de código semelhante a:
Os elementos na linha têm o seguinte significado:
Neste guia uso cinco menus de largura igual. Naturalmente, o leitor pode alterar o número, espaçamento e largura dos menus. Só é importante que as posições iniciais estejam rigorasemente definidas. Aconselho o leitor a não limitar o tamanho dos layers para maior flexibilidade do conteúdo dos menus. Se desejar limitar a largura do menu, use uma tabela com a largura limitada e a altura livre para que possa usar texto mais curto ou mais longo, texto maior ou um número variável de entradas no menu. Há também outros parâmetros adicionais que o leitor pode usar consoante as suas preferências pessoais, tais como:
| |||||||||
| Funções: dm_func.js | |||||||||
|
Este ficheiro contém
Só as primeiras são relevantes para os menus dinâmicos mas as segundas implementam un efeito bastante apreciado - e actualmente muito comum - dos links (ligações) com imagens. O ficheiro começa com a definição de dynmenu, um array de Booleans (valores possíveis: true, false), com uma célula por menu. Como os menus foram definidos por números de 0 a 4, da esquerda para a direita, a definição do array segue a mesma sequência. Quando um dos layers está visível, a entrada correspondente no array vale true, caso contrário vale false. Segue-se a definição de timerID, o array de time-out, com uma célula por layer. Se a visibilidade de um layer está pendente de um time-out activo, a identificação do time-out é guardada na célula correspondente. Caso contrário, o valor da célula não tem significado. Neste guia há cinco menus e por isso, os arrays e os ciclos têm dimensão 5. Para maior generalidade, deveria ser usada uma constante com o número de menus. Só há duas acções
aplicadas aos menus: mostrar e esconder os menus, correspondendo às funções
A função
A acção seguinte é mudar a visibilidade do layer pretendido para visible. No entanto, é necessário multiplicar o código para contemplar as implementações de layers em DHTML usadas nos diversos browsers:
A primeira linha é interpretada pelos browsers mais
recentes que seguem a especificação do Document Object Model do
World Wide Web Consortium (W3C, www.w3c.org).
É o caso do Netscape Navigator 6 e posterior e do Microsoft Internet Explorer
6 e posterior. O nome do A segunda linha dirige-se ao
Microsoft Internet Explorer, versões 4 e 5. O nome do elemento a mudar
é composto por A terceira linha dirige-se
ao Netscape Navigator 4. O nome do elemento a mudar é composto por De seguida o array dynmenu é actualizado, definindo a entrada idx como true:
Para terminar, é lançado um time-out: se o utilizador não escolher uma entrada do menu ou outro menu no prazo de 8000 milisegundos o layer visível será automaticamente escondido:
Esta função dirige-se aos utilizadores com menos experiência e que não estão à vontade com os layers, preferindo ver as páginas sem serem perturbados por elementos sobrepostos. No entanto, esta solução tem um inconveniente: se o utilizador mantiver o ponteiro sobre o menu dinâmico ao fim do período especificado, o menu desaparecerá inesperadamente e o utilizador terá de regressar ao link do título para voltar a revelar o menu. Por isso, o período de time-out deve ponderar os dois interesses contraditórios. Outras implementações teriam resolvido este problema escondendo o menu quando o ponteiro não está sobre ele. Prefiro esta solução porque é mais simples para utilizadores pouco experientes enquanto os utilizadores treinados escolhem a linha do menu que pretende sem quaisquer entraves. A função
De seguida, define-se a propriedade visibility do layer com o índice idx como hidden. Como anteriormente, o código tem de ser multiplicado para contemplar as implementações de layers em DHTML usadas nos diversos browsers:
A primeira linha é interpretada pelos browsers mais recentes que seguem a especificação do Document Object Model do World Wide Web Consortium (W3C, www.w3c.org). A segunda linha dirige-se ao Microsoft Internet Explorer, versões
4 e 5. Neste modelo, todos os layers se encontram sob o array de
objectos A terceira linha dirige-se ao Netscape
Navigator 4. Neste modelo, os layers encontram-se sob o array de
objectos Finalmente, o array dynmenu é actualizado, definindo a célula idx como false:
O efeito das imanges roll-over é implementado por duas funções:
Quando o ponteiro (também chamado cursor ou mouse (rato)) passa sobre uma imagem com o código roll-over, o ficheiro source da imagem (propriedade SRC) é alterado para um ficheiro com o nome do actual acrescido do sufixo "ov": se a source da imagem fôr o ficheiro "XYZ.jpg", a source da imagem roll-over é o ficheiro "XYZov.jpg". Em resumo, todas as imagens em que se pretende o efeito roll-over devem ter a sua source duplicada com um outro ficheiro com o sufixo "ov". O
código da função
Quando
o ponteiro sai de cima de uma imagem com o efeito roll-over, a source
original é reposta, ou seja, sem o sufixo "ov", através
da função
Este código é de aplicação genérica e é independente do caminho (path) para as imagens. Os únicos requisitos são o uso do sufixo "ov" e o uso de extensões com três letras. Convém recordar que apenas a source é alterada com o roll-over, mantendo-se a dimensão da imagem original. Por isso as duas imagens devem ter as mesmas dimensões. | |||||||||
| Conteúdo dos menus: dm_po.js | |||||||||
|
O ficheiro dm_po.js guarda o conteúdo dos menus dinâmicos. Se o leitor desejar construir um sítio multilingue tal como este guia português/inglês os dois ficheiros anteriores seriam comuns a todas as versões e apenas este ficheiro seria específico para cada língua. O ficheiro dm_po.js contém os menus e os links para as páginas em português enquanto o ficheiro dm_en.js se destina às páginas em inglês. A codificação é elementar. O ficheiro contém apenas uma instrução de JavaScript para escrever o código HTML no documento:
O código acima refere-se a um só menu. Os demais menus são idênticos. Os caminhos (paths) dos links neste exemplo são relativos; se o leitor desejar usar o ficheiro dm_po.js em páginas dispersas por diversas pastas/directorias deve usar um de dois métodos:
O segundo método é mais eficiente mas o debug do sítio torna-se mais díficil, excepto nos casos em que o sítio se encontre na raiz do file system (nos sistemas operativos da MicroSoft isto é uma letra de drive, C:, D:, ...). Aconselho o leitor a fazer a divisão
das linhas deste código manualmente pois não se pode usar quebras
de linha no interior de uma instrução de JavaScript. Não
obstante a apresentação do código acima, não usei
quebras de linha no ficheiro dm_po.js que consiste numa única linha com
2702 caracteres. Se o comprimento da linha exceder os limites do seu processador
de texto, o leitor deve usar uma instrução | |||||||||
| Páginas HTML | |||||||||
|
Os três ficheiros anteriores contém o núcleo do código dos menus dinâmicos. Nas páginas HTML, só é necessário acrescentar os links para os três ficheiros e os event handlers. Como todos os ficheiros deste guia têm a mesma implementação dos menus dinâmicos, basta apresentar uma das amostras de código:
E a implementação dos menus dinâmicos está completa... simples, não é ? | |||||||||
| ©2003 João Gomes Mota |
| ||||||||
