Criação de Menu Deslizante através do DreamWaver

Salve, salve galera!!!

Neste artigo, irei mostrar como desenvolver um menu “pop-up” totalmente personalizado, a sua maneira, usando apenas o Dramweaver, sem a necessidade de conhecimento de linguagem de programação.

- Você deverá ter o layout do site desenvolvido, então crie uma imagem (figura 1.1) que será a base do menu:

Figura 1.1

 

 - No meu caso estou utilizando a figura “Menu” como figura base para o Menu.

- Crie uma Nova Camada (figura 2.1) e a posicione sobre a figura base (figura 2.2). Logo, crie o layout do Menu dentro da Camada (figura 2.3).
Obs.: Não se esqueça de nomear a camada, de melhor forma para identificá-la,

(figura 2.1)

(figura 2.2)

 

(figura 2.3)  

-  Selecione a Camada que será o menu, e, na caixa de ferramentas “Propriedades” no campo “vis” selecione “hidden” para ocultar a camada.

 - Selecione a Figura Base, acesse a caixa de ferramentas “Comportamentos” (SHIFT + F3). Na guia “Comportamentos” pressione o botão “+” e selecione a opção “Mostrar-Ocultar as Camadas” (figura 3.1).  

 

(figura 3.1)

 - Ao acessar a opção “Mostrar-Ocultar as Camadas”, uma janela abrirá mostrando todas as camadas existentes no seu arquivo. (em nosso exemplo apenas 1)

- Selecione a camada referente ao menu e pressione o botão “Mostrar”, clique em Ok (figura 3.2).

- Na caixa “Comportamentos” selecione o evento e clique na seta. Um sub-menu abrirá e deverá ser selecionado a opção “OnMouseOver”.

- Repita a operação e no lugar de “Show” selecione “Hide” e no sub-menu selecione a opção “OnMouseOut”.  

(figura 3.2)

Bem galera, espero que vocês tenham gostado, no próximo artigo estarei enviando como desenvolver um menu semelhante a esse, porém em FireWorks. Enviem dúvidas, críticas ou sugestões de artigos para o e-mail, renato.salgados@gmail.com.

Abraços a todos, fui!!!