18 fevereiro 2013

Tutorial: Menu horizontal com sub-abas

Tumblr_miflf0tmrb1rio2hoo1_500_large
www
Oi gente! :3 Muuuita gente me perguntou como fiz esse menu debaixo do cabeçalho, que tem sub-abas. 
Enfim, passou o tempo e esqueci de postar, mas me lembraram na Ask.fm. Eu encontrei esse tutorial nesse site aqui [www] e peço que, se usarem, dêem os créditos a ele, e ao CV ok? Vou cobrar! Hahaha >u<

Olha o resultado:

Se quiser ver como se faz, clique em Leia Mais:
>>Mexe com HTML
>>Grau de dificuldade: Médio

Primeiro, vá em Modelo>Editar HTML> e marque a caixinha "Expandir Modelos de Widget".
Aperte ctrl+f e procure por essa tag:
]]></b:skin>
Achou? Acima dele cole esse código:


/* NavbarMenu 
--------------------------- */ 
#NavbarMenu { 
background: #99ccee url(); /COR DE FUNDO DO MENU EM ESTADO NORMAL 
width: 100%; 
height: 35px; 
font-size: 12px; 
font-family: Arial, Tahoma, Verdana; /TIPO DE FONTE 
color: #FFF; /COR DA FONTE 
font-weight: bold; 
margin: 0; 
padding: 0; 
text-transform: capitalize; 

#NavbarMenuleft { 
width: 100%; 
float: left; 
margin: 0; 
padding: 0; 

#nav { 
margin: 0; 
padding: 0; 

#nav ul { 
float: left; 
list-style: none; 
margin: 0; 
padding: 0; 

#nav li { 
list-style: none; 
margin: 0; 
padding: 0; 

#nav li a, #nav li a:link, #nav li a:visited { 
color: #FFF; /COR DA FONTE DAS ABAS 
display: block; 
font-size: 16px; 
font-family: Georgia, Times New Roman; 
font-weight: normal; 
text-transform: capitalize; 
margin: 0; 
padding: 9px 15px 8px; 
border: 1px solid #fff; /TIPO E COR DE BORDA DAS ABAS 

#nav li a:hover, #nav li a:active { 
background: #33aaff url(); /COR DE FUNDO AO PASSAR O MOUSE 
color: #FFF; /COR DA FONTE AO PASSAR O MOUSE 
margin: 0; 
padding: 9px 15px 8px; 
text-decoration: none; 

#nav li li a, #nav li li a:link, #nav li li a:visited { 
background: #33aaff; /COR DE FUNDO DAS SUB-ABAS QUANDO ATIVAS 
width: 150px; 
color: #FFF; /COR DA FONTE DAS SUB-ABAS 
font-size: 14px; /TAMANHO DA FONTE 
font-family: Georgia, Times New Roman; /TIPO DA FONTE 
font-weight: normal; 
text-transform: capitalize; 
float: none; 
margin: 0; 
padding: 7px 10px; 
border-bottom: 1px solid #FFF; /COR E TIPO DE BORDA INFERIOR 
border-left: 1px solid #FFF; /COR E TIPO DE BORDA À ESQUERDA 
border-right: 1px solid #FFF; /COR E TIPO DE BORDA À DIREITA 

#nav li li a:hover, #nav li li a:active { 
background: #ccc; /COR DE FUNDO DAS ABAS QUANDO ATIVAS 
color: #000000; /COR DA FONTE DAS ABAS 
padding: 7px 10px; 

#nav li { 
float: left; 
padding: 0; 

#nav li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 170px; 
margin: 0; 
padding: 0; 

#nav li ul a { 
width: 140px; 

#nav li ul ul { 
margin: -32px 0 0 171px; 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { 
left: -999em; 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
left: auto; 

#nav li:hover, #nav li.sfhover { 
position: static; 
}

O código está auto-explicativo, cuidado para não apagar nenhum código senão o menu não funciona.
Salve.

Agora vá em Layout>Adicionar novo gadget (www)> HTML/JAVASCRIPT(www) E cole esse código:


<div id='navbarmenu'> 
<div id='navbarmenuleft'> 
<ul id='nav'> 
<li><a href='endereço de seu blog'>Home</a></li> 
<li><a href='endereço do seu link aqui'>Nome da aba</a></li> 
<li> 
<li><a href='endereço do seu link aqui'>Nome da aba</a></li> 
<li> 
<li><a href='endereço do seu link aqui'>Nome da aba</a></li> 
<li> 
<a href='#'>Nome da aba</a> 
<ul> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba </a></li> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba</a></li> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba </a></li> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba</a></li> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba </a></li> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba </a></li> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba </a></li> 
</ul> 
</li> 
<li><a href='#'>Nome da aba</a> 
<ul> 
<li><a href='endereço do seu sublink aqui'>Nome da sub-aba </a></li> 
<li><a href='endereço do seu sublink aqui'>Sub Link #2.2</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub Link #2.3</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub Link #2.4</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub Link #2.5</a></li> 
</ul> 
</li> 
<li><a href='#'>Nome da aba</a> 
<ul> 
<li><a href='endereço do seu sublink aqui'>Sub aba #3.1</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #3.2</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #3.3</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #3.4</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #3.5</a></li> 
</ul> 
</li> 
<li> 
<li><a href='#'>Nome da aba</a> 
<ul> 
<li><a href='endereço do seu sublink aqui'>Sub aba#4.1</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #4.2</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #4.3</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #4.4</a></li> 
<li><a href='endereço do seu sublink aqui'>Sub aba #4.5</a></li> 
</ul> 
</li> 
</li></li></li></ul> 
</div></div>


Faça as devidas modificações e salve :3
~
Se não conseguir, você pode optar por encomendar no Chiclete Encomendas! Se quiser, só clicar aqui:

Espero que tenham gostado! :)

xoxo, vickie

9 comentários:

  1. ownn, sempre fiquei curiosa para saber como fazia esse menu, ebba se um dia precisar o/
    concerteza venho aqui
    acervo-de-livros.blogspot.com

    ResponderExcluir
  2. U_U Acho q esse tipo de menu ajuda bastante na navegação do blog, e na organização tbm. No próximo layout vou usar um menu assim ><
    Beijos, Gabi ~~> Official-wonderland.blogspot.com

    ResponderExcluir
  3. ótimo o tutorial, acho lindo esse menu!

    Half My Heart

    ResponderExcluir
  4. Adorei o tutorial. Vai ajudar muito . Beijos flor sz

    ResponderExcluir
  5. Muito bom esse tutorial!!
    Adoro o menu, muito util para quem tem um blog com muita informação!
    bjs
    http://bpblogdepapel.blogspot.pt/

    ResponderExcluir
  6. funciono legal aqui no meu blog valeu aeeeeeee

    ResponderExcluir
  7. Obrigada,estava procurando faz tempo.
    Sucesso para vc.

    ResponderExcluir