قائمة / قوائم CSS متجاوبة Responsive

قائمة / قوائم CSS متجاوبة Responsive

في هذا الدرس الجديد من دروس بلوجرسنرى طريقة إضافة قوائم CSS أفقية متجاوبة لمدونات بلوجر


ما هي القوائم المتجاوبة Responsive؟

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

1 - على الحواسيب ستبدو القائمة بهذا الشكل:
قائمة متجاوبة على الحاسوب
2 - على الأجهزة ذات الشاشات الصغيرة يقوم كود جافا بإخفاء شريط القوائم الأفقية وإظهار ايقونة بجانبها كلمة قائمة كما تظهر الصورة التالية:


إخفاء القوائم على الأجهزة ذات الشاة الأخيرة
3- بعد النقر على الأيقونة أو قائمة تنسدل القائمة لتظهر العناصر المخفية التي تبدو بهذا الشكل:

إظهار القوائم


إضافة قوائم متجاوبة Responsive لمدونات بلوجر

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

.هذا الفيديو يشرح طرقة اضافة القائمة، ويمكنم ايجاد الأكواد في الأسفل:





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

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله