كيفية إنشاء: زر "المزيد" في الشريط الإرشادي

تعلم كيفية إنشاء زر "المزيد".

إنشاء شريط إرشادي منسدل

سيظهر قائمة منسدلة عند تحريك الفأرة فوق العناصر داخل الشريط الإرشادي.

الخطوة الأولى - إضافة HTML:

<div class="navbar">
  <a href="#home">المنزل</a>
  <a href="#news">أخبار</a>
  <div class="dropdown">
    <button class="dropbtn">المزيد
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">رابط 1</a>
      <a href="#">رابط 2</a>
      <a href="#">رابط 3</a>
    </div>
  </div>
</div>

شرح المثال:

استخدم أي عنصر لفتح القائمة المنسدلة، مثل عناصر <button> أو <a> أو <p>.

إنشئ قائمة منسدلة باستخدام عنصر حاوية (مثل <div>) وأضف روابط القائمة المنسدلة فيها.

استخدم عنصر <div> لتغليف الزر وآخر عنصر <div> لتحديد موقع القائمة المنسدلة بشكل صحيح باستخدام CSS.

الخطوة الثانية - إضافة 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 المحدد يستخدم لعرض القائمة المنسدلة عند تحريك الفأرة فوق زر القائمة المنسدلة.

الصفحات ذات الصلة

دليل:قائمة سقوط CSS

دليل:كيفية إنشاء قائمة منسدلة قابلة للنقر

دليل:شريط التوجيه CSS

دليل:كيفية إنشاء قائمة تعديل رداء الرأس