Barra vertical personalizada

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

Resolvido Barra vertical personalizada

Mensagem por Pharuk em 04/06/14, 03:50 pm

  • 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á: http://s3.postimg.org/fh3u3zivn/Ajuda_3.jpg
Passando lá: http://s17.postimg.org/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

avatar

Pharuk
Nível 3

Masculino
Inscrito dia : 22/04/2013
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://animedc.iowoi.org/forum

Resolvido Re: Barra vertical personalizada

Mensagem por Superbomber em 04/06/14, 04:25 pm

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!!!

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Barra vertical personalizada

Mensagem por Pharuk em 04/06/14, 05:03 pm

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, 11:50 am, editado 1 vez(es)
avatar

Pharuk
Nível 3

Masculino
Inscrito dia : 22/04/2013
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://animedc.iowoi.org/forum

Resolvido Re: Barra vertical personalizada

Mensagem por Superbomber em 04/06/14, 05:20 pm

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é!

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Barra vertical personalizada

Mensagem por Pharuk em 04/06/14, 05:26 pm

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

http://i39.servimg.com/u/f39/18/53/20/49/portal11.png

Cumprimentos
avatar

Pharuk
Nível 3

Masculino
Inscrito dia : 22/04/2013
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://animedc.iowoi.org/forum

Resolvido Re: Barra vertical personalizada

Mensagem por Rafael em 04/06/14, 05:27 pm

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:



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

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Barra vertical personalizada

Mensagem por Pharuk em 04/06/14, 05:39 pm

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:
http://s27.postimg.org/dqoeki9er/Ajuda_7.jpg

Cumps
avatar

Pharuk
Nível 3

Masculino
Inscrito dia : 22/04/2013
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://animedc.iowoi.org/forum

Resolvido Re: Barra vertical personalizada

Mensagem por Pharuk em 08/06/14, 11:56 am

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
avatar

Pharuk
Nível 3

Masculino
Inscrito dia : 22/04/2013
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://animedc.iowoi.org/forum

Resolvido Re: Barra vertical personalizada

Mensagem por Sennior em 09/06/14, 01:21 am

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.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum