Seguidores
Pesquisar
O Dry Icons é um excelente site com vários ícones de qualidade incontestável. Entre, escolha e baixe.
Alguns exemplos abaixo. Clique na imagem e vá até a página.
|
Posted: 31 Jul 2010 10:46 PM PDT
" Que tal um menu com um bonito efeito expansivo que mostra uma imagem em na header de seu blog ? " Vide o efeito em: http://tympanus.net/Tutorials/FixedNavigationTutorial2/
" Para isso basta hospedar o script em um site e depois copiar e colar o código abaixo em uma HTML/Javascript em seu blog, fazer as modificações necessárias (APENAS ONDE ESTÁ COM LETRA MAIÚSCULA) como os endereços e instalar as imagens de sua preferência e pronto."
jquery-1.3.2.js
<ul id="navigation">
<li class="link1"><a href=" ENDEREÇO DO LINK 1"><span>LINK 1</span></a></li> <li class="link2"><a href="ENDEREÇO DO LINK 2"><span>LINK 2</span></a></li> <li class="link3"><a href="ENDEREÇO DO LINK 3"><span>LINK 3</span></a></li> <li class="link4"><a href="ENDEREÇO DO LINK 4"><span>LINK 4</span></a></li> <li class="link5"><a href="ENDEREÇO DO LINK 5"><span>LINK 5</span></a></li> <li class="link6"><a href="ENDEREÇO DO LINK 6"><span>LINK 6</span></a></li> <li class="link7"><a href="ENDEREÇO DO LINK 7"><span>LINK 7</span></a></li> <li class="link8"><a href="mailto:ENDEREÇO DO EMAIL"><span>Email</span></a>< </ul> <style> ul#navigation .link1 a{ background-image: url(ENDEREÇO DA IMAGEM DO LINK 1);} ul#navigation .link2 a { background-image: url(ENDEREÇO DA IMAGEM DO LINK 2);} ul#navigation .link3 a { background-image: url(ENDEREÇO DA IMAGEM DO LINK 3);} ul#navigation .link4 a { background-image: url(ENDEREÇO DA IMAGEM DO LINK 4);} ul#navigation .link5 a { background-image: url(ENDEREÇO DA IMAGEM DO LINK 5);} ul#navigation .link6 a { background-image: url(ENDEREÇO DA IMAGEM DO LINK 6);} ul#navigation .link7 a { background-image: url(ENDEREÇO DA IMAGEM DO LINK 7);} ul#navigation .link8 a { background-image: url(ENDEREÇO DA IMAGEM DO EMAIL);} ul#navigation { position: fixed; margin: 0; padding: 0; top: 0px; right: 40px; list-style: none; z-index:9999; width:990px; } ul#navigation li { width: 90px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 90px; height: 20px; background-color:#303044;/*cor do menu*/ background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right- -webkit-border-bottom-left- -khtml-border-bottom-right- -khtml-border-bottom-left- text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid: } ul#navigation li a:hover{ background-color:#646588;/*cor do menu ao passar o mouse*/ } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#fff; text-shadow: 0 -1px 1px #4040FF; } </style> <script src=' ENDEREÇO DO SCRIPT HOSPEDADO'/></script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate( 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate( 'marginTop':'-80px' },200); } ); }); </script> Crédito:Timpanus |
fonte e créditos:
Templates e Acessórios
Login
Follow the discussion
Subscribe to this blog post's comments through...
Subscribe via email Use ebds1's email Subscribe
Comments
Logging you in...
Comments by IntenseDebate
About the Author
escritorioonlineja
Esta página é necessário para publicar um comentário. Facebook ... fazê-los um tempo agora!
Related Posts
0 comentários
Mensagem do formulário de comentário:
Agrademos teu comentário,
volte sempre!
Assinar:
Postar comentários (Atom)