fevereiro 13, 2016

Tutorial: Menu vertical TrueLuv

Imagem de asian, clothes, and fashion
Olá meus babys, tudo bem? Hoje vim trazer um tuto que talvez já até tenha feito, mas acho ele muito útil, e em breve usarei aqui no blog. Esse menu é do blog TrueLuv, é bem bonitinho, e esse blog também tem outros tutoriais, mais para quem usa o Wordpress, mas também tem vários outros tutoriais bem úteis e acessórios. Esse tutorial é original de lá. e eu trouxe pra cá pra explicar do meu jeito. Espero que gostem. Para verem o menu é só clicar em continue lendo.

Quero agradecer aos que visitam frequentemente aqui:
http://nitrogold.blogspot.com.br/ várias coisas interessantes e a blogueira é uma linda fofa <3
www.acessopermitido.com textos incriveis de um blogueiro muito inteligente. 
http://www.inocentementeingenua.net/ coisas variadas sobre beleza, blogueira super fashion.



Então, para fazer o menu assim, copie esse código e adicione ao seu CSS:
Você pode alterar aos cores da font da letra onde está em lilás, e alterar o fundo onde está em rosa.
Lembrando que o a:hover é quando o mouse passa por cima
#nav ul {

padding: 0px;

margin: 0px;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#nav ul li {
display: block;
margin: 1px;
border:0px;
}
#nav ul li a {
display: block;
width: 150px;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
text-indent: 5px;
letter-spacing: 2px;
color: #FEC2E1;
background-color: #FFF1F9;
vertical-align:middle;
}
#nav ul li a:hover {
color: #c0c0c0;
background-color: #F8F8F8;
}

Depois, coloque isso onde quer que o menu apareça, no caso será como gadget (na parte de Layout), então adicione um novo gadget de HTML/JavaScript na lugar que preferir e cole isso:

<div id="nav">

<ul>

<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
<li><a href="http://www.link4.com">Link 4</a></li>
</ul>
</div>

Lembrando que você pode adicionar quantos "quadradinhos/barrinhas" quiser, e alterar o nome em lilás pelo nome quer quer, e onde está em rosa, pelo url que será direcionado ao clicar.
É isso meu povo, espero que tenham gostado, amo vocês. Beijo beijo

3 comentários:

  1. awe, eu no seu blog <33333 obrigada, mesmo!!

    voltei pro blog depois de uns dias bem chatos, e volto com isso, obrigada <3

    o menu é lindo, e simples, bem minha cara na verdade. já sei até como vai ser o próximo lay u v u eu tava procurando um assim mas tive que fazer um pq não achava em nenhum lugar, nem mesmo no trueluv.

    espero que esteja tudo ok contigo, beijos <3
    ☆☆☆☆☆
    http://nitrogold.blogspot.com.br/

    ResponderExcluir
  2. Oi,
    Não sei se você se lembra de mim(você já fez alguns layouts para o meu blog e eu sou extremamente grata por isso).Fiquei muito feliz em saber que você voltou com o blog e te desejo muito sucesso nesse retorno.
    E como sempre ,ótimo tutorial :)

    www.paginasempreto.blogspot.com.br

    Beijos

    ResponderExcluir
  3. RAY AK: que bom que foi útil pra ti e obrigado pela visita. Volte sempre!


    RAFA: minha linda lembro de ti claro! Que bom que ainda tem seu blog, obrigado pelo carinho volte sempre aqui. Saudades

    ResponderExcluir