ساخت آیکون منوی کشویی انیمیشن دار HTML بدون کتابخانه

ساخت آیکون منوی کشویی انیمیشن دار HTML بدون کتابخانه
با استفاده از HTML, CSS و جاوا اسکریپت خالص

در اپلیکیشن‌های اندرویدی، منویی وجود دارد که با کشیدن صفحه به سمت راست یا چپ باز می‌شود؛ از جمله اپلیکیشن Gmail اندروید. و این منوها، آیکونی برای باز کردن دارند که شکل آن به صورت چند خط زیر هم می‌باشد. و معمولا با کلیک روی آن، انیمیشنی روی آیکون‌ها رخ داده به شکل ضربدر در می‌آید؛ و در نهایت منو باز می‌شود. برای ساخت چنین آیکونی بدون نیاز به کتابخانه‌های جانبی در ادامه با فول کده همراه باشید.

مراحل انجام کار

از آنجایی که آیکون ما شامل سه خط است، ماهم سه div ایجاد می‌کنیم: (البته الزامی نیست که حتما از div استفاده کنید.)

<div></div>
<div></div>
<div></div>

سپس استایل CSS آن را به صورت زیر می‌نویسیم:

div {
    width: 35px; /* عرض */
    height: 5px; /* ارتفاع */
    background-color: black; /* رنگ زمینه */
    margin: 6px 0; /* فاصله از اطراف */
}

همانطور که می‌بینید، با استفاده از انتخابگر div، به کل div ها خاصیت‌های یکسانی داده‌ایم.

و اما کل کد به صورت یکجا:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}
</style>
</head>
<body>

<p>A menu icon:</p>

<div></div>
<div></div>
<div></div>

</body>
</html>

سخت انیمیشن آیکون و اصلاح کد

می‌خواهیم تا با کلیک روی آیکون منو، سه خط با یک انیمیشن چرخشی ساده، به حالت ضربردری تبدیل شوند! و با کلیک دوباره، به حالت اولیه بازگردند. بنابراین برای شروع، کد HTML خود را به صورت زیر می‌نویسیم:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

همانطور که می‌بینید، یک المنت به عنوان بدنه‌ی کلی برای تمامی خطوط منو در نظر گرفته‌ایم که شامل کلاس «container» می‌باشد و همچنین هر کدام از المنت‌های مربوط به خطوط، از یک کلاس مجزایی به نام‌های «bar1»، «bar2» و «bar3» استفاده می‌کنند؛ و در نهایت نیز رویداد کلیک شدن روی بدنه‌ی آیکون را به تابع «myFunction» جاوا اسکریپت که بعدا خواهیم نوشت ارتباط می‌دهیم.

کد استایل CSS ما به صورت زیر می‌باشد:

/* بدنه‌ی آیکون */
.container {
    display: inline-block; /* حالت نمایشی تمام خط را نگیرد */ 
    cursor: pointer; /* تغییر آیکون ماوس */ 
}

/* خطوط آیکون */
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s; /* مدت زمانی که طول میکشد یک انیمیشن روی این المنت اجرا شود */
}

/* انیمیشن خط اول */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; /* جابه‌جایی و چرخش */
    transform: rotate(-45deg) translate(-9px, 6px) ; /* جابه‌جایی و چرخش */
}

/* انیمیشن خط وسطی */
.change .bar2 {
    opacity: 0; /* محو شدن */
}

/* انیمیشن خط سوم */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ; /* جابه‌جایی و چرخش */
    transform: rotate(45deg) translate(-8px, -8px) ; /* جابه‌جایی و چرخش */
}

در کلاس «container» که برای بدنه‌ی آیکون می‌باشد، خاصیت نمایشی آن را به «inline-block» تغییر داده‌ایم تا کل یک سطر را دربرنگیرد. همچنین آیکون ماوس آن را به اشاره‌گر تغییر دادیم.

در ادامه، برای سه کلاس «bar1»، «bar2» و «bar3» ویژگی‌های یکسانی را تعریف کرده‌ایم؛ همان وبژگی‌هایی که در بالا به آن‌ها اشاره شد به همراه ویژگی جدید «transition» برای مشخص کردن زمان اجرای انیمیشن روی خطوط آیکون. یعنی انیمیشن 0.4 ثانیه طول خواهد کشید تا پس از شروع شدن، به اتمام برسد. (ما قرار است هر خط را انیمیت کنیم)

در نهایت کلاسی با نام «change» را برای تمام «bar» ها و به صورت جدا تعریف کرده‌ایم. که در واقع این کلاس با اضافه شدن به بدنه‌ی آیکون در زمان کلیک شدن روی آن، قرار است حالت انیمیشنی هر خطی را به صورت جدا از هم ایجاد کند:

bar1 (خط اول) آن را 45 درجه چرخانده و سپس جابه‌جا می‌کند تا در مرکز قرار گیرد. البته مقدار جابه‌جایی به عرض و ارتفاع المنت بستگی دارد که ما در اینجا آن را -9px, 6px تنظیم کرده‌ایم. همچنین ما از -webkit-transform هم استفاده کرده‌ایم تا در مرورگرهای مختلف مشکلی پیش نیاید که البته باید بدانید در هر مرورگی یکی از این دو مورد را اجرا خواهد شد.
bar2 (خط دوم) خط دوم بایستی حذف شود تا دو خط پس از چرخیدن به حالت ضربدری دربیایند! بنابراین میزان شفافیت خط دوم را 0 می‌کنیم تا مخفی شده و دیگر دیده نشود.
bar3 (خط سوم) این خط نیز همانند خط اول بوده و تنها جهت چرخش آن مثبت است.

حالا بایستی تابع «myFunction» را پیاده‌سازی کنیم تا با کلیک روی بدنه‌ی آیکون، کلاس «change» اضافه یا حذف شود.

function myFunction(x) {
    x.classList.toggle("change");
}

و در نهایت کد ما به صورت زیر خواهد بود:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>

<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<script>
function myFunction(x) {
    x.classList.toggle("change");
}
</script>

</body>
</html>

اگر برایتان سوال شده که حالت برعکس آیکون چطور به عقبت انیمیشن می‌شود در حالی که کد آن را در CSS ننوشتیم، باید بگویم که با حذف کلاس change، همه تغییرات داده شده‌ی این کلاس به عقب برگردانده شده و یا به عبارتی برعکس می‌شود!

ساخت آیکون منوی کشویی انیمیشن دار HTML بدون کتابخانه

مراحل انجام کار

سخت انیمیشن آیکون و اصلاح کد

درباره نویسنده

هادی اکبرزاده
[ مدیر فول کده ]

پاسخ دهید لغو پاسخ

نظرات ثبت شده بدون دیدگاه

مراحل انجام کار

سخت انیمیشن آیکون و اصلاح کد

مطالب پشنهادی

درباره نویسنده

هادی اکبرزاده [ مدیر فول کده ]

پاسخ دهید لغو پاسخ

نظرات ثبت شده بدون دیدگاه

هادی اکبرزاده
[ مدیر فول کده ]