3 de ago de 2012

Menu TopDown


Olá, gente! Tudo bom? Eu espero que sim. Primeiramente, eu queria pedir desculpas. Meu dia anda muito corrido, e eu mal consigo tempo para postar. Espero que você tenham curtido o novo layout.
Bom, hoje vou ensinar como fazer este menu.
Quero lembrar que você não vai encontrar em nenhum outro blog esse tutorial, pois eu adaptei um tutorial para t u m b l r. Então, o código ficou bem exclusivo. Vamos conferir?

Primeiro, quero dar créditos ao tumblr HTML Art, pois o código é de lá. Bora começar:
Vá em: Modelo>>Editar HTML>>Proseguir>>F3 ou Ctrl F.
Agora, você vai procurar por:
]]></b:skin>
Antes de ]]></b:skin> cole: (Ps: Não personalize agora, personalize depois)

#top
position: fixed; /* Troque por Absolute se não quiser que ela role com a página */margin-top:-160px; /* Aumente o número para o menu "subir" */
width:80px;
height:180px;
margin-left:100px; /* Quanto mais você aumenta, mais para a direita vai. Se quiser que vá para a esquerda, deixe o número em negativo */
background: #e7acbd; /* Fundo geral */
color: #fff; /* Cor do nome do menu */
text-shadow: 1px 1px 0px #de8ea5; /* sombra */
box-shadow: 0px 3px 0px #de8ea5; /* sombra */
padding:10px;
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
transition-duration: .90s;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;}

#top:hover{ /* Hover do menu */
margin-top:-10px; /* Aumente o número para o menu "subir" quando aberto */
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
transition-duration: .90s;}
.letra{
font-family:'Dosis';
font-size:30px;
text-transform: uppercase; /* Troque por Capitalize se quiser normal */
text-align: center;}
.nav{padding: 4px 8px 4px 8px;
background:#d6718e;
font-family:'Advent Pro';
font-size:13px;
text-shadow: 1px 1px 0px #cd5376;
margin-top:4px;
margin-bottom:4px;
text-align: center;
text-transform: uppercase;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
.nav:hover{background:#d97a95;}
.nav a{color:#fff;}
Procure agora por  </head> e cole acima dele:
<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>
Então, procure por <header> , e acima dele cole:

<div id="top">
<div class="nav"><a href="link">Home</a></div>
<div class="nav"><a href="link">About</a></div>
<div class="nav"><a href="link">Texts</a></div>
<div class="nav"><a href="link">Flickr</a></div>
<div class="nav"><a href="link">Portfolio</a></div>
<div class="letra">Menu</div>
</div>
Agora, é só voltar no ]]></b:skin> e fazer a personalização. Prontinho, seu menu está finalizado!
Tutorial de TUMBLR adaptado por mim. Não reblog, mesmo com créditos!




8 comentários:

  1. ADOREI,o tutorial!!
    http://pinceladanoarco-ires.blogspot.com.br/

    ResponderExcluir
  2. Olá lindaa ,, tudo bem ?
    aadorei a postagem!
    Vim fazer uma visitinhaa e avisar que tem postagem nova no meu blog ,, dá uma passadinha por lá e . O post é muito interessante e sei que você vai adorar !

    Bgs bgs ,, Katharine Santos ;*

    http://party-fucking.blogspot.com.br

    ResponderExcluir
  3. Amei, pena que não tenho turblr, seu blog é um maximo!
    Dê uma passadinha no meu blog e se gostar por favor siga:
    http://pequenaborboleta1.blogspot.com.br/

    ResponderExcluir
  4. Já to te siguindo, amei, mais não tenho turblr,seu blog é lindo, maravilhoso, pode passar no meu? Se gostar por favor siga:
    http://pequenaborboleta1.blogspot.com.br/

    ResponderExcluir
  5. Super legal o tuto!Vou usar no próximo layout!

    ^-^ ------> Maçã cor de rosa

    ResponderExcluir
  6. Oiii, vc ganhou uma Tag lá no Blog! http://fanforfan.blogspot.com.br/2012/08/tag-nova.html
    Beijos...

    ResponderExcluir
  7. ◕‿◕ Amei Esse tutorial,Pena Que Não Tenho Turblr
    Acabei de Criar Um Blog Será que Podia Dar Uma Olhadinha:
    http://sonhos-em-uma-caixinha.blogspot.com.br/
    Obrigada Até Mais ^^

    ResponderExcluir
  8. Faz o Tutorial da quele menu que tinha icones de corações, o balãozinho de conversa, quando passava o mouse por cima, o balão era o faq ou era o Cbox, o coração bem feito é o Arquivo, Inicio e Your Page, faz o tutorial e eu coloco créditos, por favor, aprova!

    ResponderExcluir

Mini FAQ:
-Não aceito selinhos nem Tags.
-Comentários que não falem nem um pouco sobre a postagem não serão publicados.
-Afiliação apenas para blogs acima de 100 seguidores ou convidados. NÃO INSISTA.
----------------
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