MENU HORIZONTAL COM EFEITO EXPANSIVEL COM IMAGENS

Que tal um menu com um bonito efeito expansivo que mostra uma imagem em na header de seu blog ?

Para isso basta copiar todo o código abaixo e colar em "Elementos de página", 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.

<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>

$('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

MENU HORIZONTAL COM EFEITO EXPANSIVEL COM IMAGENS

quarta-feira, 16 de julho de 20140 comentários

Postar um comentário

Mais Acessadas

Parceiros