Menu como o do SP

Gente, mais uma vez, me desculpem na demora nos posts, mas é que eu estava (e ainda estou) com MUITA lição de casa, e estou ficando sem tempo para o blog - sorry.

--------------------------------------------

Bom, deixando esse assunto de lado, e vamos ao que interessa: o tutorial.

No blog Débora Morais (um blog que eu falo bastante aqui), eu aprendi a colocar esse menu, e eu queria ensinar COMO fazê-lo. É um tutorial simples, e mexe bem pouco com html.

Vamos lá?

Então clica em Leia Mais!

Para não dar confusão, cole em seu bloco de notas o seu código html, para não ter prejuízos.

Enfim, adicione em seu layout as tradicionais páginas do blog. Vá em Designer do modelo e edite as páginas, normalmente, não há erros.

Depois, vá em seu html e procure por .tabs-inner .widget ul {.
Logo abaixo do primeiro "padding: 0;", cole:




-Se quiser uma sombra em volta

-moz-box-shadow: 1px 1px 5px #262626;

-webkit-box-shadow: 1px 1px 5px #262626;

box-shadow: 1px 1px 5px #262626;

- Para arredondar as bordas

-moz-border-radius: 40px; 

-webkit-border-radius: 40px; 

border-radius: 40px; 

Para isso também funcionar em estado hover, copie todos os códigos utilizados e cole-os logo abaixo de .tabs-inner .widget li a:hover {.

Simples, não? E o melhor é que dá ótimos resultados, principalmente para ter templates mais únicos.

Espero que tenham gostado do tutorial.

Kisses,

Ana Lola.