segunda-feira, 14 de abril de 2014

Como Por: Menu Navbar

Olá geladinhos e cafés hoje eu vim trazer um tutorial que eu achei no
BRITHDAY CAKE.

Então se alguns de vocês não sabem oque é menu navbar eu vou mostrar

A parte marcada em Vermelho é a parte
do menu navbar











  Então continuando eu uso esse menu super legal e se vocês quiserem usar 
é só seguir o tutorial direitinho que ira aparecer o menu, o codigo é um pouco grande mas
não é difil edita-lo
mais enfim vamos ao tutorial vocês não vieram aqui para ouvir minhas palavras engraçadas e malucas 
  Utima coisinha , a pascoa está chegando ja compraram meu ovo de chocolate ASHUAASHUAASHUA

Vamos ao tutorial :


Antes de ]]></b:skin cole :


.bar_top {width: 100%;height: 31px;background: #47a9d7; /* cor do fundo */}.menu_barrax {float: center;margin: 0;padding: 0;}.menu_barrax li {float: left;list-style: none;font-size: 10px;font-weight: bold;font-family: Verdana, Arial;text-transform: uppercase;border-right: 4px none #dddddd; /* deixe essa cor */margin: 0 0 0 10px;padding: 9px 0px 0px 0px;text-shadow:0 1px #267ca4;  /* sombra das letras */}.menu_barrax li a{background: #47a9d7;  /* cor do fundo, deixe a mesma que o de cima */padding: 10px;color: #fff;  /* cor da letra*/text-decoration: none;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}.menu_barrax li a:hover {text-decoration: none;color: #4aaddc;  /* cor da fonte em hover*/background: #1b93cd;  /* cor do fundo em hover */-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;text-shadow:0 1px #0d1c27;  /*cor da sombra do texto em hover */}.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}.bar_topd {width: 900px;margin: 0 auto;}



Agora procure por </head>, quando achar cole abaixo :


<center><div class='bar_top'><div class='bar_topd'><ul class='menu_barrax'><li><a href='SEU LINK' title='Volte para a homepage'>Inicio</a></li><li><a href='SEU LINK' title='TITULO'>NOME</a></li><li><a href='SEU LINK' title='TITULO'>NOME</a></li><li><a href='SEU LINK' title='TITULO '>NOME</a></li><li><a href='SEU LINK' title='TITULO'>NOME</a></li><li><a href='SEU LINK' title='TITULO'>NOME-</a></li></ul></div></div></center> 







Os codigos marcados em azul você pode modificar de acordo com seu gosto !



Nenhum comentário:

Postar um comentário

Alguns kaomojis para enfeitar seus comentarios :

(ノ◕ヮ◕)ノ*:・゚✧ (;一_一) ( ̄▽ ̄) ( ͡° ͜ʖ ͡°) ┐(‘~`;)┌ ( ゚д゚) (´・ω・`) ヽ(゜∇゜)ノ ಥ⌣ಥ
( ̄。 ̄)~zzz (ノಠ益ಠ)ノ彡┻━┻ ┬──┬ ノ( ゜-゜ノ) (≧∇≦) ~ヾ(^∇^)

Home