Hocam html kodu ;



İLETİŞİM




İLETİŞİM FORMU













2.Css Kodu ;


.iletisimbuton {background:#81c8f4;
padding:6px;width:auto;
margin:50px 0px 0px 0px;
position:fixed;
left:0;
border:2px solid #6abee8;
}

a.ac {background:url(img/email_go.png) no-repeat;padding:0px 0px 0px 20px;color:#fff;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
a.kapat {background:url(img/cross.png) no-repeat;padding:0px 0px 0px 20px;color:#1a79a8;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}

#iletisimformu {
width:350px;
background:#3ea2e1 url(img/formbg.gif) repeat-x;
padding:5px;
color:#fff;
border:2px solid #6abee8;
margin:90px 0px 0px -400px;
display:block;
position:fixed;top:0;left:0;
}

#iletisimformu h2 {

color:#fff;
font:18px/36px arial, verdana, helvetica, sans-serif;
padding:0px 0px 6px 6px;
margin:0;
}

#iletisimformu label {
float: left;
width: 100px;
font:12px arial, verdana, helvetica, sans-serif;
padding:4px;
clear:both;
margin:8px 2px 8px 2px;
}

#iletisimformu input{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px}
#iletisimformu textarea{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px;width:200px;height:100px}

#iletisimformu input:focus, #iletisimformu textarea:focus {border:2px solid #bee2f4;background:#f5f5f5}


3. Jquery kodu :


<script>
$(document).ready(function() {
$(".iletisimbuton a").click(function() { //mouse in
$("#iletisimformu").animate({ marginLeft: '0px' },100);

});

$("a.kapat").click(function() { //mouse in
$("#iletisimformu").animate({ marginLeft: '-400px' },100);

});
$(".iletisimbuton a").click(function () {
$(".iletisimbuton a").toggle();
});
});

</script>


Demo - İndir -

Alıntıdır.