[Resolvido] Menu Igual ao Mac em jQuery

[fernandotholl 19]

[Editado: Oops, agora que eu vi que postei no local errado, moderadores, caso queiram mover meu tópico :P]

 

Bom dia pessoal, estou postando aqui pois minhas alternativas já se esgotaram, eu preciso criar um menu igual aquele do MAC OS, aqui vai um exemplo feito em jQuery: www.wizzud.com/jqDock/

 

Até ai tudo bem, eu encontrei dezenas de plugins prontos como este, porém 90% deles são feitos apenas com âncoras, e eu utilizo uma lista não ordenada, que "semântimante" é o correto, e não quero desfazer isso.

 

Meu Código:

<ul id="menu-footer">              
               <li>
                   <div class="ft-img-acesso"><a href="index.html" title="Página Inicial"><img src="icons/48/home.png" alt="Página Inicial" /></a></div>
                   <div class="ft-titulo-acesso"><a href="index.html" title="Página Inicial">Página Inicial</a></div>                            
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Consulta"><img src="icons/48/consulta.png" alt="Consulta" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Consulta</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Configurações"><img src="icons/48/configs.png" alt="Configurações" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Configurações</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Contatos"><img src="icons/48/contacts.png" alt="Contatos" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Contatos</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Ajuda (Help Desk)"><img src="icons/48/help-desk.png" alt="Ajuda (Help Desk)" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Ajuda</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Arquivos"><img src="icons/48/folder.png" alt="Arquivos" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Arquivos</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Busca Geral"><img src="icons/48/busca-geral.png" alt="Busca Geral" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Busca Geral</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Mensagens"><img src="icons/48/mensagens.png" alt="Mensagens" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Mensagens</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Fórum"><img src="icons/48/forum.png" alt="Fórum" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Fórum</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Notícias"><img src="icons/48/news.png" alt="Notícias" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Notícias</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Multimídia"><img src="icons/48/multimidia.png" alt="Multimídia" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Multimídia</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Eventos"><img src="icons/48/events.png" alt="Eventos" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Eventos</a></div>
               </li>
           </ul>

 

Os 10% restantes não se encaixaram com o meu Layout, pois usam propriedades que desconfigurão meu Layout, foi então que eu pensei em fazer do zero.

 

Meu menu está dessa forma:

 

 

Meu código está assim:

/* Objetos */
var $MenuFooter = $('#menu-footer > li');

/* Menu Rodapé */
$MenuFooter.hover(
   function(){
         /* Aumentar a Imagem com efeito (Tipo fade...) */

   },
   function(){
         /* Diminuir a Imagem com efeito (Tipo fade...) */
   }
);

 

Estou fazendo com .hover, se estiver errado por favor me digam, porém estou parado na forma como fazer a animação, se alguém conseguir me ajudar nisso podemos evoluir com o tópico e fazer uma opção simples para esse menu.

 

Obrigado

[NetBoy16 72]

Tentou usar transition ?

 

Clique aqui

 

O unico problema vai ser que o ie nao suporta, mas talvez tenha alguma forma de contornar essa situacao

[fernandotholl 19]

@NetBoy16, obrigado pela resposta, eu pensei nisso também, até encontrei um exemplo pronto utilizando CSS3, porém 90% dos usuários que acessam meu sistema utilizam Internet Explorer. Ai ferra tudo, já estou fazendo meu Layout do zero justamente por isso.

 

Realmente precisa ser algo que rode em todos os navegadores (Menos IE 6 :) Glória).

[NetBoy16 72]

hmmm...agora fuuu :mellow:

 

Tenta pesquisar no google algo como: mac like menu with ul ou css mac menu, ou coisas do tipo

 

Desculpa, mas é só oque posso te dizer no momento e espero que ajude :upset:

[fernandotholl 19]

Então NetBoy, já procurei e encontrei diversos, mais esbarra nos casos que coloquei acima. To numa situação complicada agora, vou ver o que encontro aqui, mais se em paralelo alguem encontrar alguma coisa é só responder ae :D

 

Obrigado.

[NetBoy16 72]

Uma coisa que eu acredito que daria certo ai seria usar Flex, mas boa sorte ai :thumbsup:

[fernandotholl 19]

Seria fácil integrar ao meu Layout?

Uma coisa que eu acredito que daria certo ai seria usar Flex, mas boa sorte ai :thumbsup:

[NetBoy16 72]

Pior que nunca mechi com flex cara, mas sei que dá pra fazer isso com flex, no caso você teria que perguntar nessa secao:Clique aqui

[fernandotholl 19]

Pessoal, na verdade eu posso disponibilizar uma solução bem mais simples, eu posso fazer a imagem apenas aumentar e diminuir, assim eu já consigo um efeito parecido.

 

Eu acho que posso utilizar o mesmo código, porém preciso adicionar um efeito para fazer a transição suave entre o aumentar e diminuir da imagem.

 

Não posso fazer fixo pois as imagens possuem tamanhos diferentes, ou seja, se eu para aumentar coloco o tamanho real da imagem, ao voltar ela precisa estar com o tamanho que estava antes no width e height.

 

O Código ta assim, se algum conseguir me ajudar a fazer esse efeito ficaria muito grato:

 

/* Objetos */
var $MenuFooter = $('#menu-footer > li');

/* Menu Rodapé */
$MenuFooter.hover(
   function(){
         /* Aumentar a Imagem com efeito (Tipo fade...) */

   },
   function(){
         /* Diminuir a Imagem com efeito (Tipo fade...) */
   }
);

[NetBoy16 72]

Ué, pra aumentar você coloca o height e width necessario no hover e pra voltar você nao precisa fazer nada, pois no css no hover ele implementa um tamanho diferente e fora do hover volta pro tamanho default da img.

 

Será que essa transicao você nao conseguiria fazer com javascript ?

[fernandotholl 19]

Então @Netboy, com CSS é Mole :D, porém eu queria adicionar um efeito na transição da imagem menor para a maior. Como é feito em jQuery para mostrar/esconder um elemento por exemplo:

 

<script>
$('#div').fadeOut('slow');
</script>

Isso seria o ideal. Porém eu não consigo aplicar esse efeito no .hover do jQuery

[NetBoy16 72]

Hmmm, entao acredito que o melhor seria você pedir uma ajuda pro pessoal da secao de javascript :)

[fernandotholl 19]

Uhumm

 

[Editado] - Moderador, por favor, finalize esse tópico

 

Hmmm, entao acredito que o melhor seria você pedir uma ajuda pro pessoal da secao de javascript :)

[NetBoy16 72]

Bom, boa sorte :thumbsup: