يتم استخدام القائمة لتسهيل تنقل المستخدم من خلال الأقسام الموجودة في الموقع. لجذب انتباه الزائر ، يجب أن تكون القائمة عملية وسهلة الاستخدام وفي نفس الوقت يتم دمجها مع تصميم المورد بأكمله.
تعليمات
الخطوة 1
قبل إنشاء قائمة ، حدد نوعها. يمكنك إنشاء مربع أفقي أو عمودي منسدل سيظهر للمستخدم عندما يحوم فوقه مؤشر الماوس. عند اختيار قائمة معينة ، يمكنك أن تسترشد بمدى ملاءمة استخدام الزوار لها وكيف سيتم دمجها مع التصميم.
الخطوة 2
بعد اختيار نوع القائمة ، افتح ملف صفحتك باستخدام أي محرر نصوص تستخدمه لتحرير HTML. انتقل إلى القسم المطلوب من التعليمات البرمجية حيث تريد إدراج عنصر الواجهة الخاصة بك.
الخطوه 3
بعد ذلك ، قم بعمل قائمة بالخيارات عن طريق إنشاء كتلة وإنشاء قائمة مرقمة مع المعرف المخصص لها. فمثلا:
- الرابط 1
- الرابط 2
- الرابط 3
في هذا المثال ، قمت بإنشاء قائمة ذات تعداد نقطي من ثلاثة عناصر ووضعتها في طبقة div مع معرف لوحة ID.
الخطوة 4
انتقل إلى كتلة القسم من صفحتك وأنشئ قائمة ورقة الأنماط المتتالية المناسبة. إذا كنت تريد إنشاء قائمة أفقية ، فيمكنك تضمين السمة المضمنة للقائمة الناتجة:
#panel ul li {display: inline؛ }
الخطوة الخامسة
لإنشاء خط أفقي بطول الصفحة بالكامل ، يمكنك استخدام الكود التالي:
#panel ul {margin-left: 0؛ المساحة المتروكة: 2 بكسل 0 ؛ }
الخطوة 6
ثم يمكنك عمل القسمة المرئية إلى مستطيلات:
#panel ul li a {margin-left: 3px؛ الحدود: 1 بكسل ؛ الحشو: 2 بكسل 3 بكسل ؛ الخلفية: أزرق ؛ }
يقوم هذا الرمز بتعيين المسافات البادئة للنص من عناصر الحدود من خلال سمات الهامش الأيسر والحشو ، كما يقوم بتعيين لون الخلفية لكل عنصر من عناصر القائمة. في هذا المثال ، يكون اللون أزرق ، ولكن يمكنك تغييره وفقًا لتقديرك الخاص.
الخطوة 7
للإشارة إلى العنصر المحدد في الصفحة الحالية في علامة التبويب ، قم بتعيين المعلمات المناسبة للفئة المفتوحة:
#menu ul li a # open {background: red؛ الحد السفلي: 1 بكسل ؛ }
سيتم الآن عرض الصفحة الحالية المحددة في اللوحة باللون الأحمر.
الخطوة 8
احفظ التغييرات التي تم إجراؤها على الملف وتحقق من وظيفة الشفرة المكتوبة عن طريق فتح صفحتك من خلال متصفح. لتعيين خيارات عرض إضافية ، يمكنك دائمًا إضافة CSS أو HTML لتحسين مظهر الكائن.
