استخدام الارتباطات لإنشاء قوائم تنقل عمودية

سواء كانت قائمة التنقل في موقع الويب الخاص بك عبارة عن صف أفقي في الجزء العلوي أو صف عمودي أسفل الجانب ، فهي مجرد قائمة. عند التصميم التنقل عبر الويب، قائمة التنقل هي مجموعة من الروابط. عند برمجة التنقل باستخدام XHTML + CSS ، يمكنك إنشاء قائمة صغيرة للتنزيل (XHTML) وسهلة التخصيص (CSS).

ابدء

لتصميم قائمة للتنقل ، تحتاج إلى استخدام قائمة. قد تكون قائمة قياسية غير مرتبة تم تحديدها على أنها قائمة التنقل. على سبيل المثال:

• منزل، بيت
• منتجات
• خدمات
• اتصل بنا

عند النظر إلى HTML ، يحتوي رابط الصفحة الرئيسية على معرف.

أنت هنا

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

من غير تصميم CSS، تبدو قائمة XHTML هذه كقائمة قياسية غير مرتبة. توجد تعداد نقطي وعناصر القائمة ذات مسافة بادئة طفيفة. عند استخدام روابط العناصر النائبة، لا تعرض معظم المتصفحات الروابط على أنها قابلة للنقر (تحتها خط باللون الأزرق). عندما تلصق HTML في صفحة ويب ، يبدو التنقل كما يلي:

• منزل، بيت
• منتجات
• خدمات
• اتصل بنا

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

إذا كنت ترغب في المزيد من الأمثلة على القوائم الرأسية ، فقم بإجراء بحث على الويب عما يلي:

• قائمة عمودية على غرار
• قالب قائمة عمودية أساسي
• قائمة رأسية أنيقة معك هنا
• قالب قائمة عمودي أساسي معك أنت هنا

قائمة التنقل العمودي

من السهل كتابة قائمة التنقل العمودية لأنها تُعرض بنفس طريقة عرض القائمة العادية: لأعلى ولأسفل. يتم عرض عناصر القائمة عموديًا أسفل الصفحة.

عند تصميم القوائم ، ابدأ من الخارج واعمل فيها. أولاً ، نمط التنقل:

ul # التنقل

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

ul # navigation {العرض: 12em؛ }

بعد تعيين العرض ، اعمل على عناصر القائمة. يتيح لك هذا تعيين أشياء مثل ألوان الخلفية والحدود ومحاذاة النص والهوامش.

ul # navigation li {
نمط القائمة: لا شيء ؛
لون الخلفية: # 039 ؛
أعلى الحد: صلب 1 بكسل # 039 ؛
محاذاة النص: يسار ؛
الهامش: 0؛
} 

بعد تعيين الأساسيات لعناصر القائمة ، اعمل على كيفية ظهور القائمة في منطقة الروابط. النمط الأول في التنقل:

UL # navigation LI A

ثم قم بتصميم ما يلي:

رابط
ج: زار
ج: تحوم
ج: نشط

بالنسبة للروابط ، اجعل الروابط عنصر كتلة (بدلاً من المضمنة الافتراضية). يؤدي هذا إلى إجبار الروابط على شغل مساحة LI بالكامل ، والعمل كفقرة ، مما يجعل تصميم الروابط أسهل كأزرار قائمة. ثم قم بإزالة ما يلي:

تسطير ، زخرفة النص: لا شيء ؛ مثل

هذا يجعل الأزرار تبدو مثل الأزرار. قد يكون التصميم الخاص بك مختلفا.

ul # navigation li a {
العرض محجوب؛
زخرفة النص: لا شيء ؛
الحشو: .25em ؛
الحد السفلي: صلب 1px # 39f ؛
الحد الأيمن: صلب 1px # 39f ؛
}

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

أ: رابط ، أ: تمت زيارته {color: #fff؛ }
a: hover، a: active {color: # 000؛ }

يمكنك أيضًا إعطاء حالة التمرير بعض الاهتمام عن طريق تغيير لون الخلفية.

أ: تحوم {background-color: #fff؛ }

قائمة التنقل الأفقية

يعد إنشاء قوائم تنقل أفقية أصعب قليلاً من قوائم التنقل العمودية لأنه يتعين عليك تعويض حقيقة أن قوائم HTML تفضل عرضها عموديًا. كما هو الحال مع القائمة الأفقية ، أنشئ قائمة قائمة التنقل:

• منزل، بيت
• منتجات
• خدمات
• اتصل بنا

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

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

ul # التنقل {
تعويم: اليسار؛
الهامش: 0؛
حشوة: 0 ؛
العرض: 100٪؛
لون الخلفية: # 039 ؛
}

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

ul # navigation li {display: inline؛ }

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

أنت هنا معلومات الموقع

جانب آخر من HTML هو هذا المعرف:

أنت هنا

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

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

إذا كنت ترغب في المزيد من الأمثلة على القوائم الأفقية ، فابحث في الويب عن ما يلي:

• قائمة أفقية على غرار
• قالب قائمة أفقي أساسي
• قائمة أفقية على غرار "أنت هنا"
• قالب قائمة أفقي أساسي مع You Are Here