Sayfanın üstündeki login (giriş) butonuna tıklanarak, kullanıcılarımıza kolay ve portatif bir login formu açar.
Tek link olarak bekleyen sisteme giriş bağlantısı , tıklandığı anda yeni bir sayfaya gerek duymadan açılır ve kullanıcı için pratik bir sisteme giriş imkanı sağlar.
Popüler birçok web servisi bu şekilde login sistemi kullanarak yeni bir trend oluşturdu. Örn: twitter , put.io
Uygulama kodlarına geçelim;
Javascript Kodlarımız
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contactLink").click(function(){
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
}
else{
$("#contactForm").slideUp("slow");
}
});
});
function closeForm(){
$("#messageSent").show("slow");
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}
</script>
&amp;nbsp;
Css Kodlarımız:
<style type="text/css">
body{
margin: 0px;
text-align:center;
background-color:#ebe9d7;
font-family:Arial, Sans-Serif;
font-size:0.75em;
}
.box
{
margin: 0px auto;
width:960px;
background-color:#ffffff;
text-align:left;
position: relative;
}
.header
{
height:100px;
}
.header h1
{
margin:0px;
padding:30px;
}
.menu
{
height:30px;
border-top:solid 1px #dccfbb;
border-bottom:solid 1px #dccfbb;
background-color:#4d3a24;
}
.menu div
{
padding:10px 30px;
}
.menu a
{
margin:0px 10px;
color:#fecd28;
text-decoration: none;
}
.content
{
padding:10px 30px;
}
#contactFormContainer
{
position:absolute;
left:600px;
float:right;
}
#contactForm
{
height:277px;
width:351px;
background-color:#CCC;
display:none;
}
#contactForm fieldset
{
padding:30px;
border:none;
}
#contactForm label
{
display:block;
color:#000;
}
#contactForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm input[type=password]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#contactForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#contactLink
{
height:40px;
width:351px;
background-image:url('slidein_button.png');
background-color:#666;
display:block;
cursor:pointer;
}
#messageSent
{
color:#000;
display:none;
}
</style>
Html Kodlarımız:
<body> <div> <div id="contactFormContainer"> <div id="contactForm"> <fieldset> <label for="Email">Email address *</label> <input id="Email" type="text" /> <label for="Message">Passwor *</label> <input id="Email" type="password" /> <input id="sendMail" type="submit" name="submit" value="Login" onClick="closeForm()" /> <span id="messageSent">İletiniz başarıyla gönderildi!</span> </fieldset> </div> <div id="contactLink"></div> </div> <div> <div id="lipsum"> <p>sayfa içeriği.............</p> </div> </div> </div> </body>
Hacı Demo ve Proje Dosyaları Uçmuş Bilgine
müslüm eski blogunu yenilediği için, demolar şuan erişilemiyor. umarız bi gün güncellenecektir.