انییمیشن کردن به صورت X (ضربدر) navbar-toggle در منو بوتسترپ

برای شروع بیاید ببینیم بوتسترپ منو چگونه کار میکنه ،۳ تا تگ span درون یک دکمه قرار دارند همچنین یک المنت span دیگه برای نوشتن در حالت عادی و زمانی که کلیک نشود دکمه منو به صورت بسته شده قرار دارد . زمانی شما کلیک میکنی منو رو باز میشه و کلاس collapsed حذف میشه
کد زیر مستقیما از مثال بوتسترپ گرفته میشه .

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button

اجازه بدید چند کلاس به کد بالا اضافه کنیم که بتونیم ایکون بار ها رواز هم متمایز کنیم.

<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar top-bar”></span>
<span class=”icon-bar middle-bar”></span>
<span class=”icon-bar bottom-bar”></span>
</button>

خب سناریو اینکه چطور انیمیشن کار میکنه رو مرحله به مرحله مرور میکنیم

۱-سمت راسمت ایکون بالایی به سمت پایین حرکت میکنه
۲-ایکون وسطی حذف میشه
۳-سمت راست ایکون پایین به سما بالا حرکت می کنه

خب حالا کد CSS که برای ایجاد انیمیشن نیاز داریم رو براتون میارم. بخاطر بیاورید که .navbar-toggle به صورت ۳ خط ثابت هست زمانی که .کلاس collapsed رو داره ولی ما مخوایم موقیت انیمیشن X رو به حالت پیشفرض در بیاریم .

.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}

توضیح کد بالا :

۱-اومدیم بکگراند و border رو برداشتیم .
۲-به ایکون ها عرض و زمان CSS3 transition دادیم .
۳-با transform-origin محل چرخش رو تعیین کردیم که برای ایکون بالایی (.top-bar) شروع از سمت چپ میشه و برای ایکون پایینی(.bottom-bar) شروع از سمت راست میشه .
۴-همچنین ۴۵ درجه هرکدوم می چرخند .
۵-ایکون وسطی هم رو در زمانی که navbar باز میشه حذف میکنیم و برای این کار بهش opacity صفر میدیم .

خب اگه کد بالا اجرا کنیم شکل دکمه به صورت کلی به صورت X خواهد بود برای حل این مشکل باید درحالت collapsed هم مقادیر لازم برای ایکون ها اعمال کنیم و کد زیر رو قرار بدیم.

.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
همونطور در کد بالا میبینید مقدایری که در حالت انیمیشن دادیم رو اینجا ریست کردیم و به صورت دیفالت در اوردیم .

با ما همراه باشید
موفق باشید

local_offerevent_note خرداد ۱۲, ۱۳۹۷

account_box ali kaviani


local_offer

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *