TUTORIAIS DE DREAMWEAVER
 
Criar um Pulldown Menu  
 

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

Demo: Ver exemplo
 

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:

  1. Na janela dos behaviors vai a Timeline » Go to timeline frame - escolhas a timeline na posição frame nº1.
  2. Timeline » Play timeline - escolhas a timeline.
  3. O 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.

timeline 2

 

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

Selecciona a layer "opcao" e vais aplicar 2 behavior:

  1. Na janela dos behaviors vai a Timeline » Go to timeline frame - escolhas a 2ª timeline na posição frame nº1.
  2. Timeline » Play timeline - escolhas a 2ª timeline.
  3. O event será "on click".
behavior da layer "opcao"
Selecionas o <body> (clica no fundo) e aplica os mesmos 2 behaviors da layer "opcao", só que agora o event será "on focus".
behavior do <body>
 
Por: Sérgio Brandão
 

ANÚNCIOS

 



 
 
 
  Tutoriais | Fóruns de Discussão | Notícias | Jogos | Dicas | Flash | Downloads | Livros
Gifs Animados | Lojas Online | Publicitar no Truques e Dicas | Contactos