انتقال الظهور السلس ومؤشر السهم | القوائم المنسدلة في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

التبديل بين display: none وdisplay: block يظهر اللوحة فجأة دون انتقال ناعم، بينما يترك الاكتفاء بـ opacity: 0 الروابط المخفية قابلة للنقر خطأً فوق محتوى الصفحة! لذلك يجمع النمط الاحترافي بين opacity: 0; visibility: hidden; transform: translateY(6px); عند الإغلاق والانتقال إلى opacity: 1; visibility: visible; transform: translateY(0); عند الفتح.

وتكتمل سلاسة الاستخدام بلمستين عبر العناصر الزائفة: رسم مؤشر سهم صغير عبر .trigger::after يدور بنعومة عند الفتح، وإضافة جسر تمرير خفي عبر .submenu::before بارتفاع 10px وأعلى سالب top: -10px ليسد المسافة الفاصلة بين الزر واللوحة فلا تنغلق القائمة أثناء مرور الفأرة فوق الفجوة.

الصف 2 كود برمجي

CSS

.submenu {
  top: calc(100% + 8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.submenu::before {
  content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Smooth Dropdown Reveal and Arrow انتقال الظهور السلس ومؤشر السهم

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (القوائم المنسدلة في لغة CSS)