Novidades!
Loading...
quarta-feira, 24 de agosto de 2011

Menu horizontal fixo no topo do blog

Menu fixo na tela Procurando um menu semelhante ao do cblogger? Então clicou na postagem correta! A partir deste artigo vou ensinar como colocar um menu horizontal que por sua vez é fixo no topo da tela. Sendo fixo, o menu não some quando a página é rolada, isso facilita muito a navegação dos usuários que não gostam de subir até o topo da página principalmente quando a postagem é longa.

Vizualização do menu

Eis o código, copie-os, depois faça o login no blogger e entre no painel principal do seu blog.

<style type='text/css'>
#topmenu {
height: 45px;
position: fixed;
top: 0;
left: 0;
z-index: 95469148;
background: #F1F1F1;
width: 100%;
border-width: 1px 0;
border-style: solid;
border-color: #EBEBEB;
border-bottom: 3px solid gainsboro;
-moz-box-shadow: 0px 6px 30px #c9c9c9;
-webkit-box-shadow: 0px 6px 30px #c9c9c9;
box-shadow: 0px 6px 30px #c9c9c9;
}

#topmenu ul {
padding-top: 1px;
color: #555;
margin-top: 8px;
}

.topmenuativo a:link {
color: #c60;
}

#topmenu li {
list-style-type: none;
display: inline;
color: #555;
cursor: pointer;
line-height: 26px;
text-align: center;
font-size: 14px;
font-weight: bold;
}

#topmenu li a {
color: #555;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
text-decoration: none;
padding-left: 26px;
}

#topmenu li a:hover {
color: #C60;
-webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
text-decoration: none;
}
</style>
<div id="topmenu">
<ul>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
</ul>
</div>

Agora clique na guia “Modelo” -> “Editar Modelo”.

Procure por:

<body>

Cole o código abaixo dessa tag.

Depois de ter configurado o menu conforme as partes em destaque de vermelho no código, salve!

Obs. Para acrescentar um novo item no menu, copie a parte em negrito e cole abaixo do mesmo.

16 comentários :

  1. Não consegui colocar em meu blog,sempre da erro.
    www.temdetudonet.com

    ResponderExcluir
  2. Faz um post complementando mostrando como colocar uma imagem junto etc.

    ResponderExcluir
  3. Como coloco o logotipo do meu site nesse menu?

    ResponderExcluir
  4. Esterei fazendo postando um outro menu fixo como este assim que possível, mas desta vez com imagem. Fiquem atentos!

    ResponderExcluir
  5. Com o menu fixo tem alguma forma de fazer com que os vídeos passem por baixo e não por cima do menu? Desde já grato!

    ResponderExcluir
  6. Tem sim, é só acrescentar o seguinte código depois do endereço do vídeo:

    wmode=opaque

    veja um exemplo:

    <iframe width="560" height="349" src="http://www.youtube.com/embed/fZpEjrdf56k?wmode=opaque" frameborder="0" allowfullscreen></iframe>

    ResponderExcluir
  7. CB até deu certo com vídeos do Youtube, mas sendo de outros locais o problema continua =S

    Pelo que andei fuçando aquelas barrinhas da Wibiya incorpora essa função direto no 'menu' mas não consegui localizar no script. Teria algo a ver com o z-index?

    Obrigado mais uma vez!

    ResponderExcluir
  8. Tente usar z-index intão, coloque o código abaixo no css do elementos que aparecem por cima da barra.

    z-index: 99999999;

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. uau vlw pelo post, mais vou descoversar um pouco kkk, sou novo por aki e queria saber se vc ja postou algo sobre como mudar a cor e estilo da barra lateral do blog tipo ------> a sua.
    Naum que eu queira copiar, só quero personalizar meu Blog de acordo com tudo akilo que me chama atenção e conforta meu leitores

    ResponderExcluir
  11. Não, mas vou fazer um tutorial agora mesmo! Fique atento!

    ResponderExcluir
  12. Como fazer para deixa-lo do lado esquerdo, ao invés de centralizado? Desde já valeu pela atenção e pelo ótimo post.

    ResponderExcluir
  13. Como faço para colocar o texto no centro ? não estou conseguindo

    ResponderExcluir
  14. Como faço pra colocar conteudo nesses menus, eu fiz certim, apareceu deboa no meu blog e agr eu quero preencher cada um dos menus com seu conteudo especifico. por exemplo, a aba matematica so com conteudo de matematica, a de portugues só com conteudo de portugues...

    Como faço ?

    ResponderExcluir

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Enviar Mensagem
Esq para Voltar.
Copyright © 2013 Códigos Blogger All Right Reserved