Barra vertical personalizada

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Barra vertical personalizada

Mensagem por Pharuk Qua 4 Jun 2014 - 18:50

  • Descrição:
Boa tarde de novo, eu estou com muitas dúvidas, então vou postando aqui, visto que tudo num tópico fica um pouco bagunçado.

Bem eu tenho barra vertical lá no meu fórum, o que eu queria era que quando o mouse passasse lá, abri-se uma espécie de uma aba... Eu editei aqui uma imagem pra perceber melhor.

Sem passar lá: https://2img.net/h/s3.postimg.cc/fh3u3zivn/Ajuda_3.jpg
Passando lá: https://2img.net/h/s17.postimg.cc/7q8jhl1pb/Ajuda_4.jpg

Não importa se o código for preciso 2 imagens, 3, eu posso faze-las, se for só precisso 1 melhor, só preciso dos tamanhos pra fazer.

Muito obrigado

  • Informações:
Fórum:http://digitalanimecovers.forumeiro.com/forumVersão:PHPBB3
Tipo:Pedido de códigoTags:Barra,vertical,personalizada

Pharuk

Pharuk
Novo Membro

Membro desde : 22/04/2013
Mensagens : 15
Pontos : 25

http://animedc.iowoi.org/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Superbomber Qua 4 Jun 2014 - 19:25

Olá Adicione isso em sua folha de estilo CSS(Onde tiver URL_DA_IMAGEM, você substitui pela imagem desejada, que vai aparecer quando passar o mouse):

Código:

#i_icon_mini_index:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o primeiro ícone referente ao inicio(A casa!)*/
}
#i_icon_mini_portal:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao portal(O tablet!)*/
}
#i_icon_mini_calendar:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao calendário(O calendário, avá ¬¬!)*/
}
#i_icon_mini_faq:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente a FAQ(O livro!)*/
}
#i_icon_mini_search:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente a pesquisa(A lupa!)*/
}
#i_icon_mini_members:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente a lista de membros(As "pessoinhas"!)*/
}
#i_icon_mini_register:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao registro(A folha com o lápis, ou sei la oque!)*/
}
#i_icon_mini_login:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao login(A porta com uma seta verde!)*/
}

Se tiver problemas me passe o link das imagens desejadas e eu faço para você! Lembrando que esse CSS só vai mudar as imagens de quando tiver com o mouse sobre elas!

Espero ter ajudado, até mais!!!
avatar

Superbomber
****

Membro desde : 28/04/2014
Mensagens : 238
Pontos : 328

http://hackerjustice.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Pharuk Qua 4 Jun 2014 - 20:03

Muito obrigado amigo, ri demais lendo o "Aqui é referente..." xD

Vlw pelo trabalho em elaborar amigo xD

Mas infelizmente aqui não funciona :/

Sempre que coloco o mouse por cima nada acontece :/

EDIT: Tentei no google Chrome e aparece a imagem mas aparece cortada, só não percebo porque não acontece nada no firefox :/

Cumprimentos


Última edição por Pharuk em Qui 5 Jun 2014 - 14:50, editado 1 vez(es)
Pharuk

Pharuk
Novo Membro

Membro desde : 22/04/2013
Mensagens : 15
Pontos : 25

http://animedc.iowoi.org/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Superbomber Qua 4 Jun 2014 - 20:20

Olá, estranho pois aqui funciona. Bom, poderia passar os links das imagens que desejas??? (referente a eu fazer o código com os links).huehue

Até!
avatar

Superbomber
****

Membro desde : 28/04/2014
Mensagens : 238
Pontos : 328

http://hackerjustice.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Pharuk Qua 4 Jun 2014 - 20:26

Ainda não tive tempo de fazer todas, faz ai só para o portal (foi o que eu fiz)

https://i.servimg.com/u/f39/18/53/20/49/portal11.png

Cumprimentos
Pharuk

Pharuk
Novo Membro

Membro desde : 22/04/2013
Mensagens : 15
Pontos : 25

http://animedc.iowoi.org/forum

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Barra vertical personalizada

Mensagem por RafaelS. Qua 4 Jun 2014 - 20:27

Olá,

Entenda este código:

Código:
#i_icon_mini_portal:hover {
content: url(http://i39.servimg.com/u/f39/18/53/20/49/portal11.png);
margin-left: -50px;
}

:hover -> Ao passar o mouse, quando o mouse estiver em cima do elemento.
content -> Conteúdo que ira aparecer, neste caso quando passar o mouse.
margin-left -> Arrasta o botão para a esquerda (margem esquerda), veja o resultado:

Barra vertical personalizada NVAvTWe

Basta fazer o mesmo com os outros alterando o ID do elemento e claro o 'content'.
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Pharuk Qua 4 Jun 2014 - 20:39

Amigo, está funcionar muito bem agora!

Só um problema no Firefox "buga" o resto dos butões todos, ficando uns em cima dos outros.

Veja:
https://2img.net/h/s27.postimg.cc/dqoeki9er/Ajuda_7.jpg

Cumps
Pharuk

Pharuk
Novo Membro

Membro desde : 22/04/2013
Mensagens : 15
Pontos : 25

http://animedc.iowoi.org/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Pharuk Dom 8 Jun 2014 - 14:56

Oi, ninguém respondeu porque nao funciona no firefox mas estabom, no CHrome esta funcionando muito bem, eu agora preciso saber o codigo pro botão das mensagens privadas, nova mensagem privada, e para um botão que redereciona para outra página, no fórum se chama de geratopicos, como eu faço?

Cumprimentos
Pharuk

Pharuk
Novo Membro

Membro desde : 22/04/2013
Mensagens : 15
Pontos : 25

http://animedc.iowoi.org/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Sennior Seg 9 Jun 2014 - 4:21

Saudações,

Para esta sua nova dúvida, crie um novo tópico pois não são aceitas mais de uma dúvida em apenas um tópico.

Abraços.
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos