Um-pandinha_large

Peguei esse tutorial daqui, estava um pouco errado, pois comigo não deu ceto, e para muitos também não, então resolvi modificar a minha maneira, vou dividir em 3 partes. Esse tutorial foi sugerido por Ana Nagib.
1º Passo: Edição

Edite a imagem e faça a modificação que desejar no efeito hover (ao mouse passar por cima), eu fiz a imagem e um "risquinho" no InkScape. Na modificação coloque a imagem em cima da imagem sem modificação.




2º Passo: Css

Código de todo o menu:

#menu{
margin-top:0px;
position:relative;
width: LARGURA DA SUA IMAGEMpx;
height: ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
background: url(URL DA SUA IMAGEM) no-repeat 0 0;
}
#menu ul{
list-style:none;
text-indent:-9999em;
}
#menu li{
position:absolute;
top:0;
height:ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}
#menu li a{
display:block;
text-decoration:none;
width:100%;
height:100%;
top:0;
}
#menu li a span{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
}


Agora a modificação das partes do link :

#um{
width: LARGURA DO ESPAÇO DO PRIMEIRO LINKpx;
left:0;
}
#dois{
width: LARGURA DO ESPAÇO DO SEGUNDO LINKpx;
left: MESMA LARGURA DO ESPAÇO DO PRIMEIRO LINKpx;
}
#tres{
width: LARGURA DO ESPAÇO DO TERCEIRO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}
#quatro{
width: LARGURA DO ESPAÇO DO QUARTO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}
#cinco{
width: LARGURA DO ESPAÇO DO QUINTO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}
#seis{
width: LARGURA DO ESPAÇO DO SEXTO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}


Agora é mais difícil, como assim, Largura do espaço do primeiro link, etc. Bem, vou explicar.



Primeiro precisado tamanho do link em pixels, para saber é simples, no PhotoFiltre Studio X é simples abra a imagem e selecione a área e a largura estará logo abaixo, assim :



Esse número ficará em widht, de ínicio o left ficará com 0, depois vá somando left com widht, por exemplo:


#um{
width: 84px; /*Largura do link em px*/
left:0;
}
#dois{
width: 123px; /*Largura do link em px*/
left: 84px; /* 84 + 0 */
}
#tres{
width: 153px; /*Largura do link em px*/
left: 207px; /* 123 + 84 */
}
#quatro{
width: 126px; /*Largura do link em px*/
left: 360px; /* 153 +207 */
}
Entendeu ?
Agora vamos á outra parte do css, span do link !

#um a span{
background:url (ENDEREÇO DA IMAGEM) no-repeat 0 0;
}
#dois a span{
background:url (ENDEREÇO DA IMAGEM) no-repeat -LEFT CORRESPONDENTE AO DOIS ANTERIORpx 0;
}
#tres a span{
background:url (ENDEREÇO DA IMAGEM) no-repeat -LEFT CORRESPONDENTE AO TRÊS ANTERIORpx 0;
}
#quatro a span{
background:url (ENDEREÇO DA IMAGEM) no-repeat -LEFT CORRESPONDENTE AO QUATRO ANTERIORpx 0;
}
#menu ul li a:hover{
z-index:1000;
}
#um a:hover span{
background:url(ENDEREÇO DA IMAGEM) no-repeat 0 -ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}
#dois a:hover span{
background:url(ENDEREÇO DA IMAGEM) no-repeat -LEFT CORRESPONDENTE AO DOIS ANTERIORpx -ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}
#tres a:hover span{
background:url(ENDEREÇO DA IMAGEM) no-repeat -LEFT CORRESPONDENTE AO TRÊS ANTERIORpx -ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}
#quatro a:hover span{
background:url(ENDEREÇO DA IMAGEM) no-repeat -LEFT CORRESPONDENTE AO QUATRO ANTERIORpx -ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}

Está no final da parte de css, mas atenção NÃO retire o sinal de subtração, negativo, menos ou "-" (o jeito que preferir falar).

3º Passo: O Código.

É simples, agora na parte de html cole assim:

6 coments:

Ana Nagib disse... Reponder {}

Caraamba, ficou um pouquinho difícil, hein?
Bem, vou tentar entender, tenho estudado Html, vamos ver se o estudo serviu para alguma coisa, haha''
Beijos, e obrigada por postar
http://sermenina-blog.blogspot.com

Evelyn VR disse... Reponder {}

@Ana Nagib É difícil sim, mas o bom é que você pega a pratica *--*

BiasinhaaHD disse... Reponder {}

:p

Evelyn VR disse... Reponder {}

@BiasinhaaHD respondendo :c

BiasinhaaHD disse... Reponder {}

:q não entendi?!?!

Evelyn VR disse... Reponder {}

@BiasinhaaHD respondendo :c

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!