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.
vá em guia “Modelo” -> “Editar Modelo”.
Procure por:
<body>
e abaixo dessa tags cole o código abaixo
<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>
Depois de ter configurado o menu conforme as partes em destaque de vermelho no código, visualize e salve!
Obs. Para acrescentar um novo item no menu, copie a parte em negrito e cole abaixo do mesmo.
Design Is Next
.gif)
Nenhum comentário:
Postar um comentário