zednet
دوشنبه 13 دی 1389, 11:14 صبح
بهتر بود در قسمت طراحی این سوال را می پرسیدید ولی اشکالی نداره! همینجا جواب می دیم.
شما برای اینکار می تونید از 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>
برای راحتی شما فایل نمونه را برای دانلود گذاشتم
-= موفق باشید =-