1 de ago. de 2010

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 ? Veja aqui o efeito. 



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>



<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

 <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

12 comentários:

  1. tem como colocar abaixo do template espero respostas obrigado

    ResponderExcluir
  2. o template ja veio com os esse menu
    e eu coloquei esses ai mas os que ja vemm no template nao tira

    ResponderExcluir
  3. cOMO EU mundo as imagens q estão ai quero mudar?

    ResponderExcluir
  4. Quero deixar a Direita como no DEMO como posso proceder ?

    Parabens pelo post

    ResponderExcluir
  5. Eu tenho qe colocar esse códiogo do efeito depois de algum código no HTML do blog ? Por que sempre que faço aparece a mensagem: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The markup in the document following the root element must be well-formed.

    ResponderExcluir
  6. oi, estou a tentar colocar no meu blog, mas não funciona muito bem. acontece que o menu fica sempre aberto, não recolhe. Ainda não coloquei as imagens nem os links, mas não havia de recolher?

    Dá uma olhada a ver como fica: http://ptworldweb.blogspot.com/

    Desde já grato pela ajuda.

    ResponderExcluir
  7. @PTWorldWeb

    ok, já vi aqui que não "visita" blogs... ok... mas ao menos alguma ajuda porque é que o menu não está a recolher? é algum problema no código ou estou a fazer algo errado?

    obrigado.

    ResponderExcluir
  8. responde logo minha filha todas as perguntas me interessao e aos leitores aatualize seu blog -.-

    ResponderExcluir
  9. Olá. Eu já li o post diversas vezes, mas ainda não consegui resolver meu problema, e vi que muitos aqui também estão precisando de ajuda quanto ao 'recolhimento' dos links. Digo, as imagens aparecem, mas ela não recolhe, esconde os botões. Eles ficam sempre completamente visíveis.

    Será que poderia, por favor, nos ajuda? Obrigado.

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube