كيفية إنشاء قائمة الشريط الجانبي المتحركة باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء قائمة شريط جانبي متحرك أو قائمة تنقل جانبية باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء قائمة شريط جانبي متحرك أو قائمة تنقل جانبية باستخدام HTML و CSS فقط.

 

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

 

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

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج [قائمة الشريط الجانبي المتحركة].

 

لقد شاهدت في الفيديو قائمة التنقل الجانبية مع الرموز وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. كما تعلم ، هذا برنامج CSS خالص مما يعني أنني استخدمت HTML و CSS فقط لإنشاء هذا الشريط الجانبي. لذلك إذا كنت مبتدئًا ، فيمكنك بسهولة فهم رموز هذا البرنامج والقدرة على إنشاء هذا النوع من الشريط الجانبي.

 

لإنشاء زر تبديل وإظهار الشريط الجانبي أو إخفائه عند النقر فوق الزر ، فقد استخدمت HTML <input type = ”checkbox”> وتحكم في مربع الاختيار هذا بعلامة التسمية [رمز القائمة]. إذا كنت تحب هذا البرنامج [Side Navigation Menu] وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج.

 

قائمة التنقل الجانبية

لإنشاء هذا البرنامج [Side Navigation Menu]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow