14 novembro 2016

MENU FIXO NO TOPO COM SUB ABAS

Aprenda adicionar um menu fixo no topo com sub abas no seu blog, e deixa-lo mais profissional. É bem simples e muito fácil!

Atendendo o pedido de uma leitora, que agora não me lembro o nome, o tutorial de hoje será um menu fixo no topo com sub abas, como este. Como o próprio nome já diz, ele é fixo no topo, ou seja, quando você rolar a página o menu irá te acompanhar. O nome científico, digamos assim, desse menu é Drop Down, que é quando passamos o mouse em cima de uma aba, e abaixo aparece sub abas. Veja o modelo:

Este em questão terá somente uma aba com sub-abas, que mostrará as categorias do seu blog. Mas antes de começarmos lembre-se de fazer o backup do seu template para não perde-lo caso ocorra algum erro irreversível. Então, sem mais delongas, vamos ao tutorial!

1º Passo: Instalando o Menu fixo no topo com sub abas.

No painel do blogger, procure por layout, adicionar um gadget, clique na opção html javascript e cole dentro da janela que se abrirá, o seguinte código:

<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
<li><a href="#">HOME</a>
<li><a href="#">BLOGROLL</a>
<li><a href="#">CLIPLING</a>
<li><a href="#">PARCERIAS</a>
<li><a href="#">ANUNCIE</a>
<li><a href="#">SOBRE</a>
<li><a href="#">CONTATO</a>
<li><a href="">CATEGORIAS ⇓ </a>
<ul> 
<li><a href="#">CABELO</a></li>
<li><a href="#">BELEZA</a></li>
<li><a href="#">RESENHAS</a></li>
<li><a href="#">MAQUIAGEM</a></li>
<li><a href="#">UNHAS</a></li>
<li><a href="#">MODA</a></li>
<li><a href="#">CULINÁRIA</a></li>
<li><a href="#">SAÚDE</a></li>
<li><a href="#">DECORAÇÃO</a></li>
<li><a href="#">DIY</a></li>
<li><a href="#">COMPRINHAS</a></li>
<li><a href="#">VIAGENS</a></li>
</ul>
</li></li></li></li></li></li></li></li></ul>
<style></style>
</div>
</div>
<div style="clear: both;">

   </div>



Essa parte é bem simples. No lugar do simbolo jogo da velha (#) você irá colocar o endereço da página correspondente ao nome da aba, por exemplo, em CONTATO adicione o link que direcionará o leitor a página. E assim faça em todas as abas. 

Foi adicionado 12 categorias, mas se por acaso quiser retirar alguma, basta apagar o trecho destacado no código ou se deseja acrescentar é só copiar esse mesmo trecho, e colar abaixo.

Uma seta foi adicionada na frente do nome CATEGORIAS, mas caso não queira, é só deletar. Ou se preferir trocar de símbolo, basta escolher um de sua preferência nesse site.

2º Passo: Personalizando o Menu fixo no topo com sub abas.

Agora procure por modelo, editar html e dentro do corpo do layout aperte ctrl+f e dentro da caixa pesquise por  ]]></b:skin> e acima desse elemento cole o código a seguir:

#NavbarMenu {
background: #FFFFFF; /*--COR DE FUNDO DO MENU--*/
width: 100%;
height: 40px; /*--ALTURA DO MENU--*/
font-size: 12px;
font-family: 'Arial', sans-serif;
color: #4C4C4C;
font-weight: none;
margin: 0;
padding: 0;
text-transform: none;
position: fixed;
top: 0px;
left:0px;
text-align: center;
z-index: 999;
border-left: 280px solid #FFFFFF; /*--ARRASTA O MENU PARA DIREITA--*/
}

#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: #4C4C4C; /*--COR DA FONTE--*/
display: block;
font-size: 13px;/*--TAMANHO DA FONTE--*/
font-family: 'Arial', sans-serif; /*--NOME DA FONTE--*/
font-weight: normal;
text-transform: none;
margin: 0;
padding: 13px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #FFC6DA;/*--COR DE FUNDO DO MENU AO PASSAR O MOUSE--*/ 
color: #4C4C4C; /*--COR DA FONTE DO MENU AO PASSAR O MOUSE--*/
margin: 0;
padding: 13px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #FFFFFF;/*--COR DE FUNDO DA SUB ABA--*/
width: 100px;
color: #4C4C4C; /*--COR DA FONTE DA SUB ABA--*/
font-size: 13px;/*--TAMANHO DA FONTE DA SUB ABA--*/
font-family: 'Arial', sans-serif; /*--NOME DA FONTE--*/
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #FFC6DA;;/*--COR DE FUNDO DA SUB ABA AO PASSAR O MOUSE--*/
color: #4c4c4c; /*--COR DA FONTE DA SUB ABA AO PASSAR O MOUSE--*/
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;

}


Visualize e estiver tudo ok, salve! O que pode ser alterado está sinalizado no próprio código. Use o site html color codes para trocar as cores da fonte e fundo. Caso surja alguma dúvida, é só dar o seu pitaco através dos comentários.

E se você gostou já sabe o que fazer: Compartilhe esse artigo com os amigos, siga o Manual em "Faça parte" que fica na lateral do blog e curta nossa página no facebook para nunca perder nossas novidades. Um enorme beijo e até a próxima.