InícioMenu que desliza
3 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 • Compartilhe
Menu que desliza
por Bookmarlucas654 28.01.12 13:30
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á!
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
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á!
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
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Konai 28.01.12 13:44
Olá,
Tente utilizar o seguinte código na sua FOLHA CSS;
Painel de Controle Visualização Aba " Imagens e Cores " Cores /\ Folha de Estilo CSS
Resulta?
Tente utilizar o seguinte código na sua FOLHA CSS;
#logo {
-webkit-transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
background: url(https://i.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;
}
Painel de Controle Visualização Aba " Imagens e Cores " Cores /\ Folha de Estilo CSS Resulta?
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Konai 28.01.12 14:21
Olá novamente caro Bookmarlucas654,
Tente utilizar o seguinte Código;
Adicione em:
Painel de Controle Visualização Aba " Imagens e Cores " Cores /\ Folha de Estilo CSS
Até mais.
Tente utilizar o seguinte Código;
#logo-desc {
margin: 0px;
padding: 0px;
text-align: left;
}
Adicione em:
Painel de Controle Visualização Aba " Imagens e Cores " Cores /\ Folha de Estilo CSS Até mais.
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
Re: Menu que desliza
por Bookmarlucas654 28.01.12 14:50
Não pegou. Agora, ele ficou no lado "ESQUERDO", e não desliza ao aproximar o mouse *-*
*Retirando código do CSS*
*Retirando código do CSS*
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Convidad 28.01.12 14:56
Olá,
Substitua os códigos dados por este:
Salve e visualize seu fórum.
Até mais.
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.
Convidad- Convidado
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:05
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?
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Convidad 28.01.12 15:09
Olá,
Substitua o código dado por este:
Salve e visualize seu fórum.
Até mais.
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.
Convidad- Convidado
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:12
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?
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Ace 28.01.12 15:13
Olá,
Ele modificou a parte:
para
Até Mais!
Ele modificou a parte:
float: right;
para
float: center;
Até Mais!
Ace- Membro Entusiasta
- Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11607 -
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:17
Ata, mas, ele não ficou centralizado, ficou para a esquerda 
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Ace 28.01.12 15:19
Olá,
Mas houve mais modificações como na quantidade px de:
Dentre outras modificações. Poderá ajustar as margens em px em todo o código até que se adeque ao desejado
Até Mais!
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
Até Mais!
Ace- Membro Entusiasta
- Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11607 -
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:22
Vou tentar, muito obrigado! *Não fecha o tópico ainda não*
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Convidad 28.01.12 15:26
Olá,
Substitua o código dado por este:
Até mais.
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.
Convidad- Convidado
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:28
Tá quase! Cara, onde "EXATAMENTE" você coloca para mudar a posição do logo? Eu só quero saber disto para que eu possa conseguir '-'
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Convidad 28.01.12 15:31
Olá,
Ok...
Já está em: "0px", então a próxima propriedade que você irá tentar colocar é -1.
Até mais.
Ok...
right: 0px;
left: 0px;
top: 25px;
Já está em: "0px", então a próxima propriedade que você irá tentar colocar é -1.
Até mais.
Convidad- Convidado
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:32
Consegui, editei o CSS para este:
E pegou certinho =] Era esta parte:
Obrigado pela ajuda ae!
- 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!
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
Re: Menu que desliza
por Bookmarlucas654 28.01.12 15:39
Podem fechar o tópico já *-* O Touks me ajudou
Bookmarlucas654- Membro
- Membro desde : 13/01/2012
Mensagens : 580
Pontos : 833 -
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
Facebook
Twitter
Youtube
