Navegação com efeito over

[Possessed]

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

[Possessed]

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

[.Danni.]

Olá,

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

Cordialmente,
The Boss

[Possessed]

Que mude de imagem.

está esta:



e ao passar o rato muda para esta por exemplo:

[Possessed]

Preciso de algum suporte. Alguém?

[Possessed]

Tópico esquecido? Já lá vão 2 dias

[Sennior]

Saudações!

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

Até mais!

[Possessed]

Aqui está.

http://www.thelordsclan.com

[Sennior]

Saudações!

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

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!

[Possessed]

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?

[Jpjupa]

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

Jpjupa.

[Possessed]

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.

[Jpjupa]

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.

[Possessed]

Obrigado na mesma jpjupa.

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

[SkyDrive]

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é

[Konai]

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 Visualização Imagens e Cores Cores Aba 'Folha de Estilo CSS'

Até mais.

[Possessed]

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.

[.Danni.]

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

[Possessed]

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?

[-luiz,,]

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?

[Possessed]

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.

[.Danni.]

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

[-luiz,,]

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?

[Possessed]

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

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

[-luiz,,]

Olá, tente esse código:

Código:

#submenu ul li a {
padding-top: 60px;
}

[.Danni.]

Olá,

Utilize este código CSS:

Código:

#submenu ul li a {
margin: 0;
padding: 0;
display: inline-block;
width: auto;
}

Cordialmente,
The Boss

[Possessed]

Funcionou perfeitamente.
Obrigado a ambos

Com os melhores cumprimentos,
Possessed.