پیشنمایش زنده
اسنیپت
سایدبار دستهبندی با هایلایت
ناوبری
سایدبار
دستهبندی
۸۰
۴.۵ (۱۲)
<div class="radikalwp-tabs-line"><input type="radio" id="radikalwp-tabs-a" name="radikalwp-tabs" checked><label for="radikalwp-tabs-a">همه<//label><input type="radio" id="radikalwp-tabs-b" name="radikalwp-tabs"><label for="radikalwp-tabs-b">اسنیپت<//label><input type="radio" id="radikalwp-tabs-c" name="radikalwp-tabs"><label for="radikalwp-tabs-c">قالب<//label><//div>
.radikalwp-tabs-line {
display: inline-flex;
gap: 6px;
padding: 5px;
background: #f1f5f9;
border-radius: 13px;
}
.radikalwp-tabs-line input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radikalwp-tabs-line label {
position: relative;
padding: 9px 24px 11px;
font-size: 13.5px;
font-weight: 700;
color: #64748b;
border-radius: 9px;
cursor: pointer;
transition: color .25s ease, background .25s ease;
}
.radikalwp-tabs-line label::after {
content: '';
position: absolute;
bottom: 3px;
right: 50%;
width: 0;
height: 3px;
border-radius: 999px;
background: #4f46e5;
transform: translateX(50%);
transition: width .3s ease;
}
.radikalwp-tabs-line input:checked + label {
color: #4f46e5;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.radikalwp-tabs-line input:checked + label::after { width: 46%; }
تببار سهگانه با خط فعال زیر هر تب که در حالت انتخاب از مرکز باز میشود. حالت فعال با رادیو واقعی ساخته شده تا بدون جاوااسکریپت کار کند و با فرمها هم سازگار بماند. برای فیلتر سریع فهرستها، هدر بخشها و تبهای موبایل مناسب است. برچسب تبها و تعدادشان با کپی کردن بلوک رادیو قابل افزایش است.
جفت input رادیو و label جدید اضافه کنید و نام رادیو را یکسان نگه دارید تا گروه انتخاب حفظ شود.
این نسخه ناوبری ظاهری است. برای تعویض محتوا میتوانید سلکتورهای :checked را به پنلهای محتوای خود وصل کنید.
رنگ پسزمینه شبهالمان ::after زیر لیبل فعال را با رنگ برند خود جایگزین کنید. رنگ متن فعال را هم هماهنگ کنید.
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!