Você está na página 1de 19

Pr-visualizao da imagem em movimento com JQuery

Hoje veremos como incluir um efeito diferente nas imagens dos posts. Trata-se de um efeito de pr-visualizao em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor dosite CSS Globe em conjunto com o JQuery. Com base no efeito que o script gera, eu fiz uma adaptao na chamada do cdigo HTML e acrescentei um pouco de CSS para ter um melhor funcionamento no Blogger. Neste efeito, quando passamos o mouse em cima de cada imagem miniatura, o script faz com que se abra uma pop up para visualizao da imagem em tamanho maior. Para conseguir este efeito, necessrio a incorporao de javascript base da biblioteca JQuery e insero de cdigos CSS em seu template. Este script funciona em conjunto com a biblioteca do JQuery, caso voc j tenha esta biblioteca instalada em seu blog, no ser necessrio repetir a chamada dela( linha destacada na cor azul no cdigo) V na aba design em Editar HTML e procure pela tag </head> E cole logo ACIMA dela o cdigo a seguir:
Pegar cdigo http://www.mundoblogger.com.br/2011/01/pre-visualizacao-da-imagem-comjquery.html

2. APLICAR ESTILOS CSS


No menu modelo, entre na edio HTML do seu template, no precisa clicar em expandir modelos de widgets e procure pela tag ]]></b:skin> e cole o seguinte cdigo logo ACIMA dela:

ul#imagepreview{ margin:0;

padding:0; } ul#imagepreview li { list-style:none; float:left; display:inline; margin-right:10px; } #preview{ position:absolute; border:1px solid #ccc; background:#000; padding:5px; display:none; color:#fff; } /*---Edite cor da fonte---*/ /*---Edite cor da borda---*/

/*---Edite cor de fundo---*/

Obs: Todos os trechos editveis j esto identificados e destacados no cdigo.

3. ATIVAR O EFEITO NAS IMAGENS


Para usar o Efeito em Imagens dentro do post, necessrio que voc hospede a imagem que vai utilizar, em algum servidor de imagem qualquer, como o Picasa Web, por exemplo. Lembrando que o cdigo a seguir deve ser inserido dentro da postagem a ser publicada, atravs da aba editar html no prprio editor de postagens do Blogger. Para chamar o efeito em imagens utilize o seguinte cdigo, e cole o endereo da sua imagem nos locais indicados:

<ul id="imagepreview">

<li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> <li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> </ul>

No cdigo acima, as partes destacadas em vermelho correspondem a largura e altura da imagem miniatura do post. Se preferir, voc pode ajustar esses valores. Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessrio.

Fodaaaaaaaaaaaaaaaaaaaaaa

jQuery + CSS Melhore seus botes com o efeito Fade


inShare1 Publicado em CSS, Desenvolvimento, Tutoriais, por Domnico Citrngulo No foi toa que o jQuery se firmou como uma das melhores bibliotecas javascript disponveis. Alm de levar o desenvolvimento cross-browser a srio e ser muito fcil de usar, o jQuery tem uma enorme quantidade de plugins. Nesse post vou mostrar como voc pode us-lo para adicionar facilmente um efeito de Fade sutil e elegante aos seus botes. Download Demo

Como funciona
A mecnica simples: a funo jQuery identifica o elemento onde deve ser aplicado o efeito e insere dentro dela uma tag<span>, que quem realmente receber o Fade. Tudo o que voc precisa saber e fazer colocar um pequeno trecho javascript na sua pgina, ajustar seu CSS e adicionar uma classe ao boto que receber o efeito.

exatamente o mesmo efeito que est aplicado aos botes de Download e Demo no incio do post. Voc tambm pode acessar a demonstrao e baixar os arquivos para visualizar melhor o cdigo.

O Javascript
O primeiro passo importar o jQuery normalmente. Depois s inserir a funo abaixo. Perceba que logo no incio do cdigo, na segunda linha, voc deve colocar a classe dos botes que recebero o efeito (nesse caso: efeito_fade). Todos os elementos com essa classe sero animados. 01.<script type="text/javascript" src="jquery.js"></script><br> 02.<script type="text/javascript"><br> 03.$(document).ready(function() {<br> 04.$('.efeito_fade').append('<span class="hover"></span>').each(function () {<br> 05.var $span = $('> span.hover', this).css('opacity', 0);<br> 06.$(this).hover(function () {<br> 07.$span.stop().fadeTo(500, 1);<br> 08.}, function () {<br> 09.$span.stop().fadeTo(500, 0);<br> 10.});<br> 11.});<br> 12.});<br> 13.</script>

