25 março 2013

[Pedido] Menu deslizante a hover ;3


Hóyy gente u_u <3 então vocês já viram o projeto do blog né? então participem aqui eu vou divulgar bastante u-u convenhamos, vamos para o post. Bem acho que pelo titulo já sabem do que se trata, foi um pedido da Ask, um pedido Anonimo '-' mas estou atendendo, é o menu deslizante a hover, quem chegou a ver o lay antigo, eu usava esse menu, e ele é mais ou menos assim:


Curtiu, quem aprender a fazer? continue lendo


Então vá no seu HTML (avah) e procure por:

]]></b:skin>
/* Aqui definimos as propriedades CSS para a lista do menu */ ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; /*---cor de fundo---*/ background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; /*---cor da borda---*/ -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:#CAE3F2; opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; /*---cor do link---*/ text-shadow: 0 -1px 1px #fff; } /* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/ ul#navigation .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHkLnkOLWE7AqEf4Xm5N4TilfkiZxiqsB1nVdVu1Lo0pAaZ8UquU108i8HHbG3-z_e41apkORr2HQiItaKIqtQKTu-fbLhLEPzFQay5FSkLKyWq0gzTLCezJ6Fkao5Y7N9FRI_ZwhyphenhyphenUg4/s1600/home+%25281%2529.png); } ul#navigation .sobre a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTJRkxXb5GoS-7rIAMF9gK9QW3kexmX8C4sNNbfQyujyj6DRFHy9MNY-KPUqQet_kGDU1lJHaxYfsmMk1FMLDvdCylkic6SU_NZdAZYUxe0lt4kptx1Vvc8dNZdVJvVojeGYLpSSGSu4/s1600/id_card+%25281%2529.png); } ul#navigation .contato a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ImZCQf63mrBuClS7YRO5cHFQiBF5meb8SDxNlhzYbGcdJDgdJ_UpVfgzsUVyBOapdPiqxooUeK72bouUS7qyI5ZbtFOwrBUOXhqf8nJ4PIFOYAfj-bnLl7m_drH4aNv7XTc7UNpSEU0/s1600/mail+%25281%2529.png); } ul#navigation .feedrss a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-aUWkVveFCPTguJEb2dj3rdxbJnRCTk4r3VmpcrjAen8vhCK7OndCEd-6fLyfmi-b3PVWxn3x4QS9zT8bOSeGJJZdzQxDNx3zjtfBuXC5T4ag0ON4uiMQk7xLu2qd_7ishwtUX0oF4k/s1600/rss+%25281%2529.png); } ul#navigation .imagens a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6r1GHx5OW5bRnSSwqJle0tJdQOthTF3uM9Dai8vtq1tcfPR-_AovehhSG92AfNX6oz5uwvMmYw55bo9IppRxi-2JdDjXWghjX8cVs5QFIclsxgpZBOuXw99T61a0uBD-Y-iC_tGaXPQ/s1600/images.png); }

 Altere o 
"http://3.bp ..." = url da imagem que vai aparecer.
E o resto está especificado no código.


Ainda não acabou agora vá em </head>

Cole isso ACIMA da tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);    });
    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);    },    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);    });});</script>

Não mude NADA

Agora vam em <header> e cole Acima da tag isso

<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='contato'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
</ul>

URL-AQUI = Url da página
Nome da página = Nome da página (não me diga)

Visualize se estiver tudo certo salve! joinha?

Imagens para usar... procurem no Tumblr u_u eu Juro que vocês acham, ou façam as próprias imagens XP Se quisere algo especifico peçam na ask.

Crédito a : If I Ruled The World 

6 comentários:

  1. oi linda,amei seu blog.gostaria de ser uma de suas afiliadas.Também já vou seguir.Responde no meu blog se vc quiser a afiliação;bjs

    Upgrade U

    ResponderExcluir
  2. Sempre quis aprender o tutorial desse menu ^^ vlw
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  3. wonnn que menu lindooo adoooreii o/ vc usava ele ne?
    acervo-de-livros.blogspot.com

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo