Menus rollover e cascata

Irei mostrar duas formas de criar botões de menus utilizando os mesmos exemplos do
artigo anterior.

1º Estilo - Menu Rollover

Vou mostrar a vocês como criar um botão que quando passarmos o mouse por cima
dele, sua cor de fundo mudará.

1º passo: Selecione todo menu, pressionando as teclas "Ctrl + A".

2º passo: Depois de selecionado, pressione a tecla ( F8 ). A tela "Symbol Properties" irá

aparecer. Veja:

Em "Name", você deverá colocar o nome que você quer dar para o seu botão. Procure
não usar acentos. Em "Type", você deverá selecionar o tipo do objeto. Neste caso,
escolha "Button". Pressione OK para salvar o botão.

Bom, todos objetos que você criar pela "Symbol Properties" irão para "Bliblioteca".
Para você visualizá-la, pressione (F11). Veja que dentro dela tem apenas o objeto
"botao_continue" que está no formato "Button".
Clique duas vezes no objeto "botao_continue" e perceba que irá abrir novamente a tela
"Symbol Properties", mas dessa vez ela virá com um botão a mais que é a "Edit". Veja:

Clique no botão "Edit". Irá abrir a tela para você configurar as ações do botão. Na parte
superior esquerda da tela, você tem as guias "UP, Over, Down, Over While Down e
Active Area. Veja para que serve cada uma delas:

Up (Acima) - Nesta ação você deverá configurar a aparência do menu estático, ou seja,
esta é a forma que o visitante irá ver assim que entrar no site.

Over (Sobre) - Esta ação deverá configurar a aparência do menu enquanto o visitante
estiver com o mouse em cima dele.

Down (Abaixo) - Nesta ação, você deverá configurar a aparência do menu quando o
visitante clicar em cima dele.

Over While Down (Sobre durante o estado abaixo) - Configura a aparência do menu
quando o visitante passar o mouse por cima de um menu já clicado.
Active Area (Área ativa) - Esta propriedade serve para você aumentar ou diminuir a
área em que um botão pode ser clicado. A área na cor verde se chama "Slice".

Cada caso é um caso, mas eu gosto de usar somente as ações Over e Down.

Em todas as guias que você clicar, com exeção da "UP" e da "Active Area", você irá ter
no canto inferior direito um botão chamado "Copy Up Graphic". Veja

Este botão é muito interessante. Clicando nele, fará com que uma cópia idêntica das
características que está na guia anterior a ele vá para a guia que você está. Por exemplo,
na guia UP você mudou a cor da fonte. Quando você ir para a guia Over e pressionar o
botão ele irá fazer uma cópia deste botão já com essas características de cor.

3º passo: Clique na guia "UP" e defina uma cor para o fundo do menu. Neste exemplo
eu estou utilizando efeito degrade. Veja:

4º passo: Vá para a guia "Over" e clique no botão "Copy Up Graphic". Selecione o

fundo do menu e troque sua cor. Veja:

Clique no botão "Done" no canto inferior direito para salvar as alterações. Clique na
guia "Preview" para ver como está ficando.

Veja: passe o mouse por cima do menu abaixo.

Viram pessoal? É um efeito muito fácil de fazer e que também é quase obrigatório usá-
lo na maioria dos sites.

Lembrando que eu utilizei apenas as ações Up e Over. Você podera utilizar todas as
ações se desejar.

Estilo 2 - Menu em cascata

Este estilo de menu é aquele que, quando passamos o mouse por cima, ele abre várias
outras opções (ou submenus).

Para este exemplo, irei utilizar o menu 2 ensinado na matéria anterior.

1º passo: Se o menu não estiver agrupado, selecione-o todo pressionando "Ctrl + A" e
pressione "Ctrl + G" para agrupar. Veja:

2º passo: Selecione o menu e clique com o botão direto do mouse em cima dele.
Aparecerá algumas opções. Clique em "Inserir fatia" ou pressione "Alt + Shift + U".
Você irá perceber que criou-se uma película verde por cima do menu.

Perceba que tem um "alvo" no meio da imagem. Clique em cima deste alvo. Surgirá as
seguintes opções:

Clique em "Adicionar Menu Pop-up " e a seguinte tela irá abrir:

Na tela "Pop up Menu editor" temos várias guias. A primeira que iremos trabalhar é com
a guia "Conteúdo". É nela que iremos adicionar todos os links das opções do menu.
Adicionei algumas opções, veja:
Para por uma sub-opção dentro de uma opção, selecione algum item e clique no botão
"Recuar Menu". É o quarto botão abaixo das guias.

2º passo: Na guia "Aparência", mude visual das opções do menu ao seu gosto. Você
poderá mudar a cor do menu estático, a cor do menu quando o mouse estiver em cima e
configurar bordas, alinhamentos, posição vertical e horizontal, etc...
Veja para que serve alguma das opções:

Células - Você poderá escolher entre Html e Images. Se você quiser algo mais robusto,
escolha "Images", mas se precisar de algo simples, escolha Html.

Posicionamento - Você poderá escolher Vertical menu ou Horizontal menu.

Fontes - Ali você poderá escolher uma fonte para as opções do seu menu.

Tamanho - Definir um tamanho para sua fonte.

Nas opções ao lado de size, você poderá escolher negrito, itálico, e alinhamentos como
esquerdo, centro e direito.

Up State - Defina características para os menus quando eles estiverem parados.

Over State - Você ira definir características para os menus quando você estiver com o
mouse sobre eles.

3º passo: Na guia Avançada, você terá as seguintes opções:

Largura da célula - Nesta opção você configura o tamanho da largura das suas opções
do menu. Eu recomendo deixar em "Automatic".

Altura da célula - Nesta opção você configura o tamanho da altura das suas opções do
menu. Eu recomendo deixar em "Automatic".

As outras opções deixem como está. Eu recomendo vocês a não utilizarem. Use apenas
a opção "Mostrar Bordas" e você poderá trocar a cor da borda.

4º passo: Na guia "Posição", você poderá configurar a posição que vão aparecer as
opções quando você passar o mouse em cima do menu. Isso você fará em um dos quatro
botões do "Menu position". Caso exista subopções, você deverá configurar em
"Submenu Position". Veja:

Após configurar tudo, clique no botão "Done" para salvar as alterações e depois vá na
guia "Preview" para visualizar como ficou seu menu. Para salvá-lo como html e
visualizar no seu Browser, pressione "Ctrl + Shift + X" e clique em "export". Talvez ele
dê a seguinte menssagem:
Basta clicar no botão ok. Se clicar em cancelar, ele não vai ler as Slices no projeto, e seu
menu não ira funcionar. Após clicar em ok, salve como Html e Images. Veja:

Pronto pessoal, espero que tenham gostado. Um abraço a todos.