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
(//http://www.imasters.com.br/web/colunistas/dreamweaver/25/ex01.gif)
(//http://www.imasters.com.br/web/colunistas/dreamweaver/25/ex02.gif)
(//http://www.imasters.com.br/web/colunistas/dreamweaver/25/ex03.gif)
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:
(//http://www.imasters.com.br/web/colunistas/dreamweaver/25/ex01.gif)
Sub Ítem do exemplo 01
Sub Ítem do exemplo 01
Sub Ítem do exemplo 01
(//http://www.imasters.com.br/web/colunistas/dreamweaver/25/ex02.gif)
(//http://www.imasters.com.br/web/colunistas/dreamweaver/25/ex03.gif)
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:
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...
-----------------
fonte: imasters
kara o link para baixar e ver o exemplo nao existem, verifica ae
Pow... foi mal velho, esqueci! ^^
Mas... antes tarde do que nunca! hehe
AE:
Veja aqui o exemplo. (//http://www.imasters.com.br/web/colunistas/dreamweaver/25/exemplo.htm)
Baixe aqui o exemplo. (//http://www.imasters.com.br/web/colunistas/dreamweaver/25/exemplo.zip)
Foi malz ae!
beleza
esse menu magico se chama :
dhtml (dynamic html)
rog