Criando um Menu pop-up (menu dropdown) no Fireworks
Olá galera, neste tutorial iremos aprender como fazer um menu pop-up, ou seja, um menu principal e sub-menus para os links do mesmo.
Então, sem mais enrolação, vamos ao que interessa:
1º passo: Criar o layout
Crie o layout do seu menu como vc quiser, eu fiz esse:
2° passo: Criar os botões
Para criar um botão selecione o objeto que vc quer como link converta-o para botão, (clique com o botão direito no objeto selecionado , depois em Convert to symbol / button ou selecione o objeto e aperte F8, atalhos são sempre bem-vindos). Veja a imagem:
Para criar efeitos nos botões clique duas vezes no botão criado e o box de edição de botões será aberto. É como no flash os estados do botão: up,over, down, area.
No estado up voce vê o botão como o criou (os objetos que vc selecionou para serem o botão, no exemplo, retangulo + texto), clique no estado over( lado esquerdo e superior do box) o box ficará branco. Veja do lado direito infeiror do box , temos Copy Up Graphic, clique nele. Assim, serão copiados os objetos do estado Up para o Over. Agora é so vc editá-los (mudando a cor do retângulo por exemplo) e assim teremos um efeito no menu quando o mouse passar no botão. Básico....
3° passo:
Criar um menu pop up.
Fazer o menu pop up é algo bem simples, mas de muita eficácia e agilidade no trabalho. Vamos lá então...
Após criado o botão, clique no centro do mesmo, e depois clique em "Add pop-up menu", como na imagem:
4ºpasso: editar o menu/criar links:
Na janela que se abrirá após o clique em Add Pop-up Menu, vamos inserir os links, oberve a figura:
Repare nos links, são: link 1, 1.1, 1.2,1.3 e 1.4 ou seja quero que quando o mouse passar por cima do link 1, apareça os links restantes, criando assim nosso famoso "menu pop-up". Para isso usaremos os icones:
Outdent menu & Indent menu
As imagens dos ícones ja explicam suas funções, o indent serve para a criação de sub-menus e outdent para voltar a condição anterior de link de menu(e não mais sub-link), dessa forma vc trabalha a hierarquia dos links e sublinks, de acordo com sua demanda de conteúdo e necessidade.
A caixa de seu menu deverá ficar com esta hierarquia de links:
5° passo: editar o layout do menu
Editar aparência: clique na aba Appearance e monte sua configuração de layout.
Na aba Advanced você escolhe o tamanho do menu, bordas, etc...
Na aba Position você configura a posição do seu menu e do sub-menu (menu pop-up).
Pronto, finalizamos o processo de criação de nosso menu pop-up no Fireworks.
Agora é so testar(aperte F12) e correr pro abraço!!!
Olá galera, neste tutorial iremos aprender como fazer um menu pop-up, ou seja, um menu principal e sub-menus para os links do mesmo.
Então, sem mais enrolação, vamos ao que interessa:
1º passo: Criar o layout
Crie o layout do seu menu como vc quiser, eu fiz esse:
2° passo: Criar os botões
Para criar um botão selecione o objeto que vc quer como link converta-o para botão, (clique com o botão direito no objeto selecionado , depois em Convert to symbol / button ou selecione o objeto e aperte F8, atalhos são sempre bem-vindos). Veja a imagem:
Para criar efeitos nos botões clique duas vezes no botão criado e o box de edição de botões será aberto. É como no flash os estados do botão: up,over, down, area.
No estado up voce vê o botão como o criou (os objetos que vc selecionou para serem o botão, no exemplo, retangulo + texto), clique no estado over( lado esquerdo e superior do box) o box ficará branco. Veja do lado direito infeiror do box , temos Copy Up Graphic, clique nele. Assim, serão copiados os objetos do estado Up para o Over. Agora é so vc editá-los (mudando a cor do retângulo por exemplo) e assim teremos um efeito no menu quando o mouse passar no botão. Básico....
3° passo:
Criar um menu pop up.
Fazer o menu pop up é algo bem simples, mas de muita eficácia e agilidade no trabalho. Vamos lá então...
Após criado o botão, clique no centro do mesmo, e depois clique em "Add pop-up menu", como na imagem:
4ºpasso: editar o menu/criar links:
Na janela que se abrirá após o clique em Add Pop-up Menu, vamos inserir os links, oberve a figura:
Repare nos links, são: link 1, 1.1, 1.2,1.3 e 1.4 ou seja quero que quando o mouse passar por cima do link 1, apareça os links restantes, criando assim nosso famoso "menu pop-up". Para isso usaremos os icones:
Outdent menu & Indent menu
As imagens dos ícones ja explicam suas funções, o indent serve para a criação de sub-menus e outdent para voltar a condição anterior de link de menu(e não mais sub-link), dessa forma vc trabalha a hierarquia dos links e sublinks, de acordo com sua demanda de conteúdo e necessidade.
A caixa de seu menu deverá ficar com esta hierarquia de links:
5° passo: editar o layout do menu
Editar aparência: clique na aba Appearance e monte sua configuração de layout.
Na aba Advanced você escolhe o tamanho do menu, bordas, etc...
Na aba Position você configura a posição do seu menu e do sub-menu (menu pop-up).
Pronto, finalizamos o processo de criação de nosso menu pop-up no Fireworks.
Agora é so testar(aperte F12) e correr pro abraço!!!