كيفية إنشاء قائمة لاصقة موسعة على Hover مع Divi

كل أسبوع ، نقدم لك حزم تخطيط Divi جديدة ومجانية يمكنك استخدامها لمشروعك التالي. بالنسبة لإحدى حزم التخطيط ، نشارك أيضًا حالة استخدام ستساعدك في نقل موقع الويب الخاص بك إلى المستوى التالي.

هذا الأسبوع ، كجزء من مبادرة تصميم Divi المستمرة الخاصة بنا ، سوف نوضح لك كيفية إنشاء قائمة لزجة موسعة عند التمرير باستخدام Divi's Mechanic Layout Pack. سنتعامل مع مثالين مختلفين للتصميم يمكنك إعادة إنشائهما من البداية وتطبيقهما على أي نوع من مواقع الويب التي تقوم بإنشائها! سيتم عرض القائمة عند التمرير فوق أحجام شاشات سطح المكتب ويتم تنشيطها عند النقر فوق أجهزة الجوّال.

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

خطوات عامة

تعطيل الملاحة الثابتة

انتقل إلى خيارات موضوع Divi

سنبدأ ببعض الخطوات العامة. هذه الخطوات هي نفسها لكلا المثالين وهي ضرورية لتحقيق النتيجة المرجوة.

إذا كنت تخطط لاستخدام قائمة ثابتة موسعة في الجزء السفلي من صفحتك ، فقد ترغب في ترك شريط القائمة الأساسي في الجزء العلوي. للقيام بذلك ، ستحتاج إلى الانتقال إلى خيارات سمة Divi.

تعطيل الملاحة الثابتة

هناك ، ستحتاج إلى تعطيل خيار شريط التنقل الثابت للتأكد من عدم وجود مساحة في الجزء العلوي من صفحتك.

• شريط التنقل الثابت: معطل

إخفاء شريط القوائم الأساسي في الصفحة

افتح إعدادات الصفحة

انتقل إلى الصفحة التي تريد إضافة القائمة اللاصقة الموسعة إليها وافتح إعدادات الصفحة.

أضف CSS مخصص

قم بإخفاء القائمة الأساسية عن طريق إضافة الأسطر التالية من كود CSS إلى صفحتك.

#main-header {
display: none;
}

إضافة قسم جديد إلى نهاية الصفحة

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

تباعد

افتح إعدادات القسم وقم بإزالة كل المساحة المتروكة العلوية والسفلية المخصصة.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واسمح للصف باحتلال عرض الشاشة بالكامل.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

العنصر الرئيسي

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

bottom: 0px;
position: fixed;

فهرس Z.

وسنتأكد من بقاء الصف (والوحدة النمطية للنص التي نضيفها في الخطوات القادمة) أعلى محتوى الصفحة بالكامل عن طريق زيادة فهرس Z في إعدادات الرؤية للصف.

• الفهرس Z: 99

أضف وحدة التعليمات البرمجية إلى العمود

أضف كود CSS بين علامات الأنماط

الجزء الأخير من الخطوات العامة هو إضافة Code Module إلى الصف الجديد. سيساعدنا كود CSS الذي نضيفه داخل وحدة التعليمات البرمجية هذه في تحقيق التأثير الكاشف عند التمرير. الصق الأسطر التالية من كود CSS داخل الوحدة النمطية:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

أعد إنشاء المثال رقم 1

أضف وحدة نصية إلى العمود

إضافة محتوى

الآن بعد أن مررنا بجميع الخطوات ، يمكننا البدء في التركيز على مثالين مختلفين للتصميم ، بدءًا من المثال الأول! أضف وحدة نصية إلى عمود صفك. في مربع المحتوى ، نستخدم نمط الفقرة لإظهار نسخة "القائمة". نحن ، إذن ، نضع جميع عناصر القائمة في قائمة غير مرتبة. سنضيف أيضًا ارتباطًا لكل عنوان صفحة على حدة.

لون الخلفية الافتراضي

انتقل إلى إعدادات الخلفية للوحدة وتغيير لون الخلفية.

• لون الخلفية: #ffffff

لون الخلفية تحوم

قم بتعديل لون الخلفية هذا عند التمرير.

• لون الخلفية: rgba (255،255،255،0.83)

خلفية متدرجة

وأضف خلفية متدرجة افتراضية أيضًا.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• موضع النهاية: 60٪

الإعدادات الافتراضية للنص

تابع بالانتقال إلى علامة تبويب التصميم وتعديل إعدادات النص.

• خط النص: Khand
• وزن خط النص: غامق
• لون النص: # 021827
• حجم النص: 3vh
• اتجاه النص: الوسط

تحوم إعدادات النص

قم بتعديل بعض إعدادات النص عند التمرير.

• لون النص: rgba (255،255،255،0)
• حجم النص: 0vh

إعدادات نص الارتباط

بعد ذلك ، انتقل إلى إعدادات نص الارتباط وقم بتغيير لون نص الارتباط.

• لون نص الرابط: # 000000

الإعدادات الافتراضية لنص القائمة

انتقل إلى إعدادات نص القائمة الافتراضية وقم بنمطها بالشكل الذي تريده. تأكد من أنك تستخدم "0 بكسل" لحجم النص في حالته الافتراضية.

• خط قائمة غير مرتبة: Khand
• نمط خط قائمة غير مرتبة: أحرف كبيرة
• محاذاة نص القائمة غير المرتبة: الوسط
• لون نص القائمة غير المرتبة: rgba (255،255،255،0)
• حجم نص القائمة غير المرتبة: 0 بكسل
• ارتفاع سطر القائمة غير المرتبة: 0em
• وضع نمط قائمة غير مرتبة: في الداخل

تحوم إعدادات نص القائمة

بعد ذلك ، قم بتعديل بعض القيم عند التمرير للسماح بظهور عناصر القائمة.

• لون نص القائمة غير المرتبة: # 000000
• حجم نص القائمة غير المرتبة: 2vh
• ارتفاع الخط غير المرتب: 2.1em

التباعد الافتراضي

انتقل إلى إعدادات التباعد بعد ذلك وأعطِ وحدة النص شكلاً.

• الهامش الأيسر: 45vw (سطح المكتب) ، 39vw (كمبيوتر لوحي) ، 33vw (هاتف)
• الهامش الأيمن: 45vw (سطح المكتب) ، 39vw (كمبيوتر لوحي) ، 33vw (هاتف)
• الحشوة العلوية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)
• الحشوة السفلية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)

تحوم التباعد

قم بتعديل هذه القيم نفسها عند التمرير.

• الهامش الأيسر: 14vw
• الهامش الأيمن: 14vw
• الحشو العلوي: 8vw
• الحشو السفلي: 8vw

الحد الافتراضي

انتقل إلى إعدادات الحدود وتأكد من أن كل زاوية من الزوايا الدائرية لها قيمة "0 بكسل".

تحوم الحدود

قم بتمكين خيارات التمرير في الزوايا الدائرية وقم بتغيير القيم العلوية اليمنى واليسرى.

• أعلى اليسار: 50vw
• أعلى اليمين: 50vw

مربع الظل

استمر بإعطاء الوحدة بعض العمق باستخدام ظل الصندوق. سيؤدي هذا إلى التأكد من عدم مرور القائمة دون أن يلاحظها أحد على الصفحة.

• قوة Box Shadow Blur: 1000 مللي ثانية
• لون الظل: rgba (0،0،0،0.68)

فئة CSS

نحن نضيف فئة CSS إلى الوحدة أيضًا.

• فئة CSS: قائمة dt

الانتقالات

أخيرًا وليس آخرًا ، قم بتقليل مدة الانتقال في إعدادات الانتقالات.

• مدة الانتقال: 100 مللي ثانية

أعد إنشاء المثال رقم 2

أضف وحدة نصية إلى العمود

إضافة محتوى

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

لون الخلفية الافتراضي

انتقل إلى إعدادات الخلفية وقم بتغيير لون الخلفية.

• لون الخلفية: #ffffff

لون الخلفية تحوم

قم بتعديل لون الخلفية عند التمرير.

• لون الخلفية: # f71535

الإعدادات الافتراضية للنص

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بإجراء بعض التغييرات على مظهر نسخة الفقرة.

• خط النص: Khand
• لون النص: # 021827
• حجم النص: 3vh

تحوم إعدادات النص

قم بتعديل هذه الإعدادات عند التمرير.

• لون النص: rgba (255،255،255،0)
• حجم النص: 0vh

إعدادات نص الارتباط

انتقل إلى إعدادات النص وقم بتغيير لون نص الارتباط.

• لون نص الرابط: #ffffff

الإعدادات الافتراضية لنص القائمة

قم بتغيير إعدادات التصميم لعناصر القائمة غير المرتبة أيضًا.

• خط قائمة غير مرتبة: Khand
• نمط خط قائمة غير مرتبة: أحرف كبيرة
• محاذاة نص القائمة غير المرتبة: الوسط
• لون نص القائمة غير المرتبة: rgba (255،255،255،0)
• حجم نص القائمة غير المرتبة: 0 بكسل
• ارتفاع سطر القائمة غير المرتبة: 0em
• وضع نمط قائمة غير مرتبة: في الداخل

تحوم إعدادات نص القائمة

وتعديل بعض هذه القيم عند المرور فوقها.

• لون نص القائمة غير المرتبة: #ffffff
• حجم نص القائمة غير المرتبة: 2vh
• ارتفاع سطر القائمة غير المرتبة: 2.1em

التباعد الافتراضي

بعد ذلك ، انتقل إلى إعدادات التباعد وامنح الوحدة بعض المساحة.

• الهامش الأيمن: 88vw (سطح المكتب والكمبيوتر اللوحي) ، 71vw (الهاتف)
• الحشوة العلوية: 6vw (سطح المكتب) ، 10vw (كمبيوتر لوحي) ، 18vw (هاتف)
• الحشوة السفلية: 4vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 12vw (الهاتف)
• الحشوة اليسرى: 1vw

تحوم التباعد

قم بتعديل القيم عند التمرير.

• الهامش الأيمن: 59vw
• الحشوة العلوية: 13vw
• الحشو السفلي: 8vw
• الحشوة اليسرى: 1vw
• الحشوة اليمنى: 13vw

الحدود

ولإنشاء تصميم ربع دائرة هذا ، سنقوم بتغيير الحد العلوي الأيمن في إعدادات الحدود.

• أعلى اليمين: 50vw

مربع الظل

سنقوم أيضًا بإضافة ظل مربع لإنشاء عمق على الصفحة.

• مربع قوة طمس الظل: 1000 بكسل
• لون الظل: rgba (0،0،0،0.68)

فئة CSS

بعد ذلك ، سنضيف فئة CSS في علامة التبويب المتقدمة.

• فئة CSS: قائمة dt

الانتقالات

وقم بتقليل مدة الانتقال في علامة التبويب "خيارات متقدمة" لإنشاء انتقال سريع.

• مدة الانتقال: 100 مللي ثانية

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية إنشاء قائمة لزجة موسعة باستخدام حزمة Divi's Mechanic Layout Pack. لقد تعاملنا مع مثالين مختلفين للتصميم يمكنك إعادة إنشائهما واستخدامهما في أي نوع من مواقع الويب التي تقوم بإنشائها! نحن نستمتع بمبادرة تصميم Divi المستمرة ، حيث نحاول وضع شيء إضافي في صندوق أدوات التصميم الخاص بك كل أسبوع. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.