کیوں بنائیں؟ قابل کلیک درج منو

CSS اور JavaScript کا استعمال سے قابل کلیک درج منو بنانے سیکس میں سیکس

ایک کلیک کئے جانے والا درج منو بنائیں

ایک آسانی سے کلیک کئے جانے والا درج منو بنائیں جو کہ کسی بٹن پر کلیک کئے جانے پر نمودار ہو

پہلے قدم - اچی کا اضافہ:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">لنک 1</a>
    <a href="#">لنک 2</a>
    <a href="#">لنک 3</a>
  </div>
</div>

مثال توضیح:

ڈاؤنڈر منو کا کسی بھی عنصر کا استعمال کیا جاسکتا ہے، مثلاً <button>، <a> یا <p> عنصر۔

استعمال کانٹینر عناصر (مثلاً <div>) کے ذریعے ڈاؤنڈر منو بنائیں، اور اس میں ڈاؤنڈر منو لنکات شامل کریں。

استعمال <div> عناصر کو بٹن اور <div> کے گرد پکڑیں، تاکہ سی ایس ایس سے ڈاؤنڈر منو کو صحیح طور پر پوزیشن کیا جاسکے。

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

/* ڈاؤنڈر بٹن */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* موس کی سکونت اور تمرکز کے دوران ڈاؤنڈر منو کا بٹن */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* کانٹینر <div> - ڈاؤنڈر منو کا محتوا کو پوزیشن کا تعین کرنے کیلئے عناصر کا استعمال کیا گیا ہے */
.dropdown {
  position: relative;
  display: inline-block;
}
/* ڈاؤنڈر منو کا محتوا (مقصد سے پوشیدہ) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ڈاؤنڈر منو کے اندر کا لنک */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* موس کی سکونت کے دوران ڈاؤنڈر منو کا لنک کا رنگ بدل دینا ہے */
.dropdown-content a:hover {background-color: #ddd;}
/* ڈاؤن میون کو نمودار کریں (جب کاربر ڈاؤن میون کلک پر کلک کریں تو اس کلاس کو .dropdown-content کے کنٹینر میں جاوا اسکریپٹ کے ذریعے شامل کریں) */
.show {display:block;}

مثال توضیح:

ہم نے ڈاؤن میون کلک کے رنگ، فاصلے، موس کی چکر کا اثر وغیرہ کی طرح استایلز نصب کی ہیں۔

.dropdown کلاس استعمال کریں position:relative، جب ہم چاہتے ہیں کہ ڈاؤن میون کی محتوائی کو ڈاؤن میون کلک کے نیچے رکھیں (استعمال کریں) position:absolute)، یہ ضروری ہے۔

.dropdown-content کلاس حقیقی ڈاؤن میون کا حامل ہوتی ہے۔ وہ اصل میں پوشیدہ ہوتی ہے اور موس کی چکر کے ساتھ نمودار ہوتی ہے (درج ذیل دیکھیں)۔ اشارہ: کمترین پیمائش 160px ہے، جس کو کسی ضرورت کے مطابق بدل سکتے ہیں۔ تذکرہ: اگر آپ چاہتے ہیں کہ ڈاؤن میون کی محتوائی کی پیمائش ڈاؤن میون کلک کے پیمائش کی طرح ہو، تو پیمائش 100% رکھیں (اور چھوٹی اسکرین پر استعمال کریں) overflow:auto کا استعمال کیا ہے تاکہ اس کا اسکرول کیا جاسکے (استعمال کریں)۔

ما نے فریم نہیں استعمال کیا، بلکہ بکشش خصوصیت، ڈاؤن میون کو ایک 'کارڈ' کی طرح دیکھائی دیتی ہے۔ ہم نے اور ز-اگر ڈاؤن میون کو دوسرے عناصر کے پچھلے پوسٹ میں رکھیں。

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

/* جب کاربر کلک کریں تو ڈاؤن میون کی محتوائی کی پوشیدگی اور نموداری کی حالت تبدیل کریں */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// اگر کاربر ڈاؤن میون کے باہر تکلیف کریں تو ڈاؤن میون بند کر دیں
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

کمپنی کا خود سنجائش کریں

صفحات مرتبط

آموزش‌ها:منو کشيده CSS

آموزش‌ها:منو کشيده قابل تکان دادن چگونه است