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

یاد بگیرید که چگونه از CSS و JavaScript برای ایجاد ناوبری بالایی پاسخگو استفاده کنید.

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

ابتدا - اضافه کردن HTML:

<!-- بارگذاری کتابخانه نمادها برای نمایش منوهای هامبرگر در صفحه‌های کوچک -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

لینک‌هایی با کلاس "icon" برای باز و بسته کردن ناوبری در صفحه‌های کوچک استفاده می‌شوند.

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

/* اضافه کردن رنگ پس‌زمینه سیاه به ناوبری بالایی */
.topnav {
  رنگ پس‌زمینه: #333;
  تعدیل: مخفی;
}
/* تنظیمات استایل برای لینک‌های ناوبری در ناوبری */
.topnav a {
  فلوت: چپ;
  display: block;
  رنگ: #f2f2f2;
  متن-ترازبندی: مرکزی;
  پادینگ: 14پیکسلس 16پیکسلس;
  text-decoration: none;
  font-size: 17px;
}
/* موس پر کلک کے لئے لنک کا رنگ تبدیل کیا جاتا ہے */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* موجودہ پیج کا بولی کا رنگ اشارہ کیلئے کلاس شامل کی جاتی ہے */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
/* چھوٹی اسکرین پر بند اور کھولنے کے لئے استعمال ہونے والے لنک کو پوشیدار کیا جاتا ہے */
.topnav .icon {
  display: none;
}

میڈیا کوئریز کو شامل کریں:

/* جب اسکرین کی چوڑائی کم از کم 600 پیکسل سے کم ہوتی ہے تو پہلے لنک ("Home") کے علاوہ تمام لنکات کو پوشیدار کیا جاتا ہے۔ یہ لنکات اس پر دکھاتا ہیں کہ وہ بھیجیں اور بند کریں (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* جب یوزر آئکون پر کلک کیا جاتا ہے تو جاوااسکریپٹ topnav پر "responsive" کلاس کو شامل کرتا ہے۔ یہ کلاس topnav کو چھوٹی اسکرین پر بہتر بناتا ہے (لنک کو عمودی طور پر نہ کہ افقی طور پر دکھاتا ہے) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

تیسرا مرحلہ - جاوااسکریپٹ کو شامل کریں:

/* جبے کی وضاحت کے لئے، یہاں پر topnav پر "responsive" کلاس کو اضافہ یا حذف کیا جاتا ہے */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  }
    x.className = "topnav";
  }
}

خود کا ایک مثال

مربوط پیج

تدریس:CSS ناویگیشن بار