Navegação com efeito over

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

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

Olá,

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

Cordialmente,
The Boss

Que mude de imagem.

está esta:



e ao passar o rato muda para esta por exemplo:

Preciso de algum suporte. Alguém?

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

Saudações!

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

Até mais!

Aqui está.

http://www.thelordsclan.com

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!

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?

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

Jpjupa.

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.

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.

Obrigado na mesma jpjupa.

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

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é

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.

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.

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

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?

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?

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.

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

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?

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

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

Olá, tente esse código:

Código:

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

Olá,

Utilize este código CSS:

Código:

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

Cordialmente,
The Boss

Funcionou perfeitamente.
Obrigado a ambos

Com os melhores cumprimentos,
Possessed.