پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<nav class="radikalwp-nv-tabbar"><a href="#" class="radikalwp-nv-tabbar-on"><i>⌂<//i>خانه<//a><a href="#"><i>⌕<//i>جستجو<//a><a href="#"><i>♡<//i><em>۳<//em>علاقه‌مندی<//a><a href="#"><i>☰<//i>منو<//a><//nav>
.radikalwp-nv-tabbar {
  display: flex;
  width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 8px 6px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
.radikalwp-nv-tabbar a {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  font-size: 10.5px;
  color: #94a3b8;
  text-decoration: none;
  border-radius: 13px;
  transition: color .22s ease;
}
.radikalwp-nv-tabbar a i { font-style: normal; font-size: 17px; line-height: 1; }
.radikalwp-nv-tabbar-on { color: #4f46e5 !important; }
.radikalwp-nv-tabbar-on::before {
  content: '';
  position: absolute;
  top: -8px;
  width: 22px;
  height: 3.5px;
  background: #4f46e5;
  border-radius: 999px;
}
.radikalwp-nv-tabbar em {
  position: absolute;
  top: 2px;
  left: 22%;
  padding: 1.5px 6px;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
}

درباره این اسنیپت

نوار پایین اپ موبایل با ۴ آیکون و بج قرمز؛ آیکون فعال بالایش نشانگر می‌گیرد. برای قالب‌های PWA و دموهای اپلیکیشن ضروری است. این بلوک ناوبری ساختار مسیریابی صفحه را می‌سازد و در دسکتاپ و موبایل پاسخ‌گو است. این المان در ویجت HTML المنتور، فایل قالب استاتیک یا هر پروژه PHP و HTML دیگری بدون تغییر کار می‌کند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دست‌نخورده می‌ماند.

پرسش‌های متداول

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

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

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

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

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

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

کپچا

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

شاید بپسندی

تب‌بار پایین موبایل

ناوبری موبایل تب‌بار
۳۲
۴.۶ (۵)

نوار ناوبری قرصی شیشه‌ای

ناوبری شیشه‌ای قرص
۱۰۰
۴.۲ (۱۶)
پیش‌نمایش زنده اسنیپت

تب‌بار با خط لغزان

ناوبری تب خط فعال
۱۰۰
۴.۲ (۱۶)