Menu horizontal fixo no topo do blog

  Trago hoje, como nosso segundo tutorial, um simples recurso para blogs e sites, porém muito interessante! O menu fixo no topo da página - usado pelo facebook e outros sites grandes - é uma ótima ajuda para quem deseja navegar pelas páginas de seu blog/site, sem ter de ficar "subindo" a tela para consultar o menu. Além de ser muito atraente e profissional, não é tão complicado como pensam!

Ver demonstração

Para colocar um desses em seu blog, basta seguir os seguintes passos, lembrando que você pode editar o código como quiser (desde que tenha alguma noção de CSS ), mas a verdade é que você só precisará mexer na parte gráfica. Vamos lá!

1 - Adicionar código HTML 

Abra o Layout de seu blog e localize a região do rodapé (ou até mesmo a sidebar) e clique em Adicionar um Gadget. Procure pela opção " HTML/ JavaScript " e clique nela. Cole o seguinte código:

<ul id="menu_fixo">
  <li><a href="LINK">TEXTO</a></li>
  <li><a href="LINK">TEXTO</a></li>
  <li><a href="LINK">TEXTO</a></li>
  <li><a href="LINK">TEXTO</a></li>
  <li><a href="LINK">TEXTO</a></li>
</ul>

Altere o código da seguinte maneira: onde estiver escrito LINK, substitua pelo link da página que será encaminhada quando o usuário clicar no TEXTO da mesma linha (substitua o TEXTO pelo que você quiser que seja título do link). Se quiser excluir ou adicionar um link, apague ou duplique uma linha do código ( de "<li>"  até "</li>" ).

Feito tudo isso, salve o gadget. Você perceberá que uma lista não-ordenada apareceu no seu blog. Agora é a transformação!

2 - Adicionar código CSS (personalização)
Vá em Modelo > Editar HTML e procure ( CTRL + F ) por ]]></b:skin>. Logo ACIMA disso, cole:

#menu_fixo {
display:inline-block;
position:fixed; width:100%;
height:50px; /* altura do menu - cuidado ao alterar, existem valores dependentes */
padding:0px 30px;
text-align: center;
top:-1px;
left:0px;
background:#000 url(URL_DA_IMAGEM); /*cor do fundo ou imagem de fundo */
list-style:none;
z-index:999;
font-size:18px; /* tamanho da fonte */
-webkit-box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.4);
}
#menu_fixo li {
display: inline;
float:left;
margin:0px 30px; /* margens do menu*/
height:41px; /* altura do link, ajuste conforme a altura do menu */
line-height:41px; /* igual ao valor acima */
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
text-shadow: 1px 1px 3px #696969;
filter: dropshadow(color=#696969, offx=1, offy=1);
}
#menu_fixo a {
padding:0px 10px;
color:#fff; /* cor do texto do link */
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
#menu_fixo li:hover {
background: rgba(255,255,255,0.8); /* fundo da link quando mouse está em cima */
border:1px solid #fff; /*borda do link quando mouse está em cima*/
-webkit-box-shadow: 0px 0px 7px 1px #2288bb;
box-shadow: 0px 0px 7px 1px #2288bb;
}
#menu_fixo li:hover a {
color:#2288bb;/*cor do link quando mouse está em cima*/
text-decoration:none;
text-shadow: 1px 1px 3px #f2f2f2;
filter: dropshadow(color=#f2f2f2, offx=1, offy=1);
}

Vá fazendo as modificações e visualizando, tome cuidado com as alturas pois elas tem valores dependentes umas das outras! Você pode adicionar muitos mais atributos para o menu, mas como essa aula não é sobre CSS, só adicionei o básico para ficar com uma aparência bem agradável, o resto é com você! Depois disso, salve o modelo e pronto, seu menu fixo está pronto!

Ver demonstração

Qualquer dúvida, erro ou sugestão comente! Não esqueça de seguir e partilhar o blog, nos siga nas redes sociais! Obrigado!

Compartilhe essa postagem!