Navegação com efeito over

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

Resolvido Navegação com efeito over

Mensagem por Possessed em 13/03/13, 10:08 am

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 18/03/13, 09:36 pm, editado 1 vez(es)
avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 13/03/13, 10:13 am

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;
}
avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por .Danni. em 13/03/13, 10:48 am

Olá,

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

Cordialmente,
The Boss
avatar

.Danni.
Membro do Fórum

Feminino
Inscrito dia : 13/01/2010
Mensagens : 1860
Pontos Ativos : 2592

Ver perfil do usuário http://castelobruxo.tk https://www.facebook.com/dannielagoes

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 13/03/13, 11:18 am

Que mude de imagem.

está esta:



e ao passar o rato muda para esta por exemplo:

avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 14/03/13, 09:14 pm

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

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 15/03/13, 05:12 pm

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

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Sennior em 15/03/13, 07:05 pm

Saudações!

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

Até mais!
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 16/03/13, 08:43 am

avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Sennior em 16/03/13, 01:05 pm

Saudações!

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

Flecha ajudeiros http://i47.tinypic.com/2j1mxki.png

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

Até mais! Café
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 17/03/13, 08:26 am

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

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Jpjupa em 17/03/13, 10:21 am

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

Jpjupa.
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 17/03/13, 10:41 am

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.

avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por Jpjupa em 17/03/13, 10:45 am

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

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 17/03/13, 02:52 pm

Obrigado na mesma jpjupa.

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

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por SkyDrive em 17/03/13, 02:58 pm

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

SkyDrive
Nível 8

Masculino
Inscrito dia : 03/03/2013
Mensagens : 128
Pontos Ativos : 159

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

Resolvido Re: Navegação com efeito over

Mensagem por Gaaratsu em 17/03/13, 04:20 pm

Olá querido,

Adicione ao teu CSS, este código:
#submenu ul li a {
background:url(http://i47.tinypic.com/1z50w2s.png);
cursor:allowed;
}
#submenu ul li a:hover {
background:url(http://i45.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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 18/03/13, 09:54 am

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.

avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por .Danni. em 18/03/13, 11:59 am

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
avatar

.Danni.
Membro do Fórum

Feminino
Inscrito dia : 13/01/2010
Mensagens : 1860
Pontos Ativos : 2592

Ver perfil do usuário http://castelobruxo.tk https://www.facebook.com/dannielagoes

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 18/03/13, 03:39 pm

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



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

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por -luiz,, em 18/03/13, 04:01 pm

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

-luiz,,
Nível 7

Masculino
Inscrito dia : 05/07/2010
Mensagens : 88
Pontos Ativos : 101

Ver perfil do usuário http://clickhabbo.6te.net/

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 18/03/13, 05:39 pm

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

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por .Danni. em 18/03/13, 06:18 pm

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
avatar

.Danni.
Membro do Fórum

Feminino
Inscrito dia : 13/01/2010
Mensagens : 1860
Pontos Ativos : 2592

Ver perfil do usuário http://castelobruxo.tk https://www.facebook.com/dannielagoes

Resolvido Re: Navegação com efeito over

Mensagem por -luiz,, em 18/03/13, 06:35 pm

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

-luiz,,
Nível 7

Masculino
Inscrito dia : 05/07/2010
Mensagens : 88
Pontos Ativos : 101

Ver perfil do usuário http://clickhabbo.6te.net/

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 18/03/13, 08:36 pm

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

-luizz,,, funciona companheiro, mas as imagens continuam a ficar cortadas não entendo.
avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.com

Resolvido Re: Navegação com efeito over

Mensagem por -luiz,, em 18/03/13, 08:42 pm

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

-luiz,,
Nível 7

Masculino
Inscrito dia : 05/07/2010
Mensagens : 88
Pontos Ativos : 101

Ver perfil do usuário http://clickhabbo.6te.net/

Resolvido Re: Navegação com efeito over

Mensagem por .Danni. em 18/03/13, 09:16 pm

Olá,

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

Cordialmente,
The Boss
avatar

.Danni.
Membro do Fórum

Feminino
Inscrito dia : 13/01/2010
Mensagens : 1860
Pontos Ativos : 2592

Ver perfil do usuário http://castelobruxo.tk https://www.facebook.com/dannielagoes

Resolvido Re: Navegação com efeito over

Mensagem por Possessed em 18/03/13, 09:36 pm

Funcionou perfeitamente.
Obrigado a ambos Feliz

Com os melhores cumprimentos,
Possessed.
avatar

Possessed
Nível 5

Masculino
Inscrito dia : 21/12/2012
Mensagens : 55
Pontos Ativos : 85

Ver perfil do usuário http://www.lords-gaming.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