در این مطلب میخوام ساختن یک روبان ( ribbon ) زیبا رو بهتون آموزش بدم. این نمونه روبان رو شاید در بیشتر سایتها دیده باشید که در گوشه و سمت بالا قرار دارن. ولی هر وقت که روی اونا هاور میکنیم ، هیچ اتفاقی نمیوفته. اما در این مطلب میخوام حالت انیمیشنی مناسبی رو بهتون آموزش بدم که مطمئنم خیلی خوشتون میاد.
همچنین پشتیبانی خوبی از مرورگرها داره.
باید ابتدا به روی روبان هاور کنید. با این کار روبان جابجا میشه و میتونین اون رو درگ کنید و به پایین بکشین. با این کار محتوایی که در بالا قرار داره ، به صورت اسلاید به سمت پایین میاد و اطلاعات بیشتری رو به کاربر نشون میده. با کلیک بر روی دکمه ضربدر ، این صفحه بسته میشه.
برای شروع به صفحه مورد نظر در سایت Github برید و فایلهاشو دانلود کنید. ما در این مطلب به فایلهای forkit.css و forkit.js نیاز داریم. من این فایلهارو در انتها براتون قرار دادم و میتونین اونو دانلود کنید و از اون استفاده کنید.
نحوه استفاده :
ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>7Learn.com – Forkit</title>
<link rel=“stylesheet” type=“text/css” href=“forkit.css”>
<style type=”text/css”>
.close-button {
width: 50px;
height: 50px;
font-size: 40px;
color: yellow;
cursor: pointer;
text-align: center;
position: absolute;
top: 0;
right: 0;
}
.forkit-curtain {
background-color: gray;
}
</style>
</head>
<body>
<div class=“forkit-curtain”>
<div class=“close-button”>X</div>
<h2>7Learn.com</h2>
<img style=“border: 0px; margin: 3px 12px 0px 5px; padding: 0px; display: block; float: left;” src=“http://7learn.com/imgs/7l-logo-am.png”>
<div style=“direction: rtl;font-size:20px;margin-top:300px;”>
<p style=“text-align: justify;”>:: از زمان افتتاح سایت تا کنون که بیش از 4 سال می گذره ، همواره هدفمون افزایش سطح آموخته های بازدید کنندگان سایت در زمینه ی طراحی وب و زبان های برنامه نویسی تحت وب بوده . امیدواریم که روز به روز بتونیم بیشتر به این مهم دست پیدا کنیم .</p>
<p style=“text-align: justify;”><a href=“http://www.7learn.com/authors” target=“_blank”>تیم نویسندگی </a><a href=“http://www.7learn.com”>سون لرن</a> ، تشکیل شده از اعضای متخصص و فعال همواره سعی کرده است که در مقابل تمامی سوالات و در خواست های بازدیدکنندگان پاسخگو باشه .</p>
</div>
</div>
<a href=“#” class=“forkit” data-text=“ماوستون رو بیارین اینجا” data-text-detached=“بکشیئ پایین >”>Click here</a>
<p style=“direction:rtl;text-align:center;font-size:20px;margin-top:100px;”>ماوستون رو ببرین روی روبانی که در گوشه هست و اون رو به سمت پایین بکشین. با این کار محتویات بیشتری در اختیارتون قرار میگیره.</p>
<script type=“text/javascript” src=“forkit.js”></script>
<script type=“text/javascript”>
</script>
</body>
</html>
|
تا اینجا کدهای CSS و HTML رو قرار دادیم و ظاهر رو مشخص کردیم. فایل forkit.css رو در قسمت head و فایل forkit.js رو در انتها اضافه کردیم. در انتها هم یک تگ باز و بسته script رو قرار دادیم که کدهای مورد نظرمونو در اون قرار بدیم.
برای قرار دادن روبان در گوشه بالا ، کافیه که یک تگ a رو قرار بدین و کلاس forkit رو به اون بدین. بصورت زیر :
|
1
|
<a href=“#” class=“forkit”></a>
|
با اینکار روبان قرار میگیره ، ولی چیزی روش نوشته نشده. برای اینکه چیزی روی اون بنویسید ، باید از خاصیت data-text استفاده کنید. بصورت زیر :
|
1
|
<a href=“#” class=“forkit” data-text=“متن نمونه 1”></a>
|
حالا اگر صفحه رو Refresh کنید میبینید که بر روی روبان متن نمونه 1 نوشته شده است. وقتی روی روبان هاور میکنید ، میتوان کاری کرد که متن آن تغییر کند. برای اینکار از خاصیت data-text-detached استفاده میکنیم. بصورت زیر :
|
1
|
<a href=“#” class=“forkit” data-text=“متن نمونه 1” data-text-detached=“متن نمونه 2”></a>
|
حالا میرسیم به اون قسمتی که در ابتدا مخفی هست و با کشیدن روبان به سمت پایین ظاهر میشه. برای ساختن اون قسمت باید یک div درست کنید و کلاس forkit-curtain رو به اون بدین. به همین سادگی. حالا فقط کافیه که اطلاعاتی که میخواین کاربر در هنگام پایین کشیدن روبان اونارو ببینه ، در این div قرار بدین. برای بسته شدن این قسمت هم باید یک div بسازید و کلاس close-button رو به اون بدین. حالا اگر روی این div کلیک کنید ، به صفحه اصلی برمیگردیم.
با استفاده از کدهای جاوااسکریپت میتونین کاری کنید که هنگام باز شدن و بسته شدن ، کدهایی اتوماتیک اجرا بشوند. برای اینکار باید کدها رو در تگ باز و بسته script که در انتها وجود دارد ، قرار دهیم.
کدهایی که در هنگام باز شدن اجرا میشن :
|
1
2
3
|
document.querySelector( ‘.forkit’ ).addEventListener( ‘forkit-open’, function() {
// این کدها زمانی که روبان به سمت پایین کشیده میشه ، اجرا میشن
} );
|
کدهایی که در هنگام بسته شدن اجرا میشن :
|
1
2
3
|
document.querySelector( ‘.forkit’ ).addEventListener( ‘forkit-close’, function() {
// این کدها در هنگام بسته شدن ، اجرا میشن
} );
|
خودتون که یک مقدار باهاش کار کنید ، با قابلیتهای دیگه اون هم آشنا میشین.
