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

آموزش ایجاد ناوبری بالایی پاسخگو با منو بازشو.

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

کامپوزیشن اول - HTML اضافه کنید:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

دوسرا مرحلہ - سی ایس ایس جوڑنا:

/* اوپر سے ناٹو ناٹو کو کالر سیا جوڑنا ہے */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* اوپر سے ناٹو ناٹو کا لنک کا استایل سیٹ کرنا ہے */
.topnav a {
  float: left;
  display: block;
  رنگ: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* آج کی پیدگائی کی کلاس جوڑنا ہے تاکہ موجودہ پیج پر واضح پائی جاسکے */
.active {
  background-color: #04AA6D;
  رنگ: کالر وائٹ;
}
/* چھوٹی سکرین پر، اوپر سے ناٹو ناٹو کا کسی وقت میں کھسکنے والا لنک پوشیدگی کرسکے */
.topnav .icon {
  display: none;
}
/* ریلیز کا منٹر - ریلیز کے اندرولن کے مواد کو نمائش کرنا */
.dropdown {
  float: left;
  overflow: hidden;
}
/* ریلیز کا بٹن کا استایل سیٹ کرنا ہے تاکہ وہ اوپر سے ناٹو ناٹو کی ناٹو ناٹو کے ساتھ تال میل کرسکے */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  رنگ: کالر وائٹ;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/* ریلیز کے اندرولن کے مواد کا استایل سیٹ کرنا ہے (اس کا ابتدائی حالت پوشیدگی ہے) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ریلیز کے اندرولن کا لنک کا استایل سیٹ کرنا ہے */
.dropdown-content a {
  float: none;
  رنگ: کالر سیاه;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* جب موس پر کھسکنے کے وقت، اوپر سے ناٹو ناٹو کا لنک اور ریلیز کا بٹن کو تاریک پس منظر جوڑنا ہے */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  رنگ: کالر وائٹ;
}
/* جبہ کسی وقت میں موس پر کھسکنے کے لئے، ریلیز کے لنکات کو خاکستری پس منظر جوڑنا ہے */
.dropdown-content a:hover {
  background-color: #ddd;
  رنگ: کالر سیاه;
}
/* جب یوزر پینگل پر لینک پر موس کو ڈراپ دونگل بٹن پر موس کیا جاتا ہے تو، ڈراپ دونگل نمائش کی جاتی ہے */
.dropdown:hover .dropdown-content {
  display: block;
}
/* جب اسکرین کی چوڑائی 600 پیکسل سے کم ہوتی ہے تو، پہلے لنک (" ہوم ") کے باقی تمام لنکز کو پوشیدار کیا جاتا ہے. لنک کا نمائش کیا جاتا ہے کہ اعلیٰ ناویگیشن بار کو کھولنا اور بندنا ہو ( .icon ) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* جب یوزر آئیکن پر کلک کرتا ہے تو، جاوا اسکریپٹ اعلیٰ ناویگیشن بار میں "responsive" کلاس اضافہ کرتا ہے. یہ کلاس اعلیٰ ناویگیشن بار کو چھوٹی اسکرین پر بہتر بناتا ہے (لینکز کا افقی نمائش بجائے عمودی نمائش) */
@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 .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

تیسرا قدم - جاوا اسکریپٹ اضافہ کریئن:

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

خود کا تجربہ کریئن

مربوط صفحات

تدریب:منو كشيده CSS

تدریب:کہاں سے کلیک کرسکتا ہو انڈر لینک

تدریب:نوار كاواي CSS

تدریب:کہاں سے بائیں سائیڈ ناویگیشن بار بناسکتا ہو