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

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

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

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

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

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

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

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

شريط قائمة التنقل الأدنى
كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج (Minimal Navigation Menu Bar). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، أنشأت <div> باسم الفئة "menu-container" ووضعت جميع العلامات الأخرى بداخله. ثم أنشأت <div> آخر للزر وداخل هذه العلامة ، قمت بإنشاء <span> لإظهار رمز القائمة.

بعد ذلك ، قمت بإنشاء علامة <ul> ووضعت خمس علامات <li> بداخلها. داخل كل <li> علامة قمت بإنشاء <a> علامة ارتساء. هذا برنامج يستند إلى <ul> <li> ولهذا يمكننا إنشاء قائمة قوائم بسهولة.

في ملف CSS ، باستخدام * المحدد أولاً ، قمت بإعادة تعيين الهوامش الافتراضية والحشو إلى 0 ؛ ثم وضعت جميع العناصر في الوسط أفقيًا باستخدام خاصية المرن وأعطيت عرض الارتفاع لحاوية القائمة. بعد ذلك ، قمت بإنشاء زر قائمة لإظهار أو إخفاء قوائم القائمة. ثم قمت بعمل تصميم أساسي لـ <ul> <li> و <a> علامات مثل أعطيت ألوانًا وحشوات هوامش وطولًا وعرضًا لهذه العلامات. لقد قمت بإنشاء تأثير تحوم في كل قائمة قائمة. أخيرًا ، تم تصميم جميع العلامات التي قمت بعرضها على <ul> لإخفاء عناصر القائمة هذه.

في ملف jQuery ، قمت أولاً بإنشاء وظيفة النقر. ثم قمت بإنشاء بيان if / else داخل هذه الوظيفة. داخل عبارة if ، كتبت شرطًا إذا كان الزر يحتوي على "class ، ثم حرك عناصر القائمة لأعلى وقم بتشغيل عبارة else. عبارة Inside else كتبت إذا لم يكن الزر يحتوي على فئة "توسيع" ثم أضف هذه الفئة إلى الزر. وقم بتشغيل وظيفة setTimeout. داخل هذه الوظيفة ، أقوم بتمرير عناصر القائمة لأسفل.

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow