" Icones, icons grátis" .... e, Aprenda a fazer..'Menu horizontal com efeito expansivel com imagens"
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: