•  
     

[Dreamweaver] Criar um Pulldown Menu (ESTILO DE MENU)

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



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".

Imagem



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

Imagem

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".
Imagem
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".
Imagem
behavior do
    <body>