O CSS
No CSS, a primeira coisa a fazer criar um boto comum, com a tcnica clssica de image replacement para diferenciar o estado normal (apagado) do estado :hover (aceso). Ou seja, criar uma imagem que contenha os dois estados do boto e ento estiliz-lo usando a propriedade background-position para fazer a troca de um estado para o outro quando o usurio passa o mouse sobre ele. A nica diferena que ao invs de estilizar o estado :hover em si, voc ir estilizar a tag <span> que ser criada dentro do boto como se fosse o :hover, com algumas pequenas mudanas: A primeira posicionar o boto relativamente (position:relative), para que o <span> fique corretamente colocado dentro dele. A segunda posicionar o <span> absolutamente (position:absolute) e repetir as mesmas propriedades do boto, ajustando apenas o background. Eu sei, parece complicado, mas veja como o cdigo no tem nada demais: 01./* botao 1 */ 02.#seu_botao { 03.clear: both;

04.position:relative; 05.display:block; 06.height: 64px; 07.width: 570px; 08.background:url(images/botao.png) no-repeat; 09.background-position:0 0; 10.cursor: pointer; 11.} 12.#seu_botao span.hover { 13.position: absolute; 14.display: block; 15.height: 64px; 16.width: 570px; 17.background: url(images/botao.png) no-repeat; 18.background-position: bottom; 19.} 20. 21./* botao 2 */ 22.#outro_botao { 23.clear: both; 24.position:relative; 25.display:block; 26.height: 64px; 27.width: 570px; 28.background:url(images/outro.png) no-repeat; 29.background-position:0 0; 30.cursor: pointer; 31.}

32.#outro_botao span.hover { 33.position: absolute; 34.display: block; 35.height: 64px; 36.width: 570px; 37.background: url(images/outro.png) no-repeat; 38.background-position: bottom; 39.}

O HTML
Como eu disse, a nica coisa que voc precisa fazer no seu HTML atribuir a classe indicada na funo javascript em todos os elementos que recebero o fade. Nesse caso a classe a efeito_fade. Veja o cdigo dos dois botes desse exemplo: 1.<a href="#" id="seu_botao" class="efeito_fade"></a><br> 2.<br /><br> 3.<a href="#" id="outro_botao" class="efeito_fade"></a> Veja abaixo como ficam os botes desse exemplo e perceba que, por ter um cdigo HTML extremamente simples e deixar toda a mgica para o javascript e CSS, os botes podem ser facilmente aplicados a qualquer parte do seu site. Uma dica experimentar usar essa tcnica no apenas para botes, mas tambm para menus, imagens e outros elementos interativos, tomando sempre cuidado para no exagerar na dose.

jQuery para iniciantes


inShare1 Publicado em Desenvolvimento, Tutoriais, por Domnico Citrngulo Usada por mais de 52% dos 10.000 sites mais visitados do mundo, jQuery a biblioteca javascript mais popular do momento. Open source e com centenas de plugins disponveis, tem ainda 3 outras caractersticas importantssimas: cross-browser, permite criar efeitos e comportamentos com muito pouco cdigo e otimizada ao extremo. Por isso e muito mais, se voc ainda no utiliza jQuery em suas pginas est mais do que na hora de comear. Este o primeiro post de uma srie que pretende explicar bem basicamente o que e como utilizar a jQuery no seu site.

Antes de mais nada

Para comear, pare de pensar em jQuery como um monstro desconhecido. Por enquanto, pense apenas que um arquivo JavaScript (.js) que voc deve incluir na pgina, dessa forma: 1.<script type="text/javascript" charset="utf8"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.j s"></script><br> Pronto, voc j est usando jQuery na sua pgina. Bom, na verdade voc ainda no est usando porque ainda no fez nada com ela, mas todos os seus mtodos j esto disponveis caso voc queira usar.

O que jQuery?
Tecnicamente falando, podemos dizer que jQuery uma biblioteca JavaScript crossbrowser desenvolvida para simplificar os scripts client side que interagem com o HTML. Agora, falando praticamente vamos ver o que isso significa:

jQuery uma biblioteca JavaScript


Parece estranho pensar em um arquivo como uma biblioteca. Porm exatamente isso que ele . Mas ao invs de livros, essa biblioteca tem mtodos. Muitos mtodos. E cada um desses mtodos foi criado para cumprir uma determinada tarefa. Por exemplo, existem mtodos para alterar o valor de um campo de formulrio, para inserir um novo elemento na pgina, para aplicar um efeito de animao em um elemento, etc (Explicao: pense em elemento como sendo cada tag html dentro da sua pgina: por ex: <p>,<h2>, <img>). Agora algo importante para ter em mente: jQuery no ir fazer com que tudo funcione automaticamente para voc. Ele no faz mgica. Voc ainda ter que escrever o cdigo javascript e pensar em como fazer cada coisa A voc pergunta: ento pra qu que eu v ou usar esse treco se vou ter que saber escrever javascript de qualquer jeito?!?! Isso leva segunda parte:

jQuery uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts


A primeira grande vantagem em usar o jQuery que todos os seus mtodos [ok, no todos, mas 99%] foram criados para funcionar em qualquer browser (IE, Firefox, Chrome, Safari, Opera, ) e j foram testados, alterados e corrigidos um milho de vezes. isso que esse cross-browser (entre browsers) quer dizer: voc pode usar os mtodos jQuery sem se preocupar se o que voc est fazendo vai funcionar no IE ou no Safari. Se funcionou em um, funciona em todos [como disse, em 99% dos casos]. A segunda grande vantagem que os mtodos jQuery so muito simples de usar e requerem muito pouco cdigo. Algo que precisava de 10, 20 linhas de cdigo com javascript cru, pode ser feito com 2, 3 linhas usando os mtodos jQuery.

jQuery uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML
Para fechar, apenas tenha em mente que esse client-side significa que tudo o que vc faz com o jQuery acontece no computador do usurio, mais especificamente no browser. Isso por que o jQuery uma biblioteca javascript, e o javascript sempre roda no browser do usurio, diferentemente de linguagens como o PHP ou ASP que rodam no servidor onde o site est hospedado.

Primeiros passos

Para comear, vamos fazer alguma testes bem bsicos para entender como jQuery funciona. A primeira coisa a fazer importar a jQuery para sua pgina. Como disse no incio, para fazer isso basta usar essa linha: 1.<script type="text/javascript" charset="utf8"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.j s"></script> Ok, agora temos todos os mtodos jQuery nossa disposio e podemos comear a escrever nosso cdigo. Como primeiro exerccio, vamos criar um boto que quando clicado usar um mtodo jQuery para alterar uma das propriedades do elemento <body> dessa pgina. Vou colocar o cdigo completo abaixo e explic-lo linha por linha: 1.<a class="botao" id="botao_exercicio1">Mudar backgroundcolor</a><br> 2.<script><br> 3.$('#botao_exercicio1').click(function(){ 4.$('body').css('background-color', "#f90"); 5.});<br> 6.</script> Bem, vamos ver o que o cdigo acima faz e entender os primeiros mtodos jQuery. 1.<a class="botao" id="botao_exercicio1">Mudar background-color</a> A primeira linha no tem segredo. apenas o nosso boto, que na verdade no passa de um link <a>;

Selecionando elementos com $()


1.$('#botao_exercicio1').click(function(){ Toda vez que voc ver um $() no cdigo, entenda como jQuery(), isso porque o sinal $ nada mais que uma abreviao de jQuery, o que timo pois assim voc no precise ficar escrevendo jQuery toda hora (como eu acabei de fazer). Dentro dos parnteses colocamos sempre um seletor, usado para indicar com qual elemento queremos trabalhar. Nesse caso, vou selecionar o boto no qual quero colocar a ao de mudar a cor de fundo da pgina. Existem vrias maneiras de selecionar um elemento html, uma delas usando o id do elemento, colocando # na frente dele, exatamente como fazemos no CSS:$(#botao_exercicio1). OK, selecionei o boto que tem o id=botao_exercicio1. Agora o que vou fazer com ele?

.click(function(){
Depois de selecionar nosso boto, vou usar mais um mtodo: o click(). Este mtodo usado para anexar alguma ao (mtodo) toda vez que o elemento selecionado for clicado. Chamamos esse tipo de ligao, entre um evento (clique) e uma funo, de listener. Ento no se perca: importamos o jQuery para a pgina, criamos um boto, selecionamos o boto usando $(#botao_exercicio1) e agora anexamos um listener ao evento click do boto. Agora vamos definir o que acontecer quando o boto for clicado.

css(background-color, #f90)
1.$('body').css('background-color', "#f90"); A primeira parte dessa linha voc j deve ter entendido. Estou mais uma vez usando o $() para selecionar um elemento da pgina, desta vez o <body>. Perceba que dessa vez no usei o sinal de #, porque no preciso de um id para selecionar o elemento que eu quero. S existe uma tag <body> na pgina ento posso usar apenas o nome da tag. Depois de selecionar o <body>, uso o mtodo css() para alterar uma propriedade CSS do elemento. Obviamente, nesse caso vou alterar a propriedade background-color. O mtodo recebe dois parmetros: a propriedade que ser alterada (background-color) e o valor que quero dar propriedade (#f90). Perceba que eu poderia usar o mesmo cdigo para mudar qualquer propriedade CSS que quisesse. Depois basta fechar os parnteses e chaves que ficaram abertos. Teste o que acabamos de fazer: Mudar background-color do <body> Voltar ao background original

Observaes
- Perceba que nesse exemplo estamos importando o jQuery de um servidor do Google (https://ajax.googleapis.com). O Google disponibiliza a jQuery e vrias outras bibliotecas gratuitamente e voc pode usar esse mesmo endereo no seu site. o que chamamos de CDN (Content Delivery Network). - Voc deve sempre importar a jQuery antes de escrever seu cdigo JS. Caso contrrio, seus mtodos no estaro disponveis. - Note ainda que escrevemos o cdigo JS depois do elemento que estamos selecionando (o boto), caso contrrio, ele tambm no estaria disponvel. Falaremos mais sobre isso no prximo post.

Termos
Mtodo mtodo um trecho de cdigo escrito com o intuito de executar uma tarefa especfica. Cada mtodo tem um nome que usamos para execut-lo. Mtodos tambm podem receber parmetros, que sero usados em sua execuo. Em geral, um mtodo bastante similar a uma funo, com 2 diferenas principais: - um mtodo recebe implicitamente o objeto do qual foi executado - pode operar utilizando dados e outros mtodos contidos dentro da classe do objeto.

jQuery para iniciantes Sintaxe e seletores


inShare2 Publicado em Desenvolvimento, Tutoriais, por Domnico Citrngulo

No captulo anterior voc usou seletores para selecionar os elementos html que queria manipular e ento aplicou alguns mtodos a esses elementos. Essa maneira de escrever e criar seus comandos jQuery muito comum e usada em praticamente tudo o que voc for criar daqui pra frente.

Sintaxe jQuery
Chamamos esse modo de escrita de sintaxe bsica do jQuery. Vamos relembrar, pois importante entender como ela funciona:

Ento podemos dizer que quando usamos o jQuery, sempre selecionamos um dado elemento da pgina e aplicamos um mtodo a este elemento. Isso significa que boa parte da sua habilidade em programar e desenvolver usando o jQuery depende da sua capacidade em selecionar corretamente os elementos da pgina. isso que vamos aprender agora.

Seletores
possvel usar os seletores jQuery para selecionar elementos de vrias maneiras diferentes. As trs principais so: - Por tag: Seleciona todos os elementos da mesma tag. Exemplos: $(p) : Seleciona todos os <p> da pgina; $(div) : Seleciona todos os <div> $(a) : Seleciona todos os <a> - Por class: Seleciona todos os elementos da mesma classe. Exemplos: $(.linkmenu) : Seleciona todos os elementos da classe linkmenu (Ex. <a class=linkmenu>); $(.subtitulo) : Seleciona todos os elementos da classe subtitulo $(.banner) : Seleciona todos elementos da classe banner; - Por id: Seleciona o primeiro elemento que tenha o id especificado. Exemplos: $(#menu) : Seleciona o primeiro elemento que tenha o id menu (Ex. <div id=menu>); $(#titulo) : Seleciona o primeiro elemento que tenha o id titulo $(#rodape) : Seleciona o primeiro elemento que tenha o id rodape;

Combinando seletores
Outra coisa que voc pode fazer combinar esses diferentes tipos de seletores, como voc j faz no css. Sempre que voc colocar um seletor na frente de outro separado por um espao significa que deseja selecionar dentro do primeiro. Por exemplo:

$(#menu a) : Seleciona todos os <a> que estiverem dentro de #menu. Se a pgina tiver outros <a> fora do #menu, estes no sero selecionados.; $(#menu .sel) : Seleciona todos os elementos de classe sel que estiverem dentro de #menu; $(div #link) : Seleciona os elementos de id link que estiverem dentro de um <div>; Se voc no separar as palavras, selecionar os elementos que contenham a classe ou id especificado: $(div.sel) : Seleciona apenas as <div> que tiverem a class sel; $(div#link) : Seleciona apenas as <div> que tiverem o id link; Estas so as formas mais bsicas dos seletores jQuery. Existem muitas outras opes, operadores e maneiras de selecionar elementos na pgina, mas por enquanto vamos ficar com essas. Garanto que j possvel fazer coisas incrveis utilizando apenas estes seletores.

Criar uma boa procura de menu flutuante com jQuery Easing


05 de outubro de 2009 Kevin Liew 22 comentrios Tutoriais


Demonstrao
Anncio

de Download

Introduo
Neste tutorial, estamos prestes a aprender a criar um menu flutuante. Sim, um efeito flutuante usando jquery.easing, animar uma imagem png valor superior

e. O que ele faz , no mouse sobre o item de menu ir flutuar, e no mouse para fora, ele ir afundar. Muito simples, mas parece muito atraente.

1. HTML
O seguinte o layout html. Lembre-se sempre manter o html mais limpo possvel. A classe selecionada. permitir jquery detectar o item selecionado.

1. <Ul 2. 3. 4.

id = "menu" > <li> <a <li> <a <Li href = "#" > item 1 </ a> </ li> href = "#" > Item 2 </ a> </ li> class = "item3" > <a href = "#" > Item 3 </ a>

class = "selected"

</ li> 5. 6. <li> <a <li> <a href = "#" > Item 4 </ a> </ li> href = "#" > Item 5 </ a> </ li>

7. </ Ul>

2. CSS
Consulte a tabela abaixo, que o layout desse menu float.

E tambm, vamos usar a soluo rpida para a imagem png png estamos usando neste tutorial.

1. # Menu 2. 3.

list-style: nenhum ; padding: 0 ;

4. 5. 6. 7. } 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.

margin: 0

auto ;;

height: 70px ; width: 600px ;

# Menu li { float: esquerda ; width: 109px ; height: 70px ; Posio: parente ; overflow: hidden ; }

Menu # li a

posio: absoluto ; top: 20px ; text-indent: -999em ; background: url ( menu.png ) no-repeat display: bloco ; width: 109px ; height: 70px ; 0 0 ;

/ * Rpida correo png para o IE6 * / Posio: parente ; " IMG "&& this.src.toLowerCase () . indexOf (' . png ')> -1 ? ( this.runtimeStyle.backgroundImage = " nenhum ",

29. this.runtimeStyle.filter = " progid: DXImageTransform.Microsoft.AlphaImageLoader ( src = '"+ this.src + "', sizingMethod = ' image ') ", 30. this.src =

31. this.runtimeStyle.filter = " progid: DXImageTransform.Microsoft.AlphaImageLoader ( src = '"+ this.origBg + "', sizingMethod = ' colheita ') ", 32. this.runtimeStyle.backgroundImage = " nenhum ")), this.pngSet = verdadeiro ));

3. Javascript
Este um script de jQuery simples, o que ele faz simplesmente definir o valor superior a 0 e definir o valor padro se no topo do mouse para fora. Estamos usando o plugin jQUery.easing, isso significa que voc pode ter o efeito de animao diferente. :)

1. $ ( documento ). pronto ( funo 2. 3. 4. 5. 6. 7.

()

/ / Obtm o valor mximo padro var top_val = $ ( '# menu de li a' ). css ( 'top' );

/ / Animar o item de menu selecionado $ ( "# menu de li.selected ' ). crianas ( 'a' ). parar (). animar ( { top : 0 } , { easing : 'easeOutQuad' , durao : 500 } );

8. 9. 10. 11. 12. 13. { easing : 14. 15. 16. 17. / / Definir a posio de default } , funo () { / / Animar o item de menu com 0 valor superior $ ( este ). crianas ( 'a' ). parar (). animar ( { top : 0 } , 'easeOutQuad' , durao : 500 } ); $ ( "# menu de li ' ). pairar ( funo () {

18. top_val } , 19. 20. fixa 21.

$ ( este ). crianas ( 'a' ). parar . () animar ( { top : { easing : 'easeOutQuad' , durao : 500 } );

/ / Mantenha sempre o item selecionado anteriormente em posio

$ ( "# menu de li.selected ' ). crianas ( 'a' ). parar (). animar ( { top : 0 } , ); { easing : 'easeOutQuad' , durao : 500 }

22. 23. 24. 25. } ); );

Concluso
Tutoriais como este? Voc pode expressar sua gratido por visitar meus patrocinadores na barra lateral, marc-la e me ajudar a espalhar esse tutorial para os nossos amigos! :) Obrigado!

http://www.webmaster.pt/menu-jquery-9730.html

Como fazer um menu animado suave com jQuery


J viu algum excelente navegao jQuery que deixou Voc est querendo fazer uma de sua preferncia? Hoje vamos procurar fazer isso atravs da construo de um menu e anim-la com alguns suaves efeitos.

http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

A Meta - Um menu Suave


Aqui est uma demonstrao de que ns vamos acabar com at o final.

Introduo - Uma explicao de aliviar


O menu tem uma animao to suave por causa de uma coisa chamada "flexibilizao". Do Adobedefinio the Flash Developer Center um pouco mais completa:

"A flexibilizao termo refere-se acelerao ou desacelerao gradual durante uma animao, o que ajuda suas animaes parecem mais realistas. A atenuao cria uma aparncia mais natural da acelerao ou desacelerao ajustando gradualmente a taxa de mudana. "
Graas magia do plugin jQuery Easing, agora podemos usar facilitando fora de ambientes de Flash e Actionscript. Faa o download no site oficial do projeto .

Passo 1 - Definir a estrutura


Antes de iniciar qualquer jQuery, temos que construir uma estrutura de menu rpido com XHTML e carregar os arquivos do projeto necessrios. Faa nova documentos javascript XHTML, CSS, e. Eu escolhi para nomear cada um dos meus "animated-menu". Faa duas pastas no diretrio raiz para as imagens e JavaScript. Anexei um screenshot da minha

estrutura de pastas para esclarecer:

Nada fora do comum

aqui. Comece por carregar nas bibliotecas necessrias e arquivos externos na cabea. Eu escolhi para carregar jQuery do Google cdigo arquivo on-line, enquanto o plugin aliviar de cima colocado na pasta "js". a ordem de carregamento importante !
ver plain copy to clipboard print ?

1. <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" 2. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 3. 4. < html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en"> 5. < cabea >

6. 7. 8. 9. 10. 11.

< meta http-equiv = "Content-Type" content = "text / html; charset = UTF8" /> < ttulo > Suave jQuery Menu Animado </ title > < ligao rel = "stylesheet" href = "animado-menu.css" />

< roteiro src = "http://jqueryjs.googlecode.com/files/jquery1.3.js" tipo= "text / javascript" > </ script de > 12. < roteiro src = "js/jquery.easing.1.3.js" tipo = "text / javascript" > </script de > 13. < roteiro src = "animado-menu.js" tipo = "text / javascript" > </ script de > 14. </ cabea >

Em seguida, copie nesta estrutura de menus para o corpo:


ver plain copy to clipboard print ?

1. < corpo > 2. < p > Rollover um item de menu para expandi-lo. </ p > 3. < ul > 4. < li class = "green" > 5. < p > < a href = "#" > Incio </ a > </ p > 6. < p class = "subtexto" > A primeira pgina </ p > 7. </ li > 8. < li class = "amarelo" > 9. < p > < a href = "#" > Sobre o </ a > </ p > 10. < p class = "subtexto" > Mais informaes </ p > 11. </ li > 12. < li class = "red" > 13. < p > < a href = "#" > Contato </ a > </ p > 14. < p class = "subtexto" > Entre em contato </ p > 15. </ li > 16. < li class = "blue" > 17. < p > < a href = "#" > Enviar </ a > </ p > 18. < p class = "subtexto" > Envie-nos seu material! </ p > 19. </ li > 20. < li class = "roxo" > 21. < p > < a href = "#" > Termos </ a > </ p > 22. < p class = "subtexto" > coisas legais </ p > 23. </ li > 24. </ ul > 25. </ corpo > 26. </ html > Os itens de menu tem uma classe atribudo a ela que vai designar a cor do bloco. Dentro de cada bloco de menu um ttulo e subttulo que ficaro ocultas por padro.

Passo 3 - Estilo com CSS


Agora que a estrutura do menu est no lugar, vamos adicionar alguns estilos bsicos para neaten-se e organizar o menu horizontal. Overflow deve ser definido a transbordar para cada item da lista. Isto ir assegurar que a legenda para cada item no exibir at que a altura se expande para ajustar.
ver plain copy to clipboard print ?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38.

body { font-family : "Lucida Grande" , fundo : # F3F3F3 ; } ul { Margem : 0; preenchimento : 0; } li { width : 100px ; Altura : 50px ; flutuador : esquerda ; cor : # 191919 ; text-align : center ; estouro : oculto ; } a { cor : # FFF ; text-decoration : nenhum ; } p { preenchimento : 0px } . Subtexto { padding-top : 15px ; } / . . . . . * MENU Classes Cor * / verde { fundo : # 6AA63B ;} amarelo { fundo : # FBC700 ;} vermelha { fundo : # D52100 ;} roxo { fundo : # 5122B4 ;} azul { fundo : # 0292C0 ;} 5px ;

arial ,

sans-serif ;

Passo 4 - Animar com jQuery


Todo o nosso cdigo jQuery vai para o arquivo javascript criado anteriormente. Ele ser chamado de "animado-menu.js" se voc estiver seguindo o meu modelo.
ver plain copy to clipboard print ?

1. $ (Document). Pronto ( funo () { 2. 3. / / Quando o mouse passa por cima 4. $ ( "li" ). mouseover ( funo () { 5. $ ( este ). stop () animar ({height:. '150px ' }, {fila: falso , durao: 6. 7. 8. 9. 10.
600, facilitando: }); 'easeOutBounce' })

/ / Quando o rato removida $ ( "li" ). mouseout ( funo () { $ ( este ). stop () animar ({height:. '50px ' }, {fila: falso , durao: 600, facilitando: 'easeOutBounce' }) 11. });

12. 13. });

H duas aes no cdigo acima. Quando o mouse se move sobre um item de menu, o item inicia uma animao onde ele se expande para 150px de altura sobre 0,6 segundos. A flexibilizao aplicada atravs do plugin 'easeOutBounce ", que faz com que a caixa para" saltar "um pouco, uma vez que atinge o fim da animao (" out "). Quando o mouse movido para fora a animao para o tamanho de partida acionado. Se voc estiver usando isso dentro do contexto de um site maior, simplesmente substituir o elemento selecionado (atualmente "li") para os eventos do mouse para o selector necessrio. O mtodo stop () preso antes de o animar, a fim de evitar um buffer de prdio onde a animao se repetir vrias vezes, se o mouse movido rapidamente sobre ele. Um artigo sobre jQuery Aprender cobre esta soluo em maior profundidade.

Passo 5 - Adicione Alguns Flair


Eu adicionei imagens de fundo para cada um dos itens de menu na verso ao vivo e arquivos de origem para ilustrar algumas possibilidades de design. Existem muitas outras maneiras criativas para adicionar alguma personalidade para o menu. V em frente e experimentar. Se voc chegar a qualquer coisa notvel, no se esquea de compartilh-lo com a gente nos comentrios.