terça-feira, 17 de junho de 2014

Tutorial: Como colocar o menu no topo

ÐEΔR EPIPHΔNY | via Tumblr

Olá! Hoje venho ensinar uma das coisas mais legal de layout, como por o menu no topo! Eu acho muito moderno e bonito e demorei muito para aprender como fazer isso u_u, então finalmente irei ensinar como. Espero que gostem e caso sim, não se esqueçam de comentar, plssss! 



1) Vá em Modelo > Editar HTML > Ctrl+F > procure por: ]]></b:skin> e cole o seguinte código em cima:
/* NavTop Menu
----------------------- */
#navtop { /*--container geral do menu--*/
border-left: 400px solid #a07c44; /* tamanho da borda e cor- não retire pq ela centraliza o menu */
background:#a07c44; /*--Edite cor de fundo--*/
padding:0px 20px;
position:fixed;
top:0;
left:0;
z-index: 9999;
width:100%;
}
#navtop li {
float: left;
display: block;
padding:5px;
}
#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: center;
display: block;
padding: 5px;
text-transform: none;
text-decoration:none;
color:#fff; /*--Edite cor dos links--*/
font-size:20px; /*--Edite tamanho da fonte--*/
font-family: 'tahoma', corsiva; /* nome da fonte */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navtop li a:hover { /*--links no estado hover--*/
color:#4f350b; /*--Edite cor dos links--*/
text-decoration:none;
}
#navtop li ul {
display: none;
}
3) Nesta parte:
border-left: 400px solid #a07c44; /* tamanho da borda e cor- não retire pq ela centraliza o menu */
background:#a07c44; /*--Edite cor de fundo--*/ 
você terá que deixar as mesmas cores, pois o border-left é como um segundo background que faz com que centra-lize o texto, e esse background fica com cor diferente se você não deixar a mesma que no background. Caso você queira arrasta mais para o centro ou mais para a esquerda ou direita, mude o número "400px". Quanto maior o número mais para direita, quanto menor mais para a esquerda. Simples, certo?

Espero que tenham gostado, abraços! :)

Nenhum comentário:

Postar um comentário