<nav class="radikalwp-nav-pill"><a class="radikalwp-nav-pill-link" href="#">خانه<//a><a class="radikalwp-nav-pill-link is-active" href="#">ابزارها<//a><a class="radikalwp-nav-pill-link" href="#">فونتها<//a><a class="radikalwp-nav-pill-link" href="#">واژهنامه<//a><a class="radikalwp-nav-pill-link" href="#">تماس<//a><//nav>
.radikalwp-nav-pill {
display: inline-flex;
gap: 4px;
padding: 6px;
background: #f1f5f9;
border-radius: 999px;
}
.radikalwp-nav-pill-link {
padding: 9px 20px;
font-size: 13.5px;
font-weight: 700;
color: #64748b;
text-decoration: none;
border-radius: 999px;
transition: color .25s ease, background .25s ease;
}
.radikalwp-nav-pill-link:hover { color: #0f172a; }
.radikalwp-nav-pill-link.is-active {
color: #fff;
background: #0f172a;
box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
درباره این اسنیپت
منوی افقی که آیتم فعال آن بهصورت قرص تیره برجسته میشود و بقیه آیتمها خطی و آراماند؛ الگوی منوی تمیز برای هدرهای مینیمال. هاور فقط رنگ متن را تغییر میدهد تا با برجستگی فعال تداخل نکند. برای هدر سایت، تبهای دستهبندی و منوی پروفایل مناسب است. حالت فعال با کلاس is-active از سمت سرور کنترل میشود.
پرسشهای متداول
در سمت سرور مسیر فعلی را با آدرس هر لینک مقایسه کنید و کلاس is-active را روی لینک جاری بگذارید؛ مثل همین سایت که منوی هدرش داینامیک است.
با max-width و overflow-x: auto منو را اسکرولپذیر کنید یا در موبایل به منوی همبرگری سوئیچ کنید؛ قرصها در اسکرول افقی هم قشنگ میمانند.
پسزمینه و سایه کلاس is-active را با رنگ برند تغییر دهید؛ سایه همرنگ پسزمینه، عمق بهتری میدهد تا خاکستری.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!