Navegação com efeito over

+3
Sennior
.Danni.
Possessed
7 participantes

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

Tópico resolvido Navegação com efeito over

Mensagem por Possessed 13.03.13 13:08

Qual é minha questão:
Boas,

Alguém me sabe explicar como criar um efeito 'mouse over' no menu de navegação?
Já procurei por vários tópicos mas não consigo.

Cumprimentos.

Endereço do meu fórum:
http://www.thelordsclan.com

Versão do fórum:
INVISION


Última edição por Possessed em 19.03.13 0:36, editado 1 vez(es)
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 13.03.13 13:13

Encontrei também este código que até parece interessante mas não ficou arrumado.
Aguardarei por soluções.

Código:
#submenu {
border-bottom: transparent !important;
background-color: #333;
border-color: #CCC;
padding: .5em 1.1em .6em;
margin-left: -6px;
width: 1305px;
}
#submenu ul {border-bottom: transparent !important;}
#submenu {
background-image: url(http://i.imgur.com/tKiSR.png);
}
#submenu {
border-top: 5px solid #FF0000!important;
height: 43px;
overflow: visible!important;
padding: 1px 10px!important;
}
#submenu li:hover {
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/92/42/52/caralh10.png) no-repeat 40% top;
}
#submenu ul[class="clearfix"] {
border: 0!important;
padding-top: 4px;
width: 90%;
}
#submenu a, #submenu a:visited {
text-decoration: none;
}
#submenu a, #submenu a {
color: #EDEDED;
font-family: Trebuchet MS,"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: 700;
margin: 0;
}
#submenu li a {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/nav-di10.png) repeat-y center right;
color: white;
font-family: Arial,Helvetica,sans-serif!important;
font-size: 14px!important;
font-weight: 700;
margin: 0!important;
padding: 14px 7px 14px 0;
text-decoration: none!important;
}
#submenu li {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/92/42/52/caralh10.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}
#submenu li {
display: inline;
font-size: 1.15em;
}

#submenu ul {
text-align: center;
}
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por .Danni. 13.03.13 13:48

Olá,

O que deseja que o menu faça? Ficar semitransparente, mudar de cor, de tamanho?

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 13.03.13 14:18

Que mude de imagem.

está esta:

Navegação com efeito over 1z50w2s

e ao passar o rato muda para esta por exemplo:

Navegação com efeito over 2cf438x
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 15.03.13 0:14

Preciso de algum suporte. Alguém? Café
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 15.03.13 20:12

Tópico esquecido? Já lá vão 2 dias Ajuda/Confuso
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Navegação com efeito over

Mensagem por Sennior 15.03.13 22:05

Saudações!

Lamento muito á demora à teu atendimento. Poderia me mandar o fórum onde tem o efeito hover desejado pelo senhor?

Até mais!
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 16.03.13 11:43

Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Navegação com efeito over

Mensagem por Sennior 16.03.13 16:05

Saudações!

Não vi o efeito que o senhor diz. O mesmo são imagens veja:

Flecha ajudeiros https://2img.net/h/oi47.tinypic.com/2j1mxki.png

Como o senhor deseja? Um efeito Hover é possível sim, mas sem as imagens.

Até mais! Café
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 17.03.13 11:26

Mas eu não disse que tinha algum efeito, eu quero é mesmo criar esse efeito com as imagens da barra de navegação, ao passar o mouse aparecer outra.

Não é possível?
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Jpjupa 17.03.13 13:21

Mas aonde você viu o efeito?
Esse é o link do seu fórum, não ?

Jpjupa.
Jpjupa

Jpjupa
Super Membro

Membro desde : 15/11/2010
Mensagens : 1369
Pontos : 1977

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 17.03.13 13:41

Já vi em vários sites. Vê por exemplo este:
http://www.datatrade.net/

E sim o link do meu fórum é esse:
http://www.thelordsclan.com/forum

Basicamente o efeito que quero é esse.
Tenho os botões definidos com uma imagem e o utilizador ao passar o rato pela barra de navegação as imagens mudam.

Se não for possível, gostaria de saber então a forma de colocar esse efeito doutra maneira, mas que fosse possível ser personalizado e não apenas alterar de uma cor para outra.

Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Jpjupa 17.03.13 13:45

Creio que para fazer o desejado, teria que ser assim:
Cada linha do menu teria que ter uma classe separada.

Mas são todas a mesma classe, creio que não terá como fazer o efeito.
Até mais.

Jpjupa.
Jpjupa

Jpjupa
Super Membro

Membro desde : 15/11/2010
Mensagens : 1369
Pontos : 1977

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 17.03.13 17:52

Obrigado na mesma jpjupa.

Alguém tem mais sugestões de como criar este efeito?
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por SkyDrive 17.03.13 17:58

Olá,

Oque seria possível que eu creio e fazer um novo menu utilizando outro sistema sem ser o menu padrão da Forumeiros, como o CSSMENUMAKER, ou também poderá criar você mesmo um menu próprio, e depois e só adicionar uma código JavaScript e substituir o menu padrão da Forumeiros pelo o que você criou

Até
SkyDrive

SkyDrive
***

Membro desde : 03/03/2013
Mensagens : 128
Pontos : 159

http://universionforum.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Konai 17.03.13 19:20

Olá querido,

Adicione ao teu CSS, este código:
#submenu ul li a {
background:url(https://2img.net/h/oi47.tinypic.com/1z50w2s.png);
cursor:allowed;
}
#submenu ul li a:hover {
background:url(https://2img.net/h/oi45.tinypic.com/2cf438x.png);
cursor:allowed;
}

Aceda à:
Painel de Controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Aba 'Folha de Estilo CSS'
Até mais. Piscada
Konai

Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 18.03.13 12:54

Olá House,

O código parece funcionar mas o resultado não é o esperado.
Os botões mantêm-se os mesmos e ao passar o rato a imagem aparece por trás.

Navegação com efeito over T6z9jc
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por .Danni. 18.03.13 14:59

Olá,

A minha sugestão é que você crie um fundo padrão para todas as imagens de navegação, por exemplo, o botão que fica por trás do texto em seu fórum, faça duas versões, uma simples e outra com o efeito que deseja.

Depois crie as imagens sem fundo para o título e os ícones e estas ficarão na gestão de imagens.

Assim seria possível criar um css que colocasse a imagem de botão básica no fundo do menu de navegação e a imagem do efeito para o mouse over.

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 18.03.13 18:39

Sim, boa ideia The Boss.
Tentei fazer isso mas não sei porquê o botão aparece cortado.

Navegação com efeito over 2w52kg6

Outra coisa, o código que o Dr.House forneceu coloca a imagens iguais em toda a barra, eu quero cada botão com a sua imagem. Como faço isso?
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por -luiz,, 18.03.13 19:01

Esta ficando por baixo, pois esse menu usa imagem com a tag <img> do html, e não via css.
Preciso saber se essas imagens são colocadas ali pela Edição de HTML, ou pelo Painel de controle -> Imagens e Cores -> Gestão das imagens.
Saberia me dizer?
-luiz,,

-luiz,,
**

Membro desde : 05/07/2010
Mensagens : 88
Pontos : 101

http://clickhabbo.6te.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 18.03.13 20:39

As imagens estão transparentes e são colocadas na Gestão de imagens.
As que estão a aparecer são via css com o código que o Dr.House me forneceu.
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por .Danni. 18.03.13 21:18

Olá,

No caso será necessário um código CSS para poder estruturar o menu fazendo-o funcionar de maneira correta. Você está editando em um template de testes ou fórum de testes?

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por -luiz,, 18.03.13 21:35

Certifique se que todas as imagens do menu no Gestão de imagens, estejam transparente.

Creio, que seja um código html, olha só:
Código:
<a class="mainmenu" href="/forum"><img id="i_icon_mini_index" src="http://i46.tinypic.com/2cpfjgk.png" border="0" hspace="0" alt="Início" title="Início"></a>
Então, você deve editar a o template, e retirar o a tag da imagem. ficando:
Código:
<a class="mainmenu" href="/forum"></a>
Então você adiciona o css:
Código:

.mainmenu[href="/"] {
background: url(http://i47.tinypic.com/1z50w2s.png);
width: 110px;
height: 50px;
position: absolute;
}/* Botão home */
.mainmenu[href="/"]:hover {
background:url(http://i45.tinypic.com/2cf438x.png);
}/* Botão com efeito hover */


.mainmenu[href="/login"] {
background: url(IMG da aba LOGIN);
width: 110px;
height: 50px;
position: absolute;
}/* Botão login */
.mainmenu[href="/"]:hover {
background:url(Img Login Hover);
}/* Botão com efeito hover */


E assim você vai fazendo todo o menu, mudando o [href="link"] para o link.

Funcionou?
-luiz,,

-luiz,,
**

Membro desde : 05/07/2010
Mensagens : 88
Pontos : 101

http://clickhabbo.6te.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 18.03.13 23:36

TheBoss, é um forum teste: http://lordstesting.omeuforum.net/

-luizz,,, funciona companheiro, mas as imagens continuam a ficar cortadas não entendo.
Navegação com efeito over 1zz50tw
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por -luiz,, 18.03.13 23:42

Olá, tente esse código:
Código:
#submenu ul li a {
padding-top: 60px;
}
-luiz,,

-luiz,,
**

Membro desde : 05/07/2010
Mensagens : 88
Pontos : 101

http://clickhabbo.6te.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por .Danni. 19.03.13 0:16

Olá,

Utilize este código CSS:
Código:
#submenu ul li a {
margin: 0;
padding: 0;
display: inline-block;
width: auto;
}

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Navegação com efeito over

Mensagem por Possessed 19.03.13 0:36

Funcionou perfeitamente.
Obrigado a ambos Feliz

Com os melhores cumprimentos,
Possessed.
Possessed

Possessed
**

Membro desde : 21/12/2012
Mensagens : 55
Pontos : 85

https://lords-gaming.forumeiros.com/

Ir para o topo Ir para baixo

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


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