5867399191_b043f51bc3_z_large
Olá!!
Esse é um tutorial um pouco difícil para iniciantes, então sugiro você a ter uma pratica maior sobre HTML e CSS.
Bem vou usar um estado hover e o normal mesmo!!
(o estado hover é quando se passa o mouse em cima do objeto, imagem, link, etc.)

Primeiro vamos adicionar o CSS
(o css é adicionado acima de body { - Para isso vá em Painel/Design/Editar HTML)

O CSS:

/* ESTADO NORMAL */
#nav{
display : block;
border-bottom : 1px dotted #FF008A;
background-repeat : no-repeat;
vertical-align:middle;
text-indent : 5px;
line-height : 14px;
font-size:12px;
font-weight:bold;
font-family: Trebuchet MS, Verdana, Arial, Serif;
margin-top : 3px;
margin-left:1px;
background:url('URL DA IMAGEM') no-repeat left;
color: #FF00BF;
padding-left : 11px;
-webkit-transition-property:color,text;
-webkit-transition-duration:.2s;
-webkit-transition-timing-function:linear,ease-in;
}
/* ESTADO HOVER*/
#nav:hover{
display : block;
vertical-align:middle;
border-bottom : 1px dotted #2FB0EB;
color: #BE6BFF;
background: url('URL DA IMAGEM') no-repeat left;
padding-left : 11px;}


Vamos usar as duas imagem, respectivamente, estado normal e hover:
A URL das imagens respectivamente são:
http://i1114.photobucket.com/albums/k528/Hikari-chii/decootomedojo1680.gif
http://i1114.photobucket.com/albums/k528/Hikari-chii/decootomedojo1681.gif

Cole em URL da imagem, pode colocar outras, mas no caso irá ficar assim:


/* ESTADO NORMAL */
#nav{
display : block;
border-bottom : 1px dotted #FF008A;
background-repeat : no-repeat;
vertical-align:middle;
text-indent : 5px;
line-height : 14px;
font-size:12px;
font-weight:bold;
font-family: Trebuchet MS, Verdana, Arial, Serif;
margin-top : 3px;
margin-left:1px;
background:url('http://i1114.photobucket.com/albums/k528/Hikari-chii/decootomedojo1680.gif') no-repeat left;
color: #FF00BF;
padding-left : 11px;
-webkit-transition-property:color,text;
-webkit-transition-duration:.2s;
-webkit-transition-timing-function:linear,ease-in;
}
/* ESTADO HOVER*/
#nav:hover{
display : block;
vertical-align:middle;
border-bottom : 1px dotted #2FB0EB;
color: #BE6BFF;
background: url('http://i1114.photobucket.com/albums/k528/Hikari-chii/decootomedojo1681.gif') no-repeat left;
padding-left : 11px;}


Mude as cores como desejar, em border-bottom é a divisória e color as cores da fonte.
Agora vamos ao titulo do menu, o CSS:
#extrastitulo {
display:block;
height:26px;
margin-bottom:10px;
padding-top:10px;
text-align:center;
text-transform:uppercase;
background: url('http://i1107.photobucket.com/albums/h387/evelynlovetdixu12/Semttulo6-1.jpg'); /* Fundo */
color: #99CCFF; /* Cor da Fonte */
font-family: Comic Sans MS; /* Tipo da Fonte */
font-size:26px; /*Tamanho da Fonte */
border-bottom: solid 3px #99CCFF; /* Borda Abaixo do Fundo */
text-shadow: 0px -1px 0px #FFF, 0px 1px 0px #C0C0C0;

Agora Vamos ao HTML:

A parte div style="float: left; width: 45%; são os links da esquerda e a parte div style="float: right; width: 45%; são os links da direita
Então, está pronto, aí está o menu que fizemos !
Titulos

0 coments:

Postar um comentário

:a   :b  :c  :d  :e :f  :g  :h  :i  :j  :k  :l  :m  :n  :o  :p  :q  :r  :s  :t  :u

Comentar não dói!