القوائم الضخمة المتجاوبة متعددة المستويات مع قالب DXPR.

يبني قالب DXPR قائمته الضخمة من نظام قوائم Drupal نفسه. تنشئون البنية تحت البنية › القوائم، فيحوّلها القالب إلى قوائم منسدلة تنقسم إلى أعمدة عندما تكبر، وتتداخل ثلاثة مستويات، وتُفتح بالتحويم أو النقر، وتنطوي في قائمة همبرغر على الهواتف. لا وحدة قائمة ضخمة، ولا إعداد إضافي، والروابط نفسها تخدم سطح المكتب والجوال.

يغطي هذا الدليل قالب DXPR 8.2.1 والإصدارات الأحدث على Drupal 10.3 وDrupal 11. اللقطات من موقع Drupal 11.4 مع قالب DXPR 8.2.2 وقائمة مثال من ثلاثة مستويات، مأخوذة في أكتوبر 2026.

كيف تتصرف القائمة

• القوائم المنسدلة من المسافة البادئة. كل رابط قائمة له أبناء يصبح قائمة منسدلة. والأب الذي له صفحة خاصة يحصل على عنصر تحكم مقسّم: الرابط ينقّل، وعلامة التوسيع بجانبه تفتح القائمة المنسدلة. والأب الذي لا صفحة له يفتح القائمة المنسدلة بنقرة واحدة.
• الأعمدة من عدد الروابط. القائمة المنسدلة ذات 8 أبناء مباشرين أو أكثر تنقسم إلى عمودين، و15 أو أكثر إلى 3، و21 أو أكثر إلى 4، و28 أو أكثر إلى 5. ومن 3 أعمدة فصاعدًا، تمتد القائمة المنسدلة بعرض الترويسة الكامل، وهو تخطيط القائمة الضخمة.
• ثلاثة مستويات. يمكن لرابط داخل قائمة منسدلة أن يكون له أبناء. وهي تتوسع داخل القائمة المنسدلة، بمسافة بادئة تحت أبيها، فتعمل بنية الخدمات › البحث › المختبرات دون تسطيح.
• التحويم أو النقر. على سطح مكتب مع فأرة، تُفتح القوائم المنسدلة بالتحويم ودائمًا بالنقر. وعندما تحتوي أي قائمة منسدلة في القائمة على مستوى ثالث، تتحول كل القوائم المنسدلة إلى النقر فقط، فلا تُغلق قائمة فرعية أبدًا أثناء تحرك المؤشر نحوها. وتستخدم شاشات اللمس والنوافذ الأضيق من 992 بكسل النقر دائمًا.
• لوحة المفاتيح وقارئات الشاشة. تتنقل مفاتيح الأسهم وEnter وSpace وEscape وTab عبر القائمة، وتكشف المبدّلات عن حالتها باستخدام aria-expanded، وفق نمط التنقل الإفصاحي من WAI.
• لغات اليمين إلى اليسار تحصل على قوائم منسدلة وقوائم فرعية معكوسة.
• الهواتف والأجهزة اللوحية. تحت نقطة توقف الجوال، 1200 بكسل افتراضيًا، تعرض الترويسة أيقونة همبرغر. وهي تفتح القائمة فوق الصفحة، وعلامة التوسيع بجانب كل أب توسّع أبناءه في مكانهم، على المستوى الثاني كما على الأول.

1. إنشاء البنية

1. انتقلوا إلى البنية › القوائم › التنقل الرئيسي (/admin/structure/menu/manage/main).
2. أضيفوا الروابط التي تحتاجونها باستخدام إضافة رابط. ولأب لا صفحة خاصة به، أدخلوا <button> (زر لوحة مفاتيح أصلي) أو <nolink> كرابط؛ فكلاهما يفتح القائمة المنسدلة.
3. اسحبوا الأبناء تحت أبيهم لتكون بمسافة بادئة من مستوى واحد، والمستوى الثالث بمسافة أخرى، ثم اضغطوا حفظ.
4. حرّروا كل رابط أب، وفعّلوا العرض موسّعًا واضغطوا حفظ. ولتوسيع كل الآباء دفعة واحدة، فعّلوا توسيع كل روابط القائمة في إعدادات كتلة القائمة الرئيسية بدلًا من ذلك.

هذا هو الإعداد كله. ثلاثة مستويات هي الحد الأقصى الذي تعرضه القوائم المنسدلة؛ والروابط الأعمق مكانها الصفحة، لا القائمة.

صفحة إدارة القائمة: أبناء بمسافة بادئة تحت أبيهم، ومستوى ثالث تحت الثاني.

رابط الأب دون العرض موسّعًا يُعرض دون أبنائه، إلا على صفحته الخاصة.

2. فحص قائمة سطح المكتب

افتحوا الموقع وحوّموا فوق علامة التوسيع بجانب رابط أب، أو انقروها؛ والأب الذي لا صفحة له يُفتح أيضًا بالنقر. وعندما تحتوي القائمة على مستوى ثالث، تُفتح القوائم المنسدلة بالنقر فقط. وتُفتح القائمة القصيرة كقائمة منسدلة من عمود واحد؛ والطويلة تنتشر في أعمدة، ومن ثلاثة أعمدة فصاعدًا، بعرض الترويسة الكامل. ويتبع الترتيب وزن الروابط في صفحة إدارة القائمة، عمودًا بعمود.

قائمة الخدمات المنسدلة على سطح المكتب، مع المستوى الثالث موسّعًا داخلها.

3. فحص قائمة الجوال

ضيّقوا المتصفح تحت نقطة توقف الجوال أو افتحوا الموقع على هاتف. تفتح أيقونة الهمبرغر القائمة فوق الصفحة. المسوا علامة التوسيع بجانب الأب لتوسيع أبنائه في مكانهم، وعلامة التوسيع بجانب رابط المستوى الثاني لتوسيع المستوى الثالث. لا شيء لضبطه: إنها القائمة نفسها.

قائمة الجوال مع الخدمات موسّعة؛ وعلامة التوسيع بجانب البحث تفتح المستوى الثالث.

4. تنسيق الترويسة والقائمة

كل ما يخص المظهر يعيش في تبويب الترويسة والقائمة الرئيسية من إعدادات القالب (المظهر، ثم الإعدادات بجانب قالب DXPR أو قالبكم الفرعي). وتعرض صفحة الإعدادات معاينة حية أثناء تغييرها.

• التخطيط: سبعة تخطيطات للترويسة، من عادي (الشعار يسارًا، القائمة يمينًا) عبر المتغيرات المكدسة والمضمنة الموسطة إلى الشعار يمينًا، القائمة يسارًا.
• نمط الترويسة: عادي، أو متراكب لوضع الترويسة فوق محتوى الصفحة بخلفية شفافة، إضافة إلى شفافية الترويسة وارتفاعها وارتفاع الشعار. يُبقي الموضع الثابت الترويسة ظاهرة أثناء التمرير؛ ومع تفعيله، تُبدّل الترويسة اللاصقة الترويسة إلى ارتفاع أصغر وشفافية خاصة بعد إزاحة التمرير.
• روابط القائمة الرئيسية: عرض القائمة المنسدلة (تلقائي، أو عرض ثابت من 100 إلى 500 بكسل)، ونمط الخط (عادي أو أحرف كبيرة أو غامق أو نص بارز)، وتباعد الروابط، ونمط التحويم من الشفافية أو الخلفية الملونة أو النص الملون أو الحد (علوي أو سفلي، ينزلق من اليسار أو اليمين أو الوسط أو يتلاشى من الأعلى).
• ترويسة الجوال وخيارات قائمة الجوال: نقطة توقف الجوال (اضبطوها على الحد الأقصى، 4100، لاستخدام ترويسة الجوال دائمًا)، وارتفاع ترويسة الجوال وموضعها، وأيقونة الهمبرغر (ثلاثة أسطر أو سطران)، وحركتها ومحاذاة القائمة.
• ألوان الترويسة المخصصة: ستة عشر خيارًا لونيًا، للخلفية والنص لشريط التنقل وكتل الترويسة والقائمة والقوائم المنسدلة وقائمة الجوال، إضافة إلى خلفية التحويم ونصها للثلاثة الأخيرة، كل منها يُختار من لوحة القالب أو يُضبط على قيمة مخصصة.

كل تغيير هو إعداد، لا CSS، فيصمد أمام تحديثات القالب. وللقالب الفرعي إعداداته الخاصة، فأجروا هذه التغييرات على صفحة إعدادات القالب الفرعي.

قادمون من The Better Mega Menu أو وحدة قوائم أخرى

أزيلوا تثبيت الوحدة وضعوا كتلة التنقل الرئيسي الأساسية في منطقة التنقل (القابل للطي) في القالب إذا لم تكن هناك بعد؛ فتلك المنطقة هي التي تنطوي فيها قائمة الهمبرغر على الشاشات الصغيرة. كل ما كانت تفعله الوحدة بالإعدادات، يفعله قالب DXPR من بنية القائمة: الأعمدة والمستويات والتحويم وقائمة الجوال. وما لا ينتقل هو المحتوى داخل القائمة المنسدلة، مثل الصور أو الكتل النصية؛ فضعوه على صفحات الهبوط التي تربط بها القائمة.

دعوا وكيل الذكاء الاصطناعي يبني القائمة

القائمة هي قائمة روابط ذات تسلسل هرمي، وهي نوع المهام المنظمة التي يجيدها وكيل الترميز. ومع تثبيت مهارة Drush Webmaster (drush wm:setup-ai)، ينشئ وكيلكم روابط القائمة ويرتبها من موجز، مثل «قائمة خدمات مع البحث والتدريس والمرافق، وثلاثة مختبرات تحت البحث». ومع مهارة قالب DXPR (drush dxt:setup-ai) يضبط أيضًا تخطيط الترويسة والسلوك اللاصق وألوان القائمة لتطابق العلامة. وتراجعون النتيجة على الموقع.