اليوم، بناءً على طلب أصدقائي، سأكتب برنامجًا تعليميًا بسيطًا حول تأثير القائمة المنزلقة على موقع الويب الخاص بي؛ في قسم البرمجيات بجامعة نيوجيانغ، هناك تأثير على انزلاق الطبقة، ويبدو أن الإعلانات الموجودة على Itnow أيضًا استخدم هذا التأثير عندما لا يكون مخفيًا، عند النقر فوق طبقة الزر، سينزلق للخارج ببطء، مما يوفر مساحة محدودة للصفحة ويحقق تأثيرًا مرئيًا يُحسد عليه، وهو أمر جيد جدًا. يمكنك النقر هنا لعرض هذا التأثير.
دعونا نبدأ العمل ونتوقف عن الحديث عن الهراء. الاستعدادات هي كما يلي:
1. قم بإنشاء مستند فارغ جديد في dw (أو افتح الصفحة التي تريد إضافة تأثيرات إليها).
2. قم بتعيين نمط CSS الخاص بك.
3. قم بإدراج جدول طويل بحجم 500 بكسل على الصفحة (لاحظ هنا: الغرض من إدراج الجدول هو الحفاظ على الموضع النسبي لطبقة التحكم دون تغيير عند دقة مختلفة. إذا لم تقم صفحتك بإجراء الإعدادات ذات الصلة من قبل، فقد يتعين عليك القيام بذلك اقض بعض الوقت في تنظيم بنية صفحتك).
4. ضع المؤشر في الجدول، وانقر فوق القائمة [إدراج - طبقة] لإدراج طبقة بطول 500 وارتفاع 20، وتسميتها بطبقة 1.
5. ثم ضع المؤشر في طبقة الطبقة 1، وانقر فوق القائمة [إدراج - طبقة] وأدخل طبقة طبقة 2 بطول 500 وارتفاع 130؛ واضبط الهامش الأيسر والهامش العلوي لخصائص الطبقة 2 على 0، وحددها إنه لون الخلفية الذي تفضله.
6. ثم كرر الطريقة في الخطوة 5 وأدخل طبقة Layer3. هذه الطبقة ليس لها استخدام خاص في البرنامج التعليمي الخاص بي، أريد فقط وضع بعض الأزرار. وفي النهاية أصبح حالي كالتالي:
نصائح: الغرض من القيام بذلك هنا هو إضافة حاجز أمام الطبقة التي تريد تحريكها فقط عند النقر فوقها، ستنزلق الطبقة ببطء من أسفل طبقتك.
نحن الآن ندخل رسميًا في عملية إنتاج القائمة المنزلقة التي سنقوم بإنشائها اليوم.
الآن دعونا نكرر الخطوة 5 أعلاه مرة أخرى، وأدخل طبقة أخرى Layer4، وقم بتعيين خصائص الطبقة على العرض 500 والارتفاع 150، وهو بالضبط مجموع ارتفاعات الطبقة 2 والطبقة 3، واضبط الطبقة Layer4 على الصورتين الأخريين أدناه . كما هو موضح في الصورة:
ثم نضغط على العين التي أمام الطبقة 2 لإغلاقها، حتى نتمكن من رؤية الطبقة 4 التي تحتها.
في هذا الوقت، نضغط على ALT + F9 لفتح لوحة المخطط الزمني. وقد أضاف DW المخطط الزمني الافتراضي Timeline1 لنا، ثم نحدد الطبقة التي نريد تمريرها، Layer4، وانقر عليها بزر الماوس الأيمن، وحدد [Add to Timeline ] في هذا الوقت، يمكننا رؤية الطبقة Layer4 التي أنشأناها للتو في لوحة المخطط الزمني، مما يدل على أننا أضفناها بنجاح! 
ثم نضغط على الإطار الخامس عشر على المخطط الزمني ونضبط الهامش العلوي في لوحة الخصائص للطبقة 4 إلى 150. عند هذه النقطة، تكون الطبقة المنزلقة جاهزة، ويمكنك سحب المربع الأحمر على المخطط الزمني ببطء من 1 إلى 15، ويمكنك رؤية الطبقة المنزلقة تنزلق ببطء من أسفل الطبقة 2 وتخرج الطبقة 3! 
حسنًا، نحتاج الآن فقط إلى تعيين إجراء لهذه الطبقة المنزلقة 4 لتنشيطها، وانتهى ذلك :) قبل ذلك، قمت بإدراج جدول على الطبقة 3 التي أضفتها وقمت بتعيين اثنين لزر الطبقة 4.
قمنا أولاً بإعداد الإجراء لتنشيط الطبقة المنزلقة. حدد توسيع هذا الزر، وانتقل إلى لوحة Behavior، وانقر فوق
حدد [المخطط الزمني - الجدول الزمني للتشغيل] في القائمة التي تظهر، وسيظهر نموذج DW، حدد المخطط الزمني 1 في القائمة المنسدلة أعلاه.
ثم تأكد من أن الحدث يتم عند النقر في لوحة السلوك
حسنًا، هنا يمكنك معاينتها عند النقر فوق زر التوسيع، ستنزلق طبقاتك ببطء من الأعلى إلى الأسفل!
ماذا عن ذلك، يمكنك رؤيته :) دعنا نضيف إجراء إغلاق بسيط للطبقة، أي أن الطبقة ستكون مخفية بعد النقر فوق زر الإغلاق. حدد الزر إغلاق، وانتقل إلى لوحة Behavior، وانقر فوق حدد [إظهار الطبقات المخفية] في القائمة المنبثقة، وحدد الطبقة 4 في النموذج المنبثق، ثم انقر فوق الزر إخفاء أدناه لتعيينها مخفية، كما هو موضح في الشكل: 
حسنًا، لقد قمت بمعاينتها مرة أخرى ووجدت أنه بعد توسيعها، قمت بالنقر فوق لإغلاق الطبقة واختفت :) ومع ذلك، يبدو أن هناك مشكلة عندما قمت بالنقر للتوسيع مرة أخرى، يبدو أنه لم يحدث شيء، وذلك لأننا لا نزال لديك إجراء لم يتم تعيينه.
كرر الخطوة 5 الآن، وحدد زر التوسيع، وأضف الإجراء [المخطط الزمني - انتقل إلى إطار المخطط الزمني]، وحدد المخطط الزمني 1 من القائمة المنسدلة في النموذج المنبثق، وأضف 1 إلى رقم الإطار.
حسنًا، وجدت هذه المعاينة أن هذه المشكلة قد تم حلها. ولكن يبدو أننا مازلنا قد تجاهلنا مشكلة بعد النقر للإغلاق، يتم تعيين الطبقة على أنها مخفية، ثم لا يستجيب النقر للتوسيع. ما عليك سوى استخدام الطريقة القديمة وإضافة إجراء إلى زر التوسيع لحل المشكلة!
كرر الخطوة 5 وحدد [إظهار الطبقة المخفية]. على عكس الخطوة 6 الآن، نختار إظهار. بعد التأكيد، تأكد من أن الوقت الذي يتم فيه عرض الطبقة المخفية في لوحة السلوك هو عند النقر. لوحة السلوك الخاصة بالزر الموسع في هذه اللحظة هي كما هو موضح أدناه:
حسنًا، قم بالمعاينة مرة أخرى، كل شيء على ما يرام!
في هذه المرحلة، يكون التأثير كاملاً، بالطبع، يمكن لأي شخص إنشاء تأثيرات أفضل بنفسه، لكنه يظل كما هو طالما أننا نتقن استخدام الجدول الزمني وسلوكيات العمل، فكل التأثيرات هي مجرد مسألة تشغيلية:)