Efeito hover nos links de navegação

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

Resolvido Efeito hover nos links de navegação

Mensagem por Like em Seg 4 Jul 2011 - 13:32

Qual é sua questão:
Bom, vi um efeito bem interessante em um fórum, que ao passar o cursor em um link do menu de navegação, aparece um retângulo no fundo do link.
O fórum que ví é este: http://innovation.forumeiro.org/forum
Gostaria que alguém me informasse o código disto para aplicar em meu fórum.

Grato. Piscada

Que medidas você tomou para corrigir o problema:
vazio

Apresente-nos imagens do problema (se necessário):
vazio

Endereço do fórum:
www.grandedown.forumeiros.com

Versão do fórum:
PHPBB3
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Pika_mestre em Seg 4 Jul 2011 - 13:45

marcelo! escreveu:Qual é sua questão:
Bom, vi um efeito bem interessante em um fórum, que ao passar o cursor em um link do menu de navegação, aparece um retângulo no fundo do link.
O fórum que ví é este: http://innovation.forumeiro.org/forum
Gostaria que alguém me informasse o código disto para aplicar em meu fórum.

Grato. Piscada

Que medidas você tomou para corrigir o problema:
vazio

Apresente-nos imagens do problema (se necessário):
vazio

Endereço do fórum:
www.grandedown.forumeiros.com

Versão do fórum:
PHPBB3

Legal, também gostaria de saber para botar no meu fórum PUNBB!
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

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

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Convidad em Seg 4 Jul 2011 - 14:09

Boa tarde.

Aqui está :

Código:

#pun-head #pun-navlinks{
border-top: 2px solid #a71d02;
border-bottom: 2px solid #a71d02;
background: #a71d02;
height: 25px;
margin-top: -16px;
margin-bottom: -4px;
width: 920px;
padding: 0px;}

#pun-head #pun-navlinks li a{
margin: 0 0px 0 0;
color: white;
font-weight: bold;
position: relative;
top: 3px;
text-shadow: black 1px 1px 5px;
padding-right: 5px;
padding-left: 5px;
font-size: 12px;}

#pun-navlinks ul {text-align: center;}

#pun-head #pun-navlinks li a:hover{
text-shadow: black -1px -1px 3px;
text-decoration: none;
height: 29px;
background: #831702;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}

#pun-head #pun-navlinks a[href="/profile.forum?mode=register"]{background: #831702;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
border: 2px solid white;
-moz-box-shadow: 0px 0px 5px #0c0c0c;
-webkit-box-shadow: 0px 0px 5px #0c0c0c;
box-shadow: 0px 0px 5px #0c0c0c;}

Coloque o código em :
Painel de controle Seta Visualização Seta Cores Seta "Aba" Folha CSS.

Coloque em seu conteúdo e salve.
Att.
avatar

Convidad
Convidado


Resolvido Re: Efeito hover nos links de navegação

Mensagem por Like em Seg 4 Jul 2011 - 16:43

Olá, MissFurby.
O código não modificou nada em meu fórum.

Ajuda/Confuso
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Dury em Seg 4 Jul 2011 - 19:55

avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Like em Ter 5 Jul 2011 - 14:41

Bom, nenhum tópico sugerido resolveu, pois minha dúvida é outra. Desejo que o efeito hover seja uma caixa que aparece por trás do link de navegação, como é mostrado no fórum que citei.

Ajuda/Confuso
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Solkis em Ter 5 Jul 2011 - 14:55

Boa tarde,

Aqui está o código que deseja:
Código:
#page-header .navar ul {
border-top: 2px solid #a71d02;
border-bottom: 2px solid #a71d02;
background: #a71d02;
height: 25px;
margin-top: -16px;
margin-bottom: -4px;
width: 920px;
padding: 0px;}

#page-header .navar ul li a{
margin: 0 0px 0 0;
color: white;
font-weight: bold;
position: relative;
top: 3px;
text-shadow: black 1px 1px 5px;
padding-right: 5px;
padding-left: 5px;
font-size: 12px;}

#pun-navlinks ul {text-align: center;}

#page-header .navar ul li a:hover{
text-shadow: black -1px -1px 3px;
text-decoration: none;
height: 29px;
background: #831702;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}

#page-header .navar ul  a[href="/profile.forum?mode=register"]{background: #831702;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
border: 2px solid white;
-moz-box-shadow: 0px 0px 5px #0c0c0c;
-webkit-box-shadow: 0px 0px 5px #0c0c0c;
box-shadow: 0px 0px 5px #0c0c0c;}

#i_icon_mini_new_message{margin-bottom: -5px;}
Até mais.
avatar

Solkis
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12075

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

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Luciano98 em Ter 5 Jul 2011 - 18:30

Olá!

Sugiro que utilize esse código que vou lhe passar ao invés do código do Solkis que pode modificar mais coisas alem do que você quer.

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

Código:
.navlinks li a.mainmenu:hover{background:#831702;text-decoration:none;height:29px;padding:5px;text-shadow:black -1px -1px 3px;padding-top:10px;padding-bottom:12px;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px}

Salve.

Até mais.
Luciano98
avatar

Luciano98
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11046

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

Resolvido Re: Efeito hover nos links de navegação

Mensagem por Like em Qua 6 Jul 2011 - 12:34

Olá, muito obrigado aos que tentaram ajudar, funcionou perfeitamente, amigo Luciano, o modifiquei um pouco e ficou óptimo ao meu fórum.

Cordialmente, Marcelo.

Piscada
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

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


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