Menu com efeito hover

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

Resolvido Menu com efeito hover

Mensagem por Kvothe em 11/01/14, 01:40 pm

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
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Menu com efeito hover

Mensagem por Shek em 11/01/14, 01:49 pm

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 CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17152
Pontos Ativos : 21412

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Menu com efeito hover

Mensagem por Kvothe em 11/01/14, 03:16 pm

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

Até mais
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Menu com efeito hover

Mensagem por Shek em 12/01/14, 12:35 am

Bom dia!

Teria como deixar os menus personalizados ativados, por favor?


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17152
Pontos Ativos : 21412

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Menu com efeito hover

Mensagem por Kvothe em 12/01/14, 02:02 am

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

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Menu com efeito hover

Mensagem por Kvothe em 14/01/14, 12:24 am

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

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Menu com efeito hover

Mensagem por JScript em 16/01/14, 12:17 pm

@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: http://illiweb.com/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 http://i.imgur.com/vFNhEGs.jpg pela imagem que deseja!

Abraços,

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Menu com efeito hover

Mensagem por Kvothe em 16/01/14, 01:08 pm

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

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

Ver perfil do usuário http://landofhaeron.forumeiros.com
  • 0

Resolvido Re: Menu com efeito hover

Mensagem por JScript em 16/01/14, 01:18 pm

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: http://illiweb.com/fa/empty.gif
Faça isso para cada um dos 3 menus personalizados que você adicionou ok?

Veja o resultado em meu Firefox:


Com o mouse em cima:


Nota: Obtive o mesmo resultado no Google Chrome!

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Menu com efeito hover

Mensagem por Kvothe em 16/01/14, 04:55 pm

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
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Menu com efeito hover

Mensagem por JScript em 16/01/14, 05:43 pm

Adicione o CSS abaixo que resolve:
Código:

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

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Menu com efeito hover

Mensagem por Kvothe em 16/01/14, 06:30 pm

Perfeito, muitíssimo obrigado pela ajuda!

Até mais,
Kvothe
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

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