پیشنمایش زنده (iframe sandbox)
تمامصفحه
<nav class="radikalwp-nav-underline"><a class="radikalwp-nav-underline-link" href="#">دورهها<//a><a class="radikalwp-nav-underline-link is-active" href="#">مقالات<//a><a class="radikalwp-nav-underline-link" href="#">دانلودها<//a><a class="radikalwp-nav-underline-link" href="#">درباره ما<//a><//nav>
.radikalwp-nav-underline {
display: flex;
gap: 30px;
}
.radikalwp-nav-underline-link {
position: relative;
padding: 8px 2px;
font-size: 14px;
font-weight: 700;
color: #334155;
text-decoration: none;
transition: color .25s ease;
}
.radikalwp-nav-underline-link::after {
content: "";
position: absolute;
bottom: 0;
right: 50%;
width: 0;
height: 2.5px;
border-radius: 999px;
background: #4f46e5;
transform: translateX(50%);
transition: width .3s cubic-bezier(.25, .8, .3, 1);
}
.radikalwp-nav-underline-link:hover { color: #4f46e5; }
.radikalwp-nav-underline-link:hover::after,
.radikalwp-nav-underline-link.is-active::after { width: 100%; }
.radikalwp-nav-underline-link.is-active { color: #4f46e5; }
درباره این اسنیپت
منوی هدر با خط زیرین نازکی که هنگام هاور از وسط به دو طرف باز میشود؛ ظریف، سریع و بدون جابهجایی چیدمان. خط با شبهعنصر و scaleX ساخته شده و رنگ آن قابلتغییر است. برای هدرهای روشن، منوهای شرکتی و فوتر مناسب است. حالت فعال هم خط دائمی دارد تا جای کاربر گم نشود.
پرسشهای متداول
right و translateX را با left جایگزین کنید و transform را حذف کنید؛ باز شدن از لبه چپ اجرا میشود.
scaleX سریعتر است اما کل خط را از مرکز فشرده میکند؛ برای خطهای گرادیانی یا ضخامت متغیر width تمیزتر رندر میشود و هزینه این منو ناچیز است.
یک ul مطلق زیر آیتم موردنظر با opacity و visibility بگذارید که در هاور ظاهر شود؛ خط زیرین با زیرمنو تداخلی ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!