14 novembro 2016

MENU FIXO NO TOPO COM SUB ABAS

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:


MENU FIXO NO TOPO COM SUB ABAS


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.

30 comentários:

  1. otimo tutorial parabéns xd

    Com carinho, Renata Prado | Entre Zombies e Unicórnios |

    ResponderExcluir
    Respostas
    1. Obrigada Renata!

      Grande beijo minha linda :*

      Excluir
  2. Respostas
    1. Tenta, e depois me diz se deu certo. Um grande beijo e obrigada! <3

      Excluir
  3. Ameiii obg
    Bjinhos
    naosouapenaslouca.blogspot.com

    ResponderExcluir
  4. Respostas
    1. Fico feliz que tenha dado certo Nanda <3 E o menu ficou lindo no seu blog. Amei saber que você fez o tutorial... É bem fácil néh?!

      Grande beijo :*

      Excluir
  5. O meu não ficou no topo, ficou abaixo do cabeçalho

    ResponderExcluir
    Respostas
    1. Você fez algo errado. Refaça com mais atenção que vai dar certo Simone.
      Depois me conta se conseguiu! Bjs :*

      Excluir
  6. lorena o meu menu ficou do lado esquerdo do blog, estou tentando de várias formas reverter mas nao consigo!! Me ajuda :(

    ResponderExcluir
    Respostas
    1. Milena, em border-left você arrasta o menu pra direita. Faça isso e depois me conta se deu certo. Grande beijo :*

      Excluir
  7. Respostas
    1. Talvez tenha outro código de algum MENU causando conflito e impedindo esse de funcionar. Dê uma verificada, porque o tutorial está 100% correto.

      Excluir
  8. Amei, ficou lindo, aí nessa parte :border-left: 280px solid #FFFFFF; /*--ARRASTA O MENU PARA DIREITA--*/, eu coloquei 0px, aí foi canto né, só que eu queria q as letras ficassem centralizadas, pq ficou o menu de uma cor e uma parte branca do lado.

    ResponderExcluir
    Respostas
    1. É só você trocar o #FFFFFF pela cor que você deseja.

      Bjs e boa sorte!

      Excluir
  9. Oi Lory! Aqui funcionou super bem <3 Mas queria saber como posso mudar a fonte, tentei mudar o nome e tal e nao funcionou D: Agradeço se puder dar uma ajudinha! Beijao

    Quero ser Miranda

    ResponderExcluir
    Respostas
    1. Bom Rayanne, em font-family você pode adicionar a fonte que quiser, basta acessar o site googlefonts e escolher a que deseja. Bjs :*

      Excluir
  10. eu fiz e deu super certo , mas com faz pra quando clicar ir pra pagina ?

    ResponderExcluir
    Respostas
    1. É só adicionar o link correspondente a página no lugar da '#'

      Excluir
  11. copnsegui adicionar mais duas abas nele, depois muito problemas ate conseguir não bugar na s duas primeiras mas a última ficou bugado.

    Tem como adicionar mais abas sem bugar o gadget?

    ResponderExcluir
    Respostas
    1. Tem sim. Basta adicionar a aba que se inicia com li e termina com li, e colocar sempre depois da aba HOME ou antes de CATEGORIA =)
      Espero ter ajudado <3

      Excluir
  12. Amei esse tutorial parabéns, ficou lindo no meu blog se quiser da uma olhadinha.Já estou seguindo bjs https://blogbelievegirl.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Valéria, muito obrigada!
      Seu blog realmente ficou lindo, parabéns <3

      Excluir
  13. eu gostaria de saber como faz para adicionar redes sociais nesse menu...igual ao seu!!
    obg amei o tutorial...

    ResponderExcluir
  14. Adorei! Acabei de colocar no meu blog e ficou o máximo!
    Obrigada pela ajuga :*

    https://cafecflores.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Imagina Mayara, eu que agradeço a visita <3

      Excluir