Menu de topo que acompanha a página

Olá leitores do Mundo Informal, 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 e Techandblogger

Share This :