• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

30 de março de 2013

Menu Kit

Tumblr_mgvuhpuetl1r3ssjeo1_500_large
diva~
Olá amorecos, hoje iremos aprender como aplicar um menu super perfeito, para seu layout ficar lindo sem esforços, créditos para Lovers of Designs pois achei o tutorial lá, testei em meu blog testes com as modificações de tumblr para blogger e deu certo, e irei ensinar aqui.

O menu é super fácil de colocar e fica lindo de qualquer jeito.
Vamos lá, vale a pena clicar no botão de leia mais!

Cole isso acima de ]]></b:skin>:


.posicao {position:absolute; margin-top: -15px; margin-left:154px;z-index:10000000;}
.menul {background: rgba(255, 255, 255, 0.5);padding:15px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;color:#999;-moz-box-shadow:inset -1px -2px 25px #d4daef;-webkit-box-shadow:inset -1px -2px 25px #fd4daef;box-shadow:inset -1px -2px 25px #d4daef;}
.menu {background: transparent;padding:9px;padding-top:15px;margin:2px; width:100px; border-bottom:6px solid #; font-family: georgia; font-size:14px;-moz-transition:  1s; -webkit-transition:  1s;
-o-transition:  1s;color:#adb6d6; }
.menu:hover {border-bottom:5px solid #bac3e3;background: rgba(255, 255, 255, 0.5);}
  • Entenda o código:

.posicao: é o que vai definir a posição do seu menu, ele quem vai mandar pra onde o menu vai, se é mais para esquerda, mais para direita, distância do topo e etc…

.menul: Esse código define a caixa maior do menu, é a caixa onde todos os links ficam dentro, tome cuidado com ela.

.menu e menu:hover: É a parte das caixinhas do menu, é ela que vai definir a fonte, cor da fonte, cor da caixinha quando passa o mouse e etc…

Cole em um HTML / Javascript para o menu aparecer:
<div class="posicao">
<div class="menul">
<a href="LINK" class="menu">Home</a>
<a href="LINK" class="menu">About</a>
<a href="LINK" class="menu">Ask</a>
<a href="LINK" class="menu">Tumblr</a>
<a href="LINK" class="menu">Links</a>
<a href="LINK" class="menu">Extras</a>
<a href="LINK" class="menu">Themes</a>
<a href="LINK" class="menu">Texts</a>
<a href="LINK" class="menu">Html</a>
</div></div></div>

Super fácil não?! espero que tenham gostado, diz aí quem vai usá-lo hehehe

20 comentários:

  1. Amei fica muito lindooo o menu
    beijos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  2. Fica muito lindo o menu, adorei :3

    Voltamos e com um novo layout no ar, confira lá.
    Beijocas, I'm Fucking a Zombie. @pfvrsah (instagram)

    ResponderExcluir
  3. Que menu lindo e super fácil de fazer!

    Dá uma passadinha?

    cupcakelland.blogspot.com

    ResponderExcluir
  4. O menu é muito lindo,adorei o tuto^^

    Beijos
    Amora R.

    ResponderExcluir
    Respostas
    1. não lembro se já elogiei o seu lay do TWD,ele é muito lindo á pesar que adoro a série.

      Excluir
    2. sério? ama tbm TWD?! haha õ/ bate aqui õ/

      Excluir
  5. Que lindo esse menu :3,amei o layout do TWD (não tinha visto .-.),sou super viciada ! :3

    Já estou seguindo se puder retribuir >uuu<
    Kissus o3o
    http://pandasemparis.blogspot.com.br/

    ResponderExcluir
  6. Que menuzinho fofo! >u< Ele fica lindo o/ o/ o/

    ResponderExcluir
  7. Muito lindo esse menu *o* adorei ele!

    XOXO
    jovenclube(.blogspot.com.br)

    ResponderExcluir
  8. Eu já tinha visto este menu antes, até quase usei no meu layout, é muito fofo neh? Boa dica ;) Kissus

    ResponderExcluir
  9. O meu é lindo *u*
    Adorei >///<

    http://wanted-dream.blogspot.com.br/

    ResponderExcluir
  10. Como é que deixa mais larga a caixa

    ResponderExcluir