Efeito hover nos links de navegação

5 participantes

Ir para baixo

Tópico resolvido Efeito hover nos links de navegação

Mensagem por Like 04.07.11 18: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
Like
Like
Membro

Membro desde : 29/10/2010
Mensagens : 885
Pontos : 1327

http://grandedown.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Pika_mestre 04.07.11 18: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!
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Convidad 04.07.11 19: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.
Anonymous
Convidad
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Like 04.07.11 21:43

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

Ajuda/Confuso
Like
Like
Membro

Membro desde : 29/10/2010
Mensagens : 885
Pontos : 1327

http://grandedown.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Dury 05.07.11 0:55

Dury
Dury
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Like 05.07.11 19: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
Like
Like
Membro

Membro desde : 29/10/2010
Mensagens : 885
Pontos : 1327

http://grandedown.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Solkis 05.07.11 19: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.
Solkis
Solkis
Membro Entusiasta

Membro desde : 26/01/2008
Mensagens : 9983
Pontos : 12071

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Luciano98 05.07.11 23: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
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos links de navegação

Mensagem por Like 06.07.11 17: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
Like
Like
Membro

Membro desde : 29/10/2010
Mensagens : 885
Pontos : 1327

http://grandedown.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos