Menu
  • HOME
  • SOBRE
  • PORTFOLIO
  • MIDIA KIT
  • CATEGORIAS
    • TUTORIAIS HTML
    • LAYOUTS FREE
      • FREEBIES
      • DICAS
      • SITES
      • SÉRIES
      • PAPO NERD
    • FEMINICES
      • RESENHAS
      • CABELOS
      • MODA
      • LIVROS
      • RECEBIDOS
  • MIGOS
  • DESIGNS
  • CONTATO
  • CRÉDITOS
Beleza Nerd
Beleza Nerd - Gleicy Haner

[Pedido] Menu deslizante a hover ;3

25 de março de 2013


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(http://1.bp.blogspot.com/-8kXTrCSJ6TI/T7PpNQtumCI/AAAAAAAAAF4/TfFELS_TSJk/s1600/home%2B%25281%2529.png); } ul#navigation .sobre a { background-image: url(http://2.bp.blogspot.com/-8b0NOVUuGpQ/T7PpNqWONsI/AAAAAAAAAGE/ncafVsfgxg8/s1600/id_card%2B%25281%2529.png); } ul#navigation .contato a { background-image: url(http://2.bp.blogspot.com/-tmsZ5WfQVy0/T7Pp1sJqh2I/AAAAAAAAAGo/tO5AWC7Xb48/s1600/mail%2B%25281%2529.png); } ul#navigation .feedrss a { background-image: url(http://1.bp.blogspot.com/-jMeVHtFdzbc/T7Pp1Qq2rtI/AAAAAAAAAGc/HaGlP612qSE/s1600/rss%2B%25281%2529.png); } ul#navigation .imagens a { background-image: url(http://3.bp.blogspot.com/-WWPgJGVlBZU/T7PpNy2-9fI/AAAAAAAAAGQ/Z2aP6VN4SKA/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 
Compartilhe nas redes sociais! Facebook Twitter Google+



. # 4you # Tutoriais








Compartilhe nas redes sociais!

6 comentários:

  1. Fernanda Summers16:23

    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
    Respostas
    1. Gleicy Haner16:41

      Claro que aceito flor ><

      Excluir
    2. Responder
  2. Fábio Lucas18:44

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner19:45

      HAHA' ele é bem útil!

      De nada ^^

      Excluir
    2. Responder
  3. baby_monster20:02

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

    ResponderExcluir
    Respostas
    1. Gleicy Haner21:36

      o/

      Eu usava ele sim ahauahuaha'

      Excluir
    2. Responder
Adicionar comentário
Carregar mais...

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

Gleicy Haner, tenho 19 anos, sou apaixonada por maquiagem,filmes,livros e gatos. Sou blogueira 4 anos (pelo menos com esse blog haha) estou desenvolvendo um amor incondicional por fotografia. Também a louca dos signos, Taurina com ascendente em Capricórnio (sou legal, eu juro) prezo pela beleza,liberdade e boa vontade de fazermos e sermos exatamente o que queremos. Sou wiccana a alguns anos, e também uma universitária indecisa,mas amo ciências e a área de exatas. Bem vindo ao meu espaço favorito.


Fã page

Teens Forever - Blog

Categorias



Tags

Tutoriais recebidos BEDA resenha livros 4you Dicas moda Maquiagem Musicas blogs sem categoria Layout Free indicação Bloguerices paponerd parceria publipost resenhas Wishlist cabelos html Desabafos PROJETOS batom matte blogueiras games layouts Series Sorteios presskit freebies wishlist da china Bandas listas Solta o verbo amizade feminices inspiracao photoshop playlist semanadebeleza Customização batom ediçoes fotografia opiniões parcerias plus size recebidos da china youtubers beleza beleza nerd compras comprinhas da china demillus dicas para blogueiros english is fun fotos instagram loja chinesa roupas plus size na china sapatos Halloween ano novo batom bbb blogagem coletiva capas editaveis dominio hidratante ilustrações layout lingerie maquiagem gastando pouco maquiagem na china pinceis produtos gratis romwe sapatos na china sorteio acessorios baratos agua de amora ajude animais aplicativos apps batom liquido capa para youtube gratis como bombar no instagram dia das bruxas dicas de fotografia download ebay edicao de imagens edicao de video fotografia para blogs glitter lingerie atacado maquiagens salva vidas paris progressivas receitas reprovados sedução da seda unhas

Parceiros

Quer se tornar parceiro? entre em contato aqui.

+ vistos da semana

  • Formatando e otimizando seus posts - Ajudando seu blog a subir no ranking de pesquisas
    Oláá! tudo bem com vocês? espero que sim! sei que  o blog está a um tempinho sem postagens novas, mas eu tive um problema com o servid...
  • Freebies: Capas/Banners editáveis para seu canal - Download gratuito
    Oláá, tudo bem com você? eu espero que sim! a bastante tempo eu não postava nenhum freebie , então hoje resolvi fazer um teste. Fiz al...
  • Resenha: O Beijo Traiçoeiro - Erin Beaty
    Oláá! tudo bem com vocês? eu espero que sim! Hoje eu trago mais uma resenha de livro, e de um gênero que todo mundo sabe que não ...
  • Shampoo e condicionador BBB de 5 Reais - Linha Óleo de Argan Tok Bothânico
    Shampoo e condicionador Tok Bothânico Óleo de Argan Oláá! tudo bem com vocês? espero que sim! Hoje eu vim trazer a resenha daqueles...
  • Comprinhas da China: Pinceis de maquiagem profissionais no Aliexpress - Jessup Beauty
    Oláá! tudo bem com vocês? eu espero que sim! hoje eu trago a segunda resenha do ano! Pinceis de maquiagem profissionais no Aliexpress ....
Beleza Nerd | www.gleicyhaner.com.br - Todos os direitos reservados © 2013 - 2016
Tecnologia do Blogger | Desenvolvimento: Diamonds Designs