چگونه ایجاد شود: ناوبری پایینی

منوی ناوبری پایینی ایجاد کنید

اولین مرحله - اضافه کردن HTML:

<div class="navbar">
  <a href="#home" class="active">خانه</a>
  <a href="#news">اخبار</a>
  <a href="#contact">تماس</a>
</div>

دومین مرحله - اضافه کردن CSS:

/* ناوبری در پایین صفحه قرار می‌گیرد و ثابت است */
.navbar {
  رنگ پس‌زمینه: #333;
  ته نشین: نه;
  وضعیت: ثابت;
  پایین: 0;
  عرض: 100%;
}
/* استایل‌های لینک‌های ناوبری تنظیم شود */
.navbar a {
  حرکت: چپ;
  نمایش: بلوک;
  رنگ: #f2f2f2;
  ترازبندی متن: وسط;
  پدینگ: 14 پیکسل 16 پیکسل;
  تزئین متن: نه;
  اندازه فونت: 17 پیکسل;
}
/* رنگ لینک هنگام قرارگیری ماوس تغییر می‌کند */
.navbar a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}
/* رنگ برای لینک فعال/ماهیت فعلی اضافه شود */
.navbar a.active {
  رنگ پس‌زمینه: #04AA6D;
  رنگ: سفید;
}

آزمایش شخصی کنید

صفحات مرتبط

آموزش‌ها:نوار ابزار CSS

آموزش‌ها:چگونه ایجاد کنیم: منوی پایین پاسخگو