Barra vertical personalizada

4 participantes

Ir para baixo

Tópico resolvido Barra vertical personalizada

Mensagem por Pharuk 04.06.14 19: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 04.06.14 20: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 04.06.14 21: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 05.06.14 15: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 04.06.14 21: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 04.06.14 21: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

Tópico resolvido Re: Barra vertical personalizada

Mensagem por RafaelS. 04.06.14 21: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'.
avatar
RafaelS.
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 04.06.14 21: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 08.06.14 15: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

Tópico resolvido Re: Barra vertical personalizada

Mensagem por Sennior 09.06.14 5: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

Ir para o topo

- Tópicos semelhantes

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