Menu que desliza

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

Resolvido Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 11:30 am

Qual é minha questão:
Eu queria fazer o seguinte. Esta imagem é o logo de meu fórum:



Eu queria que, quando alguém aproximasse o mouse do logo, ela deslizasse para a direita, tem como?

Fórum que eu vi isto: http://masterexp.forumeiro.com/forum

Existe algum CSS ou HTML, ou até mesmo(talvez raro) widget para fazer isto? Agradeço desde já!

Feliz

Medidas que eu tomei para corrigir o problema:
Vir aqui

Imagens do meu problema:


Endereço do meu fórum:
http://habbojoy.forumeiros.com/

Versão do meu fórum:
PHPBB3
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 11:37 am

Meu fórum é este aqui tá gente:

http://habbojoy.forumeiros.com/
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Gaaratsu em 28/01/12, 11:44 am

Olá,

Tente utilizar o seguinte código na sua FOLHA CSS;

#logo {
-webkit-transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png);
display: block;
float: left;
height: 135px;
left: 100px;
margin: 0px auto 25px;
overflow: hidden;
position: relative;
text-indent: -9999px;
top: 5px;
width: 859px;
}

Flecha ajudeiros Painel de Controle Flecha ajudeiros Visualização Flecha ajudeiros Aba " Imagens e Cores " Flecha ajudeiros Cores /\ Folha de Estilo CSS

Resulta?

Piscada


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
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: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 11:50 am

Não pegou! Olha o que fez com o logo:



Não
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 12:11 pm

Ajuda, pf cara *-*
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Gaaratsu em 28/01/12, 12:21 pm

Olá novamente caro Bookmarlucas654,

Tente utilizar o seguinte Código;

#logo-desc {
margin: 0px;
padding: 0px;
text-align: left;
}

Adicione em:
Flecha ajudeiros Painel de Controle Flecha ajudeiros Visualização Flecha ajudeiros Aba " Imagens e Cores " Flecha ajudeiros Cores /\ Folha de Estilo CSS

Até mais.


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
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: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 12:50 pm

Não pegou. Agora, ele ficou no lado "ESQUERDO", e não desliza ao aproximar o mouse *-*

*Retirando código do CSS*
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Convidad em 28/01/12, 12:56 pm

Olá,

Substitua os códigos dados por este:
Código:
#logo {
  width: 500px;
position: relative;
 background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png);
  background-repeat: no-repeat;
text-indent: -9999px;
height: 160px;
display: block;
margin: 0 auto;
margin-bottom: 25px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;

left: 35px;
top: 25px;
float: right;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
 
  overflow:hidden;
}


#logo:hover {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#logo:active {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}

Salve e visualize seu fórum.
Até mais. Piscada

Convidad
Convidado


Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:05 pm

Exatamente isto, mas, ele foi um pouco mais para a direita! Quero que ele fique no centro, e ao aproximar, deslize para a direita. E ao tirar o mouse, ele volte para o centro, entende?
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Convidad em 28/01/12, 01:09 pm

Olá,

Substitua o código dado por este:
Código:
#logo {
  width: 500px;
position: relative;
 background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png);
  background-repeat: no-repeat;
text-indent: -9999px;
height: 160px;
display: block;
margin: 0 auto;
margin-bottom: 25px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;

right: 35px;
top: 25px;
float: center;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
 
  overflow:hidden;
}


#logo:hover {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:translate(200px);
  -moz-transform: translate(200px);
  -o-transform:translate(200px);
 }

#logo:active {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:scale(15px);
  -moz-transform:scale(15px);
  -o-transform:scale(15px);
}

Salve e visualize seu fórum.
Até mais. Piscada

Convidad
Convidado


Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:12 pm

Cara, ele foi um pouco de mais para a esquerda! Só me diz uma coisa. Qual a parte do código eu edito para modificar a posição?
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com
  • 0

Resolvido Re: Menu que desliza

Mensagem por Ace em 28/01/12, 01:13 pm

Olá,

Ele modificou a parte:

float: right;

para

float: center;

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:17 pm

Ata, mas, ele não ficou centralizado, ficou para a esquerda Envergonhado
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com
  • 0

Resolvido Re: Menu que desliza

Mensagem por Ace em 28/01/12, 01:19 pm

Olá,

Mas houve mais modificações como na quantidade px de:

-webkit-transform:translate(200px);
-moz-transform: translate(200px);
-o-transform:translate(200px);

Dentre outras modificações. Poderá ajustar as margens em px em todo o código até que se adeque ao desejado Piscada

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:22 pm

Vou tentar, muito obrigado! *Não fecha o tópico ainda não*
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Convidad em 28/01/12, 01:26 pm

Olá,

Substitua o código dado por este:

Código:
#logo {
  width: 500px;
position: relative;
 background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png);
  background-repeat: no-repeat;
text-indent: -9999px;
height: 160px;
display: block;
margin: 0 auto;
margin-bottom: 25px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;

right: 0px;
  left: 0px;
top: 25px;
float: center;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
 
  overflow:hidden;
}


#logo:hover {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:translate(200px);
  -moz-transform: translate(200px);
  -o-transform:translate(200px);
 }

#logo:active {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:scale(15px);
  -moz-transform:scale(15px);
  -o-transform:scale(15px);
}

Até mais. Piscada

Convidad
Convidado


Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:28 pm

Tá quase! Cara, onde "EXATAMENTE" você coloca para mudar a posição do logo? Eu só quero saber disto para que eu possa conseguir '-'
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Convidad em 28/01/12, 01:31 pm

Olá,

Ok... Rindo

right: 0px;
left: 0px;
top: 25px;

Já está em: "0px", então a próxima propriedade que você irá tentar colocar é -1.

Até mais. Piscada

Convidad
Convidado


Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:32 pm

Consegui, editei o CSS para este:

Código:
#logo {
  width: 350px;
position: relative;
 background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png);
  background-repeat: no-repeat;
text-indent: -9999px;
height: 160px;
display: block;
margin: 0 auto;
margin-bottom: 25px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;

right: 0px;
  left: 0px;
top: 25px;
float: center;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
 
  overflow:hidden;
}


#logo:hover {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:translate(200px);
  -moz-transform: translate(200px);
  -o-transform:translate(200px);
 }

#logo:active {
background: url(http://i47.servimg.com/u/f47/17/17/49/06/logoti11.png) 0px 0px;
    background-repeat: no-repeat;
  -webkit-transform:scale(15px);
  -moz-transform:scale(15px);
  -o-transform:scale(15px);
}

E pegou certinho =] Era esta parte:

#logo {
width: 350px;

Obrigado pela ajuda ae! Tive uma idéia!
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Menu que desliza

Mensagem por Bookmarlucas654 em 28/01/12, 01:39 pm

Podem fechar o tópico já *-* O Touks me ajudou Piscada
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.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