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

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

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

 

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

 

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

 

لقد استخدمت خاصية CSS media لجعل شريط التنقل هذا مستجيبًا لأي أجهزة - الأجهزة المحمولة وعلامات التبويب والكمبيوتر الشخصي. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (تصميم مستجيب Navbar).

 

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

 

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

 

شريط قائمة التنقل سريع الاستجابة

لإنشاء هذا البرنامج (شريط قائمة التنقل المتجاوب أو شريط التنقل). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow