Pular para o conteúdo
Início » Criar um Pulldown Menu com Dreamweaver

Criar um Pulldown Menu com Dreamweaver

Publicidade - O artigo continua após o banner

Um Pulldown menu muito eficaz e muito simples de fazer, utilizando apenas 3 layers.


Publicidade - O artigo continua após o banner

1. Na primeira layer (do botão menu) que nomeei “menu” será inserida uma imagem ou texto (se for texto, nas propriedades insira “#” como link), onde se clica com o rato para aparecer as opções do menu; a layer “menu” terá de ter um valor “z” (profundidade) superior a todas as outras layer, para que as outras layer passem por baixo dela.

2. A segunda layer nomeada “opcao” será a das opções, esta layer ou a imagem inserida nela terá uma largura igual ou inferior a layer “menu“. Posiciona a layer “opcao”, debaixo da layer “menu“, sem deixar espaço entre elas e com a mesma.

3. A última layer nomeada “esconder” serve para esconder a 2ª (“opcao“) na parte que está por cima da layer “menu“. Por isso ela deverá ser criada por cima da layer “menu“, sem espaço entre elas, ser um pouco mais larga e ter como cor de fundo a mesma do <body>. Como ela vai esconder a layer “opcao“, o seu valor “z” terá de ser superior ao “z” ao da layer “opcao“.

4. Seleccionas a layer “opcao“, abra a janela da timeline (Window » Timeline) crias um objecto. Como a layer já está na sua posição final, selecciona a 1ª keyframe no objecto e moves a layer para cima, até estar completamente por cima da layer “menu“. E a 1ª timeline está feita.

5. Agora temos de chamar a timeline: selecciona a layer “menu”, e vais aplicar 2 behavior:

Publicidade - O artigo continua após o banner

  • Na janela dos behaviors vai a Timeline » Go to timeline frame – escolhas a timeline na posição frame nº1.
  • Timeline » Play timeline – escolhas a timeline.
  • event será “on click“.

6. Para voltar a esconder a layer com as opções crias uma 2ª timeline e dentro dela crias um objecto relativo a layer “opcao“, em que será igual a 1ª timeline mas com as posições trocadas, isto é, a 1ª keyframe terá de ter as mesmas propriedades de posição do que a 2ª keyframe da primeira timeline e a 2ª keyframe terá de ter as mesmas propriedades da 1ª keyframe da primeira timeline.

7. Agora é aplicar esta timeline a layer “opcao” e ao <body>:

Selecciona a layer “opcao” e vais aplicar 2 behavior:

Publicidade - O artigo continua após o banner

  • Na janela dos behaviors vai a Timeline » Go to timeline frame – escolhas a 2ª timeline na posição frame nº1.
  • Timeline » Play timeline – escolhas a 2ª timeline.
  • event será “on click“.

Selecionas o <body> (clica no fundo) e aplica os mesmos 2 behaviors da layer “opcao“, só que agora o event será “on focus“.

Terminamos o menu. Faça o teste para ver funcionando.

Saiba mais aqui!


Comentários

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *