كىرگىنچى كاندىر كىرگىزىلىدىكى ناوارى كىرگىزىلىدى.

پچی پچی منو فليکسي برش‌برش
صفحه بعدی منو فليکسي در ناوگيري جانبي

كىرگىنچى كاندىر كىرگىزىلىدىكى ناوارى كىرگىنچى كىرگىزىلىدى.

ناوارىداگى كاندىر كىرگىنچى كىرگىزىلىدى.

كاندىر كىرگىنچى ناوارى كۇپچى قايتىرلاپ.

ئىشلىرتىدىكىدا، كىرگىنچى ناوارىداگى عناصرىغا كىرگىنچى كاندىر كىرگىزىلىدى.

第一步 - HTML قوشىشى:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</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>
</div>

مثال توضیح:

كاندىر كۇپچىنى ئىچىرىپ كىرگىزىلىدى، مىسالان <button>،<a> ياكى <p> عناصرىنى.

كاندىر كۇپچىنى <div> عناصرىنىگا قايتىرلاپ، كاندىر كۇپچى لىنكىلارىنى قوشىلىدى.

بوتون وە تىكىلما كۇپچىنى بىر <div> عناصرىنىگا تاقدىرلاپ، كەسىبيلىك كىرگىزىپ، كەسىبىلىك تەڭشىركىنى تەرىپ كىرگىزىپ قويلىدى.

第二步 - CSS قوشىشى:

/* ناوارىداگى كاندىر كۇپچى */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* ناوارىداگى لىنكىلار كۇپچى */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* يىغىنچى كۇپچى كاندىرى */
.dropdown {
  float: left;
  overflow: hidden;
}
/* يىغىنچى تىكىلما كۇپچى */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* بەرپایا قولپى كىلىلىك بولىدى، تەلىفونداگى يىگىنچى قايتىرماقچى بولىدى */
  margin: 0; /* موبائل پر عمودی جگہ کے لئے اہم ہے */
}
/* موس کی لاگت کے ساتھ ناٹو بار لنک کو سرخ پس منظر رنگ دیتا ہے */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* کیسٹی کا مواد (اس کے طور پر خفیہ ہوتا ہے) */
.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;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* موس کی لاگت کے ساتھ کیسٹی کا لنک کو سورما رنگ کا پس منظر رنگ دیتا ہے */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* موس کی لاگت کے ساتھ کیسٹی دکھائی دیتی ہے */
.dropdown:hover .dropdown-content {
  display: block;
}

خود خود کوشاں

مثال توضیح:

ہم نے ناٹو بار اور ناٹو بار لنک کے لئے پس منظر رنگ، پیدائشی کا مارگ اور دیگر استایلز کو سیٹ کیا ہے۔

ہم نے ناٹو بار بٹن کے لئے پس منظر رنگ، پیدائشی کا مارگ اور دیگر استایلز کو سیٹ کیا ہے۔

.dropdown کلاس یہ ہے .dropdown-content کا کنٹینر۔ کیونکہ یہ <div> عناصر ہیں، نہ کہ <a> عناصر، لہذا ہمیں اس کو فلوٹ کرنا پڑتا ہے تاکہ یہ لنک کے ساتھ قائم رہ جائے۔

.dropdown-content کلاس کو حقیقی کیسٹی کا حامل بناتی ہے۔ یہ اصل میں خفیہ ہے، موس کی لاگت کے ساتھ دکھائی دیتی ہے (درج ذیل دیکھیے)۔ نوٹ، کمترین وسیعتی 160px رکھی گئی ہے۔ آپ کسی وقت یہ سیٹنگ بدل سکتے ہیں۔

بجائے فریم، box-shadow کی اپریٹ، کیسٹی کو ایک کیسٹی کی طرح دیکھائی دیتا ہے۔ ہم نے z-index کیسٹی کو دوسرے عناصر کے آگے رکھنا۔

:hover شیکلر، یہ کیسٹوں کو کیسٹی میں موس کا پتھر کیسٹی میں دکھاتا ہے جب کاربر موس کو کیسٹی کا بٹن پر لا دیتا ہے۔