Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Bloghost
» Início » Design » Fireworks » Criando um Menu pop-up (menu dropdown) no Fireworks -->
 
Avaliação: | Publicado em: 09/07/2007
Criando um Menu pop-up (menu dropdown) no Fireworks
Cristian Romanelli é graduado em Arquitetura e Urbanismo e trabalha atualmente como web designer no Lebara Design Studio.


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!!!

Obs: Para exportar o menu criado, exporte escolhendo a opção "Html and Images"  e na opção  slices: "export slices".

Espero que este tutorial ajude-o em seus trabalhos!!!!
abraço  e até o próximo tuto!!!!

Arquivos anexos ao artigo

Paulo Fonseca <psfonseca@gmail.com>
Nossa, muito bom!!! Pra ficar melhor falta só anexar/publicar os arquivos de algum exemplo pra gente brincar!!!
pedro
legal, ajudou bastante!! valeu
aguardo os proximos.
Olá!
Excelente tutorial!
Bem explicado, rápido e objetivo!
Parabéns!
Daniel
show de bola amigo... Parabéns.
Gostei, mas faltou efeitos no menu e mais exemplos.
Muito legal, mais eu gostaria de saber como faço para exportar ele para o Dreamweaver e fazer com que os menus continuem aparecendo.
Pois criei eles da forma correta, mais na hora de exportar vem o problema. Se exporto em flah, a tela fica branca, e não parece nada.
Se exporto em html so aparece os nomes e as vezes até sem efeito. =/
Se puder me ajudar eu adoraria.
Adorei!!! era o que procurava... porém não consigo fazer funcionar os links... os coloco na "caixa", e quando testo nada! me ajude, por favor!
eu uso Macromedia Fireworks MX eu consegui fazer esse efeito de subemenu uma vez! so que agora faço tudo certinho mais nao abre os subemenus,qual sera o problema?
Obrigado gostei.
Amigo, criei um site e utilizei o Menu Drop Down...
O menu funciona corretamente na resolução 800 x 600, porém na resolução 1024 x 768, os sublinks fica todos na parte de cima do site...ou seja, não acompanham os menus !!!

Pode me ajudar ?
O site é:
http://www.abem-educmed.org.br/novo/

mtu bom...
Bruno Alves da Silva <brunoalves_brn@msn.com>
Muito Obrigado...
me vez repensar o modo do menu do meu site...
Grato mesmo...