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.

Marcadores: , , ,