Seguidores

Pesquisar

Mostrando postagens com marcador free. Mostrar todas as postagens
Mostrando postagens com marcador free. Mostrar todas as postagens
" 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

 " 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><
/li>

</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-
radius: 10px;
    -webkit-border-bottom-left-
radius: 10px;
    -khtml-border-bottom-right-
radius: 10px;
    -khtml-border-bottom-left-
radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
filter:progid:
DXImageTransform.Microsoft.Alpha(opacity=70);
}
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