InícioEfeito hover menu de navegação
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Efeito hover menu de navegação
por diogo23 16.12.11 14:57
Qual é minha questão:
queia que o menu de navegação tivesse uma imagem enquanto não tem o rato/mouse em cima mas quando tem o rato em cima outra...
Medidas que eu tomei para corrigir o problema:
coloca este post
Imagens do meu problema:
-
Endereço do meu fórum:
Versão do meu fórum:
PHPBB3
queia que o menu de navegação tivesse uma imagem enquanto não tem o rato/mouse em cima mas quando tem o rato em cima outra...
Medidas que eu tomei para corrigir o problema:
coloca este post
Imagens do meu problema:
-
Endereço do meu fórum:
Versão do meu fórum:
PHPBB3
Última edição por diogo23 em 16.12.11 20:47, editado 1 vez(es)
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por Cream 16.12.11 16:03
Olá!
Veja as classes CSS ligadas à cada imagem do menu:
Agora para colocar uma imagem para exibir quando passar o mouse em cima do link veja:
O código depois de produzido, deverá ser adicionado em:
Painel de controle
Visualização Imagens e cores Cores / Folha estilo CSS
Confirme se ainda necessita de suporte adicional
Até Mais!
Veja as classes CSS ligadas à cada imagem do menu:
#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_portal { Corresponde à imagem portal.
#i_icon_mini_calendar { Corresponde à imagem calendário.
#i_icon_mini_faq { Corresponde à imagem Faq/Perguntas e respostas criadas por si no painel de controle.
#i_icon_mini_search { Corresponde à imagem buscar.
#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_members { Corresponde à imagem de membros do fórum.
#i_icon_mini_groups { Corresponde à imagem grupos.
#i_icon_mini_profile { Corresponde à imagem perfil.
#i_icon_mini_message { Corresponde à imagem do link do menu MP.
ul.navlinks span.new-message { Corresponde à imagem do link do menu Nova MP.
#i_icon_mini_logout { Corresponde à imagem do link do menu Sair.
i_icon_mini_login { Corresponde à imagem do link do menu Login/Entrar.
i_icon_mini_register { Corresponde à imagem do link do menu Registrar/Cadastrar.
Agora para colocar uma imagem para exibir quando passar o mouse em cima do link veja:
Isso acima é um exemplo, deverá ser modificado a parte "#i_icon_mini_message", dependendo da escolha das classes.#i_icon_mini_message:hover {
background-image: url(Endereço_da_sua_imagem);
}
O código depois de produzido, deverá ser adicionado em:
Painel de controle
Visualização Imagens e cores Cores / Folha estilo CSSConfirme se ainda necessita de suporte adicional
Até Mais!
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Re: Efeito hover menu de navegação
por diogo23 16.12.11 16:49
mas isso não funciona....acho eu...por exemplo eu queria colocar esta imagem para o menu de navegação "inicio" enquanto o rato não estivesse em cima: 
e esta para quando o rato estiver em cima:
e esta para quando o rato estiver em cima:
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por diogo23 16.12.11 16:50
sem o rato estar em cima: https://2img.net/h/i1180.photobucket.com/albums/x415/downribatejo/inicionomouse.png
com o rato em cima: https://2img.net/h/i1180.photobucket.com/albums/x415/downribatejo/inicioyesmouse.png
como faço?
com o rato em cima: https://2img.net/h/i1180.photobucket.com/albums/x415/downribatejo/inicioyesmouse.png
como faço?
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por diogo23 16.12.11 19:16
o que eu fiz foi: 1º adicionei normalmente a imagem em visualização > Gestão das imagens > Modo avançado e aí coloquei normalmente a imagem quando o rato não está em cima e depois de fazer isso é que coloquei o código com a imagem que é para aparecer quando o rato está em cima.... só que descobri que afinal a imagem onde o rato está em cima aparece mas é atrás da imagem que eu fiz para aparecer enquanto o rato não está em cima..... ajudam-me... 
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Lucas2122- Membro
- Membro desde : 17/08/2011
Mensagens : 774
Pontos : 1348 -
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por Konai 17.12.11 12:28
Olá,
O que é Flood?
Tente;
Painel de Controle
Visualização Aba " Imagens e Cores " Cores Folha de Estilo CSS
Vale lembrar que o código já está com a sua segunda imagem.
Coloque a primeira imagem que seria está no
Painel de controle Visualização Aba " Imagens e Cores " Gestão das Imagens " Modo Avançado " e procure por ; Indice e ponha a URL lá.
O que é Flood?
- Spoiler:
Flood
Muitos realizam flood, e que por vezes nem sabem quais os erros dessas mensagens que são sempre denunciadas, por vezes por alguém que também desconhece o verdadeiro significado do termo, e que não sabe o que é. Para desmistificar todos os segredos, e em vista a esclarecer todos os usuários do Fórum dos Fóruns, criei este tópico.- O que é flood?
Por exemplo, postar uma mensagem com um tutorial de Photoshop num tópico que fala acerca de scripts, não tem qualquer relevância, ainda que, num fórum em que se debata Design este possa ter bom conteúdo.- Os "Up's" também são Flood?
- Por que o flood é proibido?
Imagine o que seria caso o mesmo não fosse permitido. Acha que conseguiria informações úteis para seu fórum? Pensa que iria encontrar algo aqui? Tem a certeza que se iria registrar, vendo tanta mensagem inútil?- Que tipo de mensagens são consideradas flood?
- Comentários fora do contexto principal do tópico são considerados flood. Evite esses comentários, ou abra novos posts, nos devidos sub-fóruns específicos, nunca esquecendo as regras de cada um deles.
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Após haver uma resposta na sua dúvida, todos os usuários são responsáveis por indicar se a mesma está resolvida ou não. Contudo, nem sempre é melhor a forma de agradecimento, como por exemplo "vlw mano", "funfo" e "brigado".Agradecimentos podem ser efetuados de uma forma simples: "obrigado". Evite essas mensagens.
Na área de "Galerias", apenas faça a crítica das imagens, apontando os erros e também o que pode melhorar, não somente apenas dizendo "legal", "gostei", "vlw" ou "mt bom".
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Apenas smileys numa mensagem são flood. Estes não devem ser muitos por cada mensagem, e devem estar de acordo com as frases, que devem ter assuntos relevantes para o fórum.
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Somente risadas, como "lol", "kkkk" e "rsrsrs" nunca devem ser postados. Pode até achar graça a algum tópico ou mensagem, mas ria-se para si. Os outros usuários não necessitam de saber quais os sentimentos, até porque, por vezes, e quando não é o objectivo de um tópico ou mensagem, você pode "insultar", com a sua risada, os usuários em questão.
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Numa mensagem, não devem só constar imagens. Caso lhe peçam, por exemplo, uma screenshot para melhor resolução da sua dúvida, deve sempre legendar a imagem e explicar os fenômenos que nela acontecem.
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Os famosos "clique aqui", tanto para jogos online, como propagandas, jogos de dinheiro ou outros, são flood e serão excluídos o mais rapidamente possível. Ainda que seguidos de tutoriais para informar os usuários de como funcionam esses serviços, estas mensagens são consideradas infrações.- Fiz flood, o que fazer?
. Caso contrário, poderá editar e reformular a sua mensagem. Caso não consiga fazê-lo, poderá pedir a um dos responsáveis pela área para que apaguem a sua mensagem.- Dicas para evitar o flood
- Não faça comentários particulares a outros usuários nos tópicos, isso deve ser feito através de MP.
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Não cite mensagens com o intuito de responder simplesmente que concorda com o usuário;
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Não utilize somente imagens ou smileys na sua resposta;
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Evite postar duas mensagens seguidas. Prefira editar as suas mensagens;
<LI style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Evite postar mensagens muito curtas;- O que é flood?
Tente;
- Código:
a.button2, body:last-child a.button1, button.button2, input.button1, input.button2 :hover {
background-image: url(http://i1180.photobucket.com/albums/x415/downribatejo/inicioyesmouse.png) !important;
background-position: bottom left;
}
Painel de Controle
Visualização Aba " Imagens e Cores " Cores Folha de Estilo CSS Vale lembrar que o código já está com a sua segunda imagem.
Coloque a primeira imagem que seria está
no Painel de controle
Visualização Aba " Imagens e Cores " Gestão das Imagens " Modo Avançado " e procure por ; Indice e ponha a URL lá. 
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por diogo23 17.12.11 13:42
eu coloquei a 1ª na gestão de imagens indice e depois introduzi esse código conforme me mandou mas não funcionou..... 
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por Cream 17.12.11 14:40
Olá,
Tente o seguinte código:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
Até mais!
Tente o seguinte código:
- Código:
#i_icon_mini_index {background-image: url('http://i1180.photobucket.com/albums/x415/downribatejo/inicionomouse.png') !important;}
#i_icon_mini_index:hover {background-image: url('http://i1180.photobucket.com/albums/x415/downribatejo/inicioyesmouse.png') !important;}
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
Até mais!
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Duvida
por diogo23 17.12.11 14:50
Cream escreveu:Olá,
Tente o seguinte código:Adicione em:
- Código:
#i_icon_mini_index {background-image: url('http://i1180.photobucket.com/albums/x415/downribatejo/inicionomouse.png') !important;}
#i_icon_mini_index:hover {background-image: url('http://i1180.photobucket.com/albums/x415/downribatejo/inicioyesmouse.png') !important;}
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
Até mais!
mas na gestão de imagens deixo ficar na mesma a imagem?
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Re: Efeito hover menu de navegação
por diogo23 17.12.11 14:53
não funciounou nimguém sabe como se faz versão PHPBB3...
diogo23- ***
- Membro desde : 10/04/2011
Mensagens : 134
Pontos : 212 -
Tópicos semelhantes» Efeito hover - menu de navegação
» Efeito hover no menu de navegação
» Efeito hover no menu de navegação
» Menu de navegação com efeito hover
» Efeito hover no menu de navegação
» Efeito hover no menu de navegação
» Efeito hover no menu de navegação
» Menu de navegação com efeito hover
» Efeito hover no menu de navegação
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos