quarta-feira, 8 de fevereiro de 2012

Menu como o do SP

403187_10150455614131409_255807976408_8962717_344564692_n_large

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.

0 comentários:

| By Ana Lola | Somente para o Sweet Pink | Proibida Cópia © |