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.
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.
otimo tutorial parabéns xd
ResponderExcluirCom carinho, Renata Prado | Entre Zombies e Unicórnios |
Obrigada Renata!
ExcluirGrande beijo minha linda :*
Dicas maravilhosas por aqui sempre!
ResponderExcluirVOu tentar no meu blog!
Beijocas.
Blog A primeira Casa 🎄 Minhas Inspirações
Tenta, e depois me diz se deu certo. Um grande beijo e obrigada! <3
ExcluirAmeiii obg
ResponderExcluirBjinhos
naosouapenaslouca.blogspot.com
Eu que agradeço Queila <3
ExcluirBjão :*
Muito obrigada, Lorena. Funcionou! <3
ResponderExcluirFico 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?!
ExcluirGrande beijo :*
O meu não ficou no topo, ficou abaixo do cabeçalho
ResponderExcluirVocê fez algo errado. Refaça com mais atenção que vai dar certo Simone.
ExcluirDepois me conta se conseguiu! Bjs :*
lorena o meu menu ficou do lado esquerdo do blog, estou tentando de várias formas reverter mas nao consigo!! Me ajuda :(
ResponderExcluirMilena, em border-left você arrasta o menu pra direita. Faça isso e depois me conta se deu certo. Grande beijo :*
ExcluirNão mudou nada :/
ResponderExcluirTalvez tenha outro código de algum MENU causando conflito e impedindo esse de funcionar. Dê uma verificada, porque o tutorial está 100% correto.
ExcluirAMEI! *-*
ResponderExcluirVc sempre explica tão bem <3
Obrigada Thais <3
ExcluirAmei, 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É só você trocar o #FFFFFF pela cor que você deseja.
ExcluirBjs e boa sorte!
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
ResponderExcluirQuero ser Miranda
Bom Rayanne, em font-family você pode adicionar a fonte que quiser, basta acessar o site googlefonts e escolher a que deseja. Bjs :*
Excluireu fiz e deu super certo , mas com faz pra quando clicar ir pra pagina ?
ResponderExcluirÉ só adicionar o link correspondente a página no lugar da '#'
Excluircopnsegui adicionar mais duas abas nele, depois muito problemas ate conseguir não bugar na s duas primeiras mas a última ficou bugado.
ResponderExcluirTem como adicionar mais abas sem bugar o gadget?
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 =)
ExcluirEspero ter ajudado <3
Amei esse tutorial parabéns, ficou lindo no meu blog se quiser da uma olhadinha.Já estou seguindo bjs https://blogbelievegirl.blogspot.com.br/
ResponderExcluirOi Valéria, muito obrigada!
ExcluirSeu blog realmente ficou lindo, parabéns <3
eu gostaria de saber como faz para adicionar redes sociais nesse menu...igual ao seu!!
ResponderExcluirobg amei o tutorial...
Já tem um tutorial ensinando =)
ExcluirAdorei! Acabei de colocar no meu blog e ficou o máximo!
ResponderExcluirObrigada pela ajuga :*
https://cafecflores.blogspot.com.br/
Imagina Mayara, eu que agradeço a visita <3
Excluiroi! minhas subs abas de categorias não ficaram abaixo de categorias como na foto, ficaram por cima do menu, me ajuda pff
ResponderExcluirÉ possível colocar este menu em uma página comum tipo www.claudio.cuccfree.com
ResponderExcluiromo fazer. pode me explicar.