zednet
دوشنبه 13 دی 1389, 11:34 صبح
شما برای اینکار می تونید از Framework های جاوا اسکریپت استفاده کنید.
من با استفاده از jQuery راهنماییتون می کنم:
یک فایل HTML ایجاد کنید و اطلاعات زیر را وارد کنید:
<script type="text/javascript" src="jquery.mini.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />کد style.css
body{margin:0px;}
.lg_bx{
font:12px tahoma;
text-align:center;
border:1px #09F;
background-color:#333;
color:#FFF;
padding:7px;
position:fixed;
top:0px;
margin-left:auto;
margin-right:auto;
width:100%;
display:none;
}
#lg_bx_btn{
font:bold 12px tahoma;
text-align:center;
border:1px #09F;
background-color:#C00;
color:#FFF;
padding:7px;
cursor:pointer;
position:fixed;
top:0px;
right:0px;
}
.copy{
font:16px tahoma;
text-align:center;
border:1px #09F;
background-color:#DDD;
color:#000;
padding:7px;
margin-top:250px;
}
اسکریپت jQuery بهمراه style.css را در کنار فایل HTML خود ذخیره کنید.
کدهای زیر را در فایل HTML که قبلا ایجاد کردید وارد کنید:
<div class='lg_bx'>دراین قسمت فیلد های فرم ورود خود را قرار دهید</div>
<div id='lg_bx_btn'>منوی کاربری</div>
<script>
$("#lg_bx_btn").click(function () {
$(".lg_bx").slideToggle("fast");
});
</script>
برای راحتی شما فایل نمونه را برای دانلود گذاشتم
-= موفق باشید =-