Ads 468x60px

Menu de topo que acompanha a página

Olá leitores do Tech and Blogger, hoje mostrarei como colocar um menu de topo que desce junto com a página, e os links são todos centralizados. Para ver uma demonstração clique aqui.
Vamos aos códigos, primeiro procure pela tag </head> e ABAIXO dela coloque o seguinte código:
<style type='text/css'>

#menudetopo {
width:100%;
 height:30px;
 background-color:#1C1C1C;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position:fixed;
}

.linksmtopo2 {
font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
 text-decoration:none;
 padding:5.5px;
 color:#FFFFFF;
 text-align:center;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

.linkstopo2 {
height:30px;
 text-decoration:none;
 color:#FFFFFF;
 padding:7px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

.linkstopo2:hover {
background-color:#363636;
padding:7px;
height:30px;
padding-top:5.5px;
color:#FFFFFF;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
</style>

<div id='menudetopo'>
<div class='linksmtopo2'>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
</div>
</div>


Pronto, seu menu está instalado em seu blog, agora é só trocar os trechos negritados e coloridos em AZUL pelo url do link, e os negritados em VERMELHO trocar pelo nome que o link terá.

---------------------------------------
Atenção: este menu foi baseado no código de um nenu disponibilizado no blog Mundo Blogger.

12 comentários:

Caiume disse...

Ótimo Tutorial Denis, Parabéns.

Denis Gomez disse...

Obrigado Caio, pela visita e pelo comentário :)

Herlan Santos disse...

Muito bom esse menu, parabéns pelo artigo Denis!

Denis Gomez disse...

Que bom que gostou! Obrigado pela visita, elogio e comentário Herlan...

Eliel Neto disse...

Denis como faz aquele menu com a linha mágica para templates do novo designer modelo?

Denis Gomez disse...

Eliel, pretendo fazer um tutorial deste mas acho que sairá no Mundo Blogger!

Will santos disse...

Mto bom esse menu que acompanha a página. Obrigado

Carlos Vinícius disse...

Ótimo artigo e excelente dica.
Parabéns!

4Queijos-Daniel disse...

Ótimo, agora como faz para colocar a barra acompanhando o rodapé?

pjl428 disse...

muito obrigado mas no meu as imagens do blog ficam por cima do menu quando deslizo a pagina

lissa machado disse...
Este comentário foi removido pelo autor.
Unknown disse...

TUDO Q EU PRECISAVA OBG

Postar um comentário