iMasters | Por uma internet mais criativa e dinâmica

Segunda-feira, 26/08/2002 - 01:59 - Por Raphael Simas
Seções relacionadas:

• Dreamweaver

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 2 comentários

Olá pessoal!

Hoje, separei um tema muito legal. Apesar de existirem extensões que façam isso (se não me engano são extensões pagas), é um grande tema. Há um tempo atrás recebi um email com este pedido. Então, tá no ar agora!

Menu mágico

O menu mágico consiste em um menu normal, com os ítens onde, ao clicar em um deles, abrirá um submenu, fazendo com que as outras opções apareçam.

Melhor que explicar, é ver o exemplo pronto....

Veja aqui o exemplo.
Baixe aqui o exemplo.

Dividi em passos pra ficar mais fácil...
Estes passos são baseados no nosso exemplo.

1º Passo: Crie uma tabela com 3 células. Insira em cada uma delas a imagem do menu. Se seu menu não for feito em imagens, pode ser texto também... não influi em nada...
Agora, salve este documento.
Ficará assim

2º Passo: Dê um "Save As" (salvar como) e atribua um nome. Este será o submenu do ítem 1 do exemplo.

Agora, crie na mesma célula da figura/texto do ítem 1 os textos referentes ao submenu. Em nosso exemplo, está como "Sub Ítem do exemplo 01".

Ficará Assim:

Sub Ítem do exemplo 01         Sub Ítem do exemplo 01         Sub Ítem do exemplo 01

3º Passo: Repita o 2º passo, salvando mais dois htms para o menu 2 e o 3 e substituindo os textos.

4º Passos: Agora, você passará em todos os menus linkando.
No htm principal do menu, link a figura/texto 1 para o htm referente ao menu 1. Faça o mesmo para os outros ítens do menu.

Agora, no htm do submenu 1, repita os links, porém, na figura/texto 1, link para o htm principal do menu... isso fará com que ele se feche num segundo clique. Repita isso para os outros ítens, mudando os links para que os mesmos se fechem.

5º Passo: Você já construiu toda estrutura do menu. Agora, vamos colocar dentro de um iframe para que ele rode dentro de uma determinada área.

Crie um novo htm. Nele, crie um iframe... este é o código do exemplo:

<iframe scrolling="no" src="exemplo_menu_pr.htm" height="200" width="186" frameborder="0"></iframe>

Pronto. Agora, quando o menu for carregado, abrirá dentro do iframe. E todos os links serão abertos dentro do iframe, dando uma impressão de que o menu é aberto na mesma página... A única observação que deve ser feita é quanto ao peso dos submenus... um menu pesado demorará a carregar... deixando o iframe em branco até que complete o carregamento...

Esta é uma versão totalmente sem scripts.... se fossem usados scripts, tudo deveria ser carregado na mesma página, sem a necessidade de um iframe para rodar tudo...

Apesar disso, é um excelente recurso... além de ser bonito é muito prático....

Dica:
Use nos submenus timeline para fazer animações como por exemplo o menu entrando da esquerda para a direita... podem ser criados vários tipos de animações.... oriente-se pelo bom gosto....

Bom pessoal, esta foi nossa 25º coluna. Espero que tenham gostado. Mandem pedidos de matérias, dúvidas, sugestões etc...

Um grande abraço a todos vocês e até a próxima semana.

---

Extensões

Faça download das 96 extensões disponibilizadas na última semana!

96 Extensões.zip

Se quiserem, podem fazer pedidos para as extensões também.

Todos os artigos de Raphael Simas

25/10/2005 - Criando texturas de sujeira 20/09/2005 - Regulagem de cor - Parte 02 17/08/2005 - Regulagem de cor e Fireworks 8 04/08/2005 - Fatiamento, conceitos e exportação 28/07/2005 - Pen Tool avançada e vetorização de carro 19/07/2005 - Fireworks Aqua 30/09/2003 - Dreamweaver MX 2004 09/09/2003 - Personalizando o Dreamweaver em detalhes - Parte II 25/08/2003 - Personalizando o Dreamweaver em detalhes 17/06/2003 - Planejamento do site 26/05/2003 - Mais 5 dúvidas freqüentes 12/05/2003 - Do Fireworks ao Dreamweaver 24/04/2003 - Janelas pop-ups hereditárias 07/04/2003 - Behavior Change Property 24/03/2003 - Trabalhando com textos HTML e textos em imagem 18/03/2003 - Dreamweaver / Fireworks: Fatiando, exportando e montando um HTM (Parte 25/02/2003 - Fireworks / Dreamweaver: Fatiando, exportando e montando um HTM (Parte 05/02/2003 - Frames 22/01/2003 - Atualizações dinâmicas com Frames, iFrames, SSI e Templates 08/01/2003 - Desmistificando os "erros" com Camadas 15/12/2002 - F.A.Q. - As 10 dúvidas mais frequentes 13/12/2002 - Especial Dreamweaver MX 13/12/2002 - Tutorial completo para a criação de menus pop-ups, tanto na vertical q 13/12/2002 - Criando botões aqua no Fireworks 10/12/2002 - Atalhos de Teclado (padrões e customizados) 03/12/2002 - Standard View - Layout View 11/11/2002 - Casa Virtual 04/11/2002 - CGI em formulários / CSS em formulários 04/11/2002 - CGI em formulários / CSS em formulários 28/10/2002 - CSS em Backgrounds 21/10/2002 - Navegadores de Imagens - Web Photo Album 14/10/2002 - Publicidade Flutuante 07/10/2002 - Change Options - Opções na compra Online de um Carro 30/09/2002 - Camadas vs. Tabelas - Parte 3 23/09/2002 - Camadas vs. Tabelas - Parte 2 16/09/2002 - Camadas vs. Tabelas 09/09/2002 - Re-leitura - Menus Pop-up 02/09/2002 - Timer 26/08/2002 - Menu mágico 19/08/2002 - Inserindo Medias AVI, MOV e MP3 no HTML 12/08/2002 - Mr. Help para formulários 05/08/2002 - Aplicações Timeline 29/07/2002 - iFrames - CSS em links 22/07/2002 - Jogo 15/07/2002 - Navigation Bar 08/07/2002 - Portais 01/07/2002 - Quebra-Cabeça com DragLayers e TimeLine 24/06/2002 - Explorando Formulários 17/06/2002 - Adaptando um site a várias resoluções 10/06/2002 - Usando Results para corrigir erros 03/06/2002 - Camadas Relativas / Camadas em Frames 27/05/2002 - Criando, Gravando e Editando Commands 20/05/2002 - Rolagem Horizontal com Time Line 12/05/2002 - Rolagem Horizontal 06/05/2002 - Guias com Camadas 29/04/2002 - Pequenas coisas que fazem um grande site - II 22/04/2002 - Pequenas coisas que fazem um grande site 15/04/2002 - Utilizando as Server-Side Includes (SSI) 08/04/2002 - Trabalhando com Templates/Modelos 25/03/2002 - DrawLayers (Camadas) - Parte 03 11/03/2002 - Trabalhando com DrawLayers (Camadas) 04/03/2002 - Uma visão geral sobre o Dreamweaver

2 comentários publicados

• 1. iframe

  Quinta-feira, 26/08/2004, por DSant

  Caro colega, como posso criar um ifreme, com scrolling controlado pelo browse ?
  
  Explico, quer trocar o site de minha empresa que usa frame, para usar iframe, só que tenho paginas miores do que o iframe abre e a barra de rolagem fica sob controle do iframe, gostaria que ficasse sob, controle do browse.
  
  Obrigado
  Bene

  Responder comentário

• 2. como faço para deixar uma imagem de fundo no topo da página sem espaços

  Segunda-feira, 14/03/2005, por Wanderson Martins da Silva

  Caro Raphael Simas, gostaria de saber como faço algo parecido com o que você fez no menu mágico, a imagem está bem colada a barra de endereço até hoje eu apanho nisto...

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Raphael Simas é Diretor de Arte da produtora Café Azul Mídia Digital e utiliza o Macromedia Fireworks como principal ferramenta para a criação para web.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

google mercado photoshop desenvolvimento gerência apple mobile 3g seguranca publicidade ti microsoft lançamento windows iphone brasil yahoo crescimento web linux tecnologia design php internet youtube celular

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!