REPOSITÓRIO DA LÍA » menu http://www.liasiqueira.com.br/blog triste como um problema de usabilidade em um eletrodoméstico pode arruinar uma dieta Sun, 17 Jul 2011 03:03:14 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Menu Drop Down com jQuery http://www.liasiqueira.com.br/blog/2009/10/22/menu-drop-down-com-jquery/ http://www.liasiqueira.com.br/blog/2009/10/22/menu-drop-down-com-jquery/#comments Thu, 22 Oct 2009 14:12:16 +0000 lia http://www.liasiqueira.com.br/blog/?p=412 Não tenho muito o que dizer, é basicamente um menu drop down simples, feito com jQuery. Espero que seja útil pra você como foi pra mim :) rs

Não vou escrever um tutorial, primeiro porque tô com dor de cabeça e segundo porque algumas pessoas precisam aprender a analisar o código-fonte das coisas pra entender realmente como elas funcionam.

O código-fonte do exemplo tem comentários que podem ajudar. Qualquer dúvida, deixe um comentário que eu respondo por e-mail. :P

Assuntos relacionados:

]]> http://www.liasiqueira.com.br/blog/2009/10/22/menu-drop-down-com-jquery/feed/ 1 Menu com efeito Fade usando CSS http://www.liasiqueira.com.br/blog/2008/04/23/menu-com-efeito-fade-usando-css/ http://www.liasiqueira.com.br/blog/2008/04/23/menu-com-efeito-fade-usando-css/#comments Wed, 23 Apr 2008 21:17:06 +0000 lia http://www.liasiqueira.com.br/blog/?p=104 Quem foi que disse que somente no Flash é possível fazer sites com efeitos coloridos, piscantes e animados? Já ouviram falar em CSS + :hover + Gif ? rsrs… ;)

Gostaria de aprender a fazer um menu como este ??

1º Passo:

Abra um editor de html e crie duas listas. Nomeie cada lista com class’s diferentes. Como no meu exemplo: “eskerda” e “direita”.

<ul class="eskerda"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul>
<ul class="direita"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul>

2º Passo:

Usando um editor de imagens que faça gifs animados (eu usei o Adobe ImageReady), você vai criar o efeito que você quer que apareça quando o mouse for passado em cima do botão.

Faça a imagem exatamente do tamanho do botão que você pretende criar. Por isso é bom já imaginar o que você quer fazer antes de começar.

No meu caso, eu imaginei fazer um grande menu, com botões do tamanho de 300x60px, então foi exatamente esse tamanho que fiz a minha imagem. Fiz um degradê de verde para a cor de fundo do meu botão, que no caso é ‘cinza escuro’ ou #666666 como preferir chamar.

Ao salvar o gif, NÃO SALVE COM LOOP INFINITO.
Se você acabou de descobrir que não sabe fazer gifs animados, leia esse tutorial.

3º Passo:

No CSS, insira o código abaixo:

*{padding:0; margin:0;} body{ background-color:#CCCCCC; font-family:"Tahoma",Arial, Helvetica, sans-serif; font-size:11px; } .lista, .direita{ float:left; } .lista li{ list-style:none; width:300px; height:35px; background-color:#666666; padding:25px 15px 0px 15px; color:#CCCCCC; border-bottom:1px solid #333; border-top:1px solid #999; border-left:1px solid #333; border-right:1px solid #999; } .lista li:hover{ list-style:none; width:300px; height:35px; background-color:#666666; padding:25px 15px 0px 15px; color:#ffffff; cursor:pointer; background-image:url(hover2.gif); background-repeat:no-repeat; }

Este CSS está todo ‘comentado’, para que você entenda o que cada propriedade vai fazer com seu menu. Se você quiser, pode deletar os comentários (texto que está entre /* … */), não afetará o resultado final.

Pronto! Agora visualize sua página.

Você pode usar outras cores ou criar outros efeitos… vai da sua criatividade! ;)

Assuntos relacionados:

]]> http://www.liasiqueira.com.br/blog/2008/04/23/menu-com-efeito-fade-usando-css/feed/ 5