19 de fev de 2014

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
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

0 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo