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

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

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

 

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

 

في هذا البرنامج (Fullscreen Overlay Navigation Menu Bar) ، في البداية ، على صفحة الويب ، لا يوجد سوى زر قائمة في الزاوية اليمنى العليا وعندما تنقر على هذا الزر ، يتدفق التدرج الخلفي من تلك الزاوية ثم يظهر روابط التنقل. هناك أيضًا رسم متحرك في الخلفية عند التمرير فوق عنصر قائمة معين. يعتمد هذا التصميم بالكامل على HTML و CSS فقط.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Fullscreen Overlay Navigation Menu Bar).

 

لقد شاهدت في الفيديو الرسوم المتحركة المتراكبة بملء الشاشة وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. كما تعلم ، لم أستخدم JavaScript في هذا البرنامج. لإنشاء زر قابل للنقر وتنشيط شاشة تراكب ملء الشاشة ، استخدمت HTML <input type = ”checkbox”> وعلامة التصنيف.

 

إذا كنت تعرف JavaScript ، فيمكنك أيضًا استخدام JavaScript في هذا البرنامج ويمكنك نقل هذا البرنامج إلى المستوى التالي باستخدام ميزات JavaScript المتقدمة.

 

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

 

تراكب ملء الشاشة ، شريط قائمة التنقل

لإنشاء هذا البرنامج (Fullscreen Overlay Navigation Menu Bar). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow