چگونه ایجاد شود: ناوبری بالای صفحه

آموزش نحوه استفاده از CSS برای ایجاد ناوبری بالای صفحه.

ایجاد ناوبری بالای صفحه

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

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

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

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

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

صفحات مرتبط

آموزش‌ها:چگونه ناوبری بالای صفحه پاسخ‌گو ایجاد کنیم

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