كيفية إنشاء: وحدة التنقل السفلية

الصفحة السابقة قائمة سقوط متتابعة
الصفحة التالية قائمة سقوط في جانب التوجيه

تعلم كيفية إنشاء وحدة التنقل السفلية.

قائمة التنقل السفلية في وحدة التنقل

إنشاء وحدة التنقل السفلية

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

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