پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<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 را با رنگ برند تغییر دهید؛ سایه هم‌رنگ پس‌زمینه، عمق بهتری می‌دهد تا خاکستری.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

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

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

نوار بالای سایت با لینک فعال

ناوبری هدر منو
۴۵
۴.۷ (۷)

منو با خط زیرین کشویی

ناوبری منو خط زیرین
۶۰
۴.۱ (۹)

لینک ناو کپسولی

ناوبری لینک کپسولی
۱۵
۴.۶ (۳)