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 04/07/11, 02:32 pm

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 04/07/11, 02:45 pm

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 04/07/11, 03:09 pm

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.

Convidad
Convidado


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

Mensagem por Like em 04/07/11, 05:43 pm

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 04/07/11, 08:55 pm

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 05/07/11, 03:41 pm

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 05/07/11, 03:55 pm

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
Principal contribuidor
Principal contribuidor

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

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

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

Mensagem por Luciano98 em 05/07/11, 07:30 pm

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
Principal contribuidor
Principal contribuidor

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

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

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

Mensagem por Like em 06/07/11, 01:34 pm

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

- Tópicos similares

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