Para quem estava louco por esse menu que uso aqui no TT hoje vou compartilhar como ele é e indicar o tutorial que usei. Ele não é nada complicado de colocar no blog, porém dá um pouquinho de trabalho para ajustar ele ao restante do layout, por isso você deve ter conhecimento básico de HMTL para poder colocar ele mais pro lado, subir tudo através de códigos.
Veja como o menu fica:
Vantagens
Ele deixa seu blog mais organizado, dá para colocar todo conteúdo do seu blog e muito mais, você pode adicionar mais links em cada menu, alterar cor e liberar o espaço de um menu na coluna lateral do blog para outras coisas, e vamos combina fica bem legal não é?
Importante
Antes de ir conferir o tutorial, salve seu template original em seu pc, caso você não tenha sucesso, dê algum erro e tal basta substituir o errado pelo original.
O tutorial que eu usei foi este aqui muito simples e tem apenas dois códigos. O menu vai ficar com um design diferente do meu, mas basta você personalizar as cores do código ou usar o código abaixo já personalizado por mim ao invés do primeiro código lá do tutorial:
/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #000; *--Coloque a cor de fundo do menu--*
width: 100%; height: 39px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
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; /*--edite cor do link--*/
display: block;
font-size: 16px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background:;
color:#F5277A; /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#E7426A;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
float: none;margin: 0;padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background#F12C8B;/*--cor de fundo hover--*/
color: #000; /*--cor do link--*/
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;}
Bom, é bem simples, aconselho que vocês tentem colocar o menu antes em um blog de testes e ver como é e tal.
Dicas Extras
Ao editar o segundo código do menu onde você coloca os link e sub links é preciso ter atenção, porque qualquer errinho, código apagado o menu vai ficar todo louco, veja como editar:
Cada conjunto do código abaixo representa um link e seus sub links do menu:
<a href='ENDEREÇO DO SEU LINK AQUI'>Dicas</a> -- link principal
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Moda</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Seu blog</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Beleza</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Compras</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Filmes</a></li>
</ul>
</li>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Moda</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Seu blog</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Beleza</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Compras</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Filmes</a></li>
</ul>
</li>
as únicas coisas que você precisa editar são as partes coloridas do código, veja:
Vermelho: É o link principal do menu onde as pessoas passam o mouse e ai sim, aparecerem os submenus
Lilás: Você coloca o link que o sub link deve direcionar.
Roxo: Coloque o nome do sub link.
Para adicionar mais links a cada sub menu, basta repetir o código abaixo antes de: </ul></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Filmes</a></li>
É isso ai gente, o básico é isso, espero que o de vocês dê certo, eu ralei um pouco pra domar o meu mas conseguir, é só ter um pouco de paciência :)
0 Comentários