Menu com efeito hover

3 participantes

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

Tópico resolvido Menu com efeito hover

Mensagem por Kvothe 11.01.14 15:40

Qual é minha questão:
Olá,

Possuo um código que aplica o efeito hover no menu e que funciona perfeitamente.  O problema é que gostaria de aplicar a três menus personalizados que eu criei: Threats, Wiki e Personagens. Como fazer isso?

Abaixo um exemplo do código:
Código:
#i_icon_mini_login{width:118px; height:57px; background:url(http://i.imgur.com/C7dQ7y4.jpg) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://i.imgur.com/C7dQ7y4.jpg) no-repeat  0 -57px;}

Obrigado,
Kvothe

Endereço do meu fórum:
http://landofhaeron.forumeiros.com

Versão do fórum:
PHPBB2
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Menu com efeito hover

Mensagem por Shek 11.01.14 15:49

Boa tarde!

Você tentou aplicar a imagem de fundo através do Painel de Controle? Em Visualização > Home Page -> Cabeçalho e navegação > Selecione o menu > e no campo "Imagem" adicionar a URL da mesma?

Até mais!
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por Kvothe 11.01.14 17:16

Sim, mas nesse caso não funciona o efeito hover..

Até mais
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Menu com efeito hover

Mensagem por Shek 12.01.14 2:35

Bom dia!

Teria como deixar os menus personalizados ativados, por favor?
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por Kvothe 12.01.14 4:02

Pronto, permiti a visualização deles para convidados.
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por Kvothe 14.01.14 2:24

UP (só para não fecharem o tópico)
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por JScript 16.01.14 14:17

@Kvothe
Olá amigo!

1- Vá em Painel de Controle -> Em Visualização -> Home Page -> Cabeçalho e navegação -> Selecione o menu -> e no campo "Imagem" adicione a seguinte URL: https://2img.net/i/fa/empty.gif
Faça isso para cada um dos 3 menus personalizados que você adicionou ok?

2- Entre no painel de controle de seu fórum e vá em Visualização -> Imagens e cores -> Cores, selecione a aba Folha de estilos CSS e adicione o código abaixo:
Código:

/* Menu [Wiki] */
.bodyline td a.mainmenu:nth-of-type(4) img {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 57px;
  width: 109px;
}
.bodyline td a.mainmenu:nth-of-type(4) img:hover {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 -57px rgba(0, 0, 0, 0);
}

/* Menu [Threats] */
.bodyline td a.mainmenu:nth-of-type(5) img {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 57px;
  width: 109px;
}
.bodyline td a.mainmenu:nth-of-type(5) img:hover {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 -57px rgba(0, 0, 0, 0);
}

/* Menu [Personagens] */
.bodyline td a.mainmenu:nth-of-type(6) img {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 57px;
  width: 109px;
}
.bodyline td a.mainmenu:nth-of-type(6) img:hover {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 -57px rgba(0, 0, 0, 0);
}

Nota: Para cada menu personalizado, troque a imagem de exemplo que coloquei https://i.imgur.com/vFNhEGs.jpg pela imagem que deseja!

Abraços,

JS
JScript

JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por Kvothe 16.01.14 15:08

JS,

Primeiro, muito obrigado por estar me ajudando. O código apresentou ótimos resultados. No Chrome está quase perfeito, o único problema é uma borda e um sobrescrito que aparece nos menus, se puder dar uma olhada no fórum, irá perceber.

Agora, quanto ao Firefox, o menu fica um pouco mais estranho. Se não tiver o navegador, posso enviar um print.

Obrigado,
Até mais!
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Menu com efeito hover

Mensagem por JScript 16.01.14 15:18

Vou repetir uma parte da minha mensagem anterior na qual você não fez correto:
JScript escreveu:
1- Vá em Painel de Controle -> Em Visualização -> Home Page -> Cabeçalho e navegação -> Selecione o menu -> e no campo "Imagem" adicione a seguinte URL: https://2img.net/i/fa/empty.gif
Faça isso para cada um dos 3 menus personalizados que você adicionou ok?

Veja o resultado em meu Firefox:
Menu com efeito hover C8hTbaD

Com o mouse em cima:
Menu com efeito hover HTGYr6W

Nota: Obtive o mesmo resultado no Google Chrome!

JS
JScript

JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por Kvothe 16.01.14 18:55

Olá,

Funcionou perfeitamente agora! Saberia me dizer o que está causando esse risco no menu? Já tentei modificar a imagem, mas o problema não é esse..

Obrigado,
Kvothe
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por JScript 16.01.14 19:43

Adicione o CSS abaixo que resolve:
Código:

#i_icon_mini_groups, #i_icon_mini_search, #i_icon_mini_faq {
  display: none !important;
}

JS
JScript

JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu com efeito hover

Mensagem por Kvothe 16.01.14 20:30

Perfeito, muitíssimo obrigado pela ajuda!

Até mais,
Kvothe
Kvothe

Kvothe
Membro

Membro desde : 23/12/2012
Mensagens : 945
Pontos : 1372

http://landofhaeron.forumeiros.com

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