چگونه ایجاد شود: منوی بالا

یادگیری نحوه ایجاد منوی بالا با استفاده از CSS.

منوی بالا قابل نوسان ایجاد کنید

یک منوی بالا ایجاد کنید که وقتی کاربر موس را روی عنصر حرکت می‌دهد، منوی نمایش داده شود.

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

<div class="dropup">
  <button class="dropbtn">نزولی</button>
  <div class="dropup-content">
    <a href="#">لینک 1</a>
    <a href="#">لینک 2</a>
    <a href="#">لینک 3</a>
  </div>
</div>

مثال کی تفسیر:

می‌توان از هر عنصری برای باز کردن منوی بالا استفاده کرد، به عنوان مثال، عنصر <button>، <a> یا <p>.

از عنصر مستند‌بندی (مانند <div>) برای ایجاد منوی بالا استفاده کنید و به آن لینک‌های بالا اضافه کنید.

از عنصر <div> برای بسته‌بندی دکمه و <div> استفاده کنید، تا منوی بالا به درستی با استفاده از CSS موقعیت‌دهی شود.

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

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

کامنوک کا تجربہ کریجئے

مثال کی تفسیر:

آپ کو سائیڈ بٹن کی پس منظر رنگ، پیدائشی فاصلہ وغیرہ کی شکل دیجئے.

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

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

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

:hover اختیار دینا، یہ سلیکٹر یہاں سے نمائش کی جاتی ہے جب یوزر ماؤس کو اپ سائیڈ بٹن پر رکھتا ہے