..: Construção de menu pop-up - Parte 1 :..

::Introdução::

Menu pop-up é um elemento de interface muito usado para solucionar o problema de acomodar uma grande quantidade de links de navegação em um espaço reduzido.
Neste tipo de navegação o desenvolvedor tem a possibilidade de projetar uma barra de navegação horizontal com submenus.
Neste tutorial mostrarei como construir uma barra de navegação horizontal para abrigar um, dois ou mais níveis de navegação, abrindo na vertical.
Os subníveis opcionalmente podem ser projetados para abrir na horizontal.
Usarei o Fireworks para gerar o HTML e o respectivo javascript para funcionamento do menu e mostrarei como exportar para uma página web.

---

::Uma visão antecipada::

Desenvolverei o tutorial construindo uma barra de navegação com 4 links que abrem um subnível nos links Link - 1 e Link - 2, três subníveis no Link - 3 e nenhum subnível no Link - 4.
A seguir um screenshot da barra com os subníveis do Link - 3 abertos:

Complementarmente você poderá ver nesta página, o menu em ação.
Indo à página, passe o mouse sobre os links que estão todos ativos.

---

::As características da barra::

Construirei uma barra de navegação com as seguintes características:

• Quatro links chamados de Link -1, Link -2, Link -3 e Link - 4;
• O Link - 1 com um subnível contendo 5 links:
  • Link - 1.1
  • Link - 1.2
  • Link - 1.3
  • Link - 1.4
  • Link - 1.5
• O Link - 2 um subnível contendo 3 links:
  • Link - 2.1
  • Link - 2.2
  • Link - 2.3
• O Link - 3 com três subníveis contendo no primeiro sub-nível 5 links, no segundo subnível 3 link e no terceiro subnível 2 links (ver figura acima):
  • Link - 3.1
  • Link - 3.2
  • Link - 3.3
  • Link - 3.4
    • Link - 3.4.1
    • Link - 3.4.2
      • Link - 3.4.2.1
      • Link - 3.4.2.2
    • Link - 3.4.3
    • Link - 3.4.4
  • Link - 3.5
  • Link - 3.6
• O Link - 4 sem subníveis (um link para contato, por exemplo)

As formas para construção do menu conforme mostrado abaixo:

• Links escritos com fonte Arial, tamanho 11, negrito e cor #cc3300;
• Quatro retângulos de 80 x 15px com fundo #eeeeee (cinza claro) e sem bordas, para os links;
• Um retângulo de 480 x 17px com fundo na cor #eeeeee (cinza claro) e bordas de 1px na cor #cccccc (cinza escuro);
• Três divisores dos links na cor #ffffff (branca), - mostrados sobre o retângulo maior.

---

::Preparando o palco::

Abra o FW, tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento";

Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para:

Largura: 600 pixels - Altura: 400 pixels

Cor da Tela: #FFFFFF (cor branca).

Tecle OK.

Vamos colocar um grid (uma grade) no palco para facilitar a construção das formas.
Veja na figura abaixo:

1. Menu View => Grid => Edit Grid. Esta escolha coloca no palco a caixa de diálogo Edit Grid conforme mostrada na figura;
2. Ajuste os parâmetros conforme mostrado:
   • Color: #000000 (cor preta);
   • Marque Show grid (mostrar o grid);
   • Marque Snap to grid (fixar ao grid - isto faz com que os vértices de uma forma sejam 'atraidos' ou 'fixados' aos pontos de cruzamento do grid);
   • Defina um grid com 80px de largura por 15px de altura (as dimensões dos retângulos para para os links);
3. Tecle OK.

Agora há no palco uma grade de 80 x 15px.

Se você nunca trabalhou com Grid tente o seguinte para treinar, antes de prosseguir:
Tecle Ctrl + Alt + G para 'desligar' o grid, tecle outra vez para 'ligar'.
Dê um zoom de 200%, pegue a ferramenta retângulo e desenhe alguns retângulos para sentir como é fácil colocar os vértices sobre os pontos de interseção do grid. Isto é devido ao 'Snap to Grid'. Tecle Ctrl + Alt + Shift + G para 'ligar' e 'desligar' o Snap to Grid.

Terminando de treinar confira se o 'Snap to grid' está ligado.

---

::Construindo os links e as fatias (slices)::

Observe a seqüência na figura abaixo e acompanhe os 5 passos descritos a seguir:

1. Construa 4 (quatro) retângulos de 80 x 15px sem bordas e com a cor do fundo #eeeeee, um ao lado do outro sobre o grid;
2. Escreva o nome dos links com fonte Arial, tamanho 11, negrito e cor #cc3300 e posicione sobre os retângulos. Por enquanto esconda os textos dos links, para não atrapalhar, indo ao painel layers (a tecla F2 mostra/esconde o painel) e desligando o olho dos textos;
3. Clique sobre cada um dos quatro retângulos com a tecla Shift pressionada, para selecionar os 4 ao mesmo tempo.
   
4. Vá ao menu Edit => Insert => Slice ou tecle Alt + Shift + U . Vai aparecer uma janela popup;
5. Pressione o botão Multiple na janela que se abriu, ou tecle a letra M;
6. São criadas 4 fatias (verde com um círculo) sobre os 4 retângulos como mostrado na figura.

---

::Construindo o conteúdo do subnível do Link - 1::

Acompanhe as etapas 1 a 4 na figura mostrada abaixo:

1. Clique no palco, fora das fatias para sumir os círculo das fatias. Clique no retângulo do Link - 1 para aparecer o círculo da sua fatia. Clique sobre o círculo para aparecer um menu e escolha Add Pop-up menu (adicionar um menu pop-up). Isto fará aparecer a janela 'Pop-up Menu Editor'.
2. Clique no retângulo logo abaixo de 'Text' e digite o nome do primeiro link;
3. Faça o mesmo no retângulo logo abaixo de 'Link' digitando o endereço do link, repita para o retângulo abaixo de 'Target' escolhendo onde abrir o link;
4. Repita os passos acima para os demais links do subnível.

---

::Definindo a aparência do submenu do Link - 1::

Acompanhe na figura mostrada abaixo:

Tendo concluido a etapa anterior clique na aba 'Appearance' do Editor aberto;

Aqui você define a aparência dos links do subnível.
Faça algumas marcações nas caixas do painel e veja na prática o que acontece na tela branca mostrada na parte inferior do painel. Quando estiver satisfeito tecle Next ou clique na aba 'Advanced'. (Não se preocupe com detalhes agora pois você poderá editar e modificar tudo, ou parte, se não ficar legal.)

---

::Mais definições de aparência do submenu do Link - 1::

Acompanhe a figura mostrada abaixo:

Aqui você define mais itens de aparência colocando bordas e cores e estabelecendo a largura do submenu. Novamente faça algumas marcações nas caixas do painel e veja na prática o que acontece na tela branca mostrada na parte inferior do painel. Quando estiver satisfeito tecle Next ou clique na aba 'Position'. (Não se preocupe com detalhes agora pois você poderá editar e modificar tudo, ou parte, se não ficar legal.)

---

::Definindo o posicionamneto do submenu do Link - 1::

Acompanhe a figura mostrada abaixo:

Aqui você define o local onde será aberto o submenu e as coordenadas X e Y en relação ao Link principal. Observe no caso deste tutorial defini x = -1 para começar na borda esquerda de 1px do primeiro link e y=17 para posicionar logo abaixo do retângulo de 480 x 17px.
Terminado clique em 'Done' no Editor.

Para conferir seu trabalho faça o seguinte:
Lembra que logo após digitar o texto dos 4 links você desapareceu com eles clicando no 'olho' do painel layers? Pois bem, vamos trazê-los de volta clicando de novo no 'olho' para eles aparecerem no palco. Feito isto, clique no palco e tecle F12 para ver o resultado no navegador. Passe o passe sobre o Link - 1 para conferir o submenu que voc|ê construiu.
Não se preocupe se as coisas não ficaram como esperado, pois a seguir, mostrarei como editar e corrigir algo que tenha saido errado.

---

---

Deixe seu comentário sobre esta matéria: