چگونه ایجاد کنید: منو ناوبری با آیکون

آموزش نحوه استفاده از CSS برای ایجاد منو ناوبری پاسخگو با آیکون.

ایجاد منو ناوبری پاسخگو با آیکون

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

<!-- لواد لیبرای آیکون -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> ہوم</a>
  <a href="#"><i class="fa fa-fw fa-search"></i> تلاش</a>
  <a href="#"><i class="fa fa-fw fa-envelope"></i> رابطہ</a>
  <a href="#"><i class="fa fa-fw fa-user"></i> لگن</a>
</div>

دوسرا قدم - سی ایس ایس اضافہ کریں:

/* ناٹو بار کا انداز سیٹ کریں */
.navbar {
  وائڈت: 100%;
  بگاوی کالر: #555;
  اوفر فلو: آٹو;
}
/* ناٹو بار لنک کا انداز */
.navbar a {
  فلوت: لیفت;
  تکس آلائن: سنتر;
  پیدائش: 12 پائین;
  کالر: وائٹ;
  تکس ڈی�رکشن: نہیں;
  فونٹ سائز: 17 پائین;
}
/* موس کا تلاش کی جب لنک کا انداز ناٹو بار */
.navbar a:hover {
  بگاوی کالر: #000;
}
/* موجود یا سرگرم ناٹو بار لنک */
.active {
  بگاوی کالر: #04AA6D;
}
/* ریسپانسیوٹی اضافہ کریں - کم از کم 500 پیکسل کی سائز کے اسکرین پر ناٹو بار کو افقی طور پر نہیں بلکہ عمودی طور پر خودکار طور پر دکھائیں */
@میڈیا اسکرین اور (مکس-وائڈ: 500پیکسل) {
  .navbar a {
    فلوت: نہیں;
    دسپلے: بلوک;
  }
}

آپ خود سجیئے

متعلقہ پیج

تعلیمات:CSS ناویگیشن بار

تعلیمات:کیس میں کیس: آئیکن ناویگیشن بار کی تیاری