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

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

 

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

 

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

 

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

 

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

 

 

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

 

شريط تنقل مثبت متجاوب

لإنشاء هذا البرنامج (Sticky Navigation Bar). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفك. أولاً ، قم بإنشاء ملف HTML باسم index.html والصق الرموز المحددة في ملف HTML الخاص بك. تذكر أنه يجب عليك إنشاء ملف بامتداد .html.