Veja neste artigo como criar uma caixa de mensagem semelhante ao chat do facebook utilizando jquery.
A caixa será dividida em duas partes, a inicial sempre será visivel na tela, e caixa que contém a mensagem, que vai aparecer quando o usuário passar o mouse sobre a caixa inicial. Você pode baixar o vídeo no topo do artigo, na opção "download" e veja a ideia de como deveria ficar.
Veja o código html:
<div class="panel">
<p><b>Teste</b></p>
<p>>teste1</p>
<p>>teste2</p>
</div>
<p class="flip">Mensagens</p>
A classe flip para a caixa inicial e a classe panel para a caixa de mensagem.
Tendo o html vamos configurar o CSS dos componentes que iremos utilizar
div.panel,p.flip
{
width: 70px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
position:fixed;
right:10px;
bottom:-15px;
z-index:1;
}
div.panel
{
position:fixed;
bottom: 29px;
width: 200px;
height: auto;
display:none;
text-align:left;
z-index:1;
}
Os comandos "position:fixed" e "z-index:1" permitem que as caixas de mensagem fiquem em uma posição fixa desejada e em primeiro plano sempre.
abaixo o código do script jquery que permitira a animação do box.
$(".flip").mouseenter(function () {
$(".flip").animate({ width: 200 }, "fast");
$(".panel").delay(200).slideDown("fast");
});
$(".flip").mouseleave(function () {
$(".panel").slideUp("fast");
$(".flip").delay(200).animate({ width: 70 }, "fast");
});
Tudo ocorre nos eventos de entrada e saida do mouse, mostrando ou escondendo o box da mensagem e esticando ou encolhendo o box inicial, o delay é utilizado para manter armonia entre os efeiros de slide e animete, dando o efeito de que são continuos.
Veja como seria a imagem do box fechado e aberto.
Com isso finalizo este artigo, qualquer duvida é só postar aqui!
Abraço.
Aprenda mais sobre jQuery.
