قم بإنشاء شريط تنقل أفقي CSS خالص

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

ترميز XHTML وتنسيق CSS لإنشاء أشرطة التنقل.

شريط تنقل CSS بسيط

ربما يكون الحل الأبسط لإنشاء شريط تنقل نصي بنمط CSS هو وضع جميع الروابط في سطر واحد من النص، كما في المثال أ.

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

بعد ذلك، يتعين عليك عادةً إدراج الأنابيب (الأشرطة الرأسية) والأحرف ذات المسافات البيضاء التي لا تحتوي على أسطر جديدة كمحددات.

كما يوضح الكود أدناه، فإن النتيجة بالكاد هي العلامات الواضحة والمنظمة التي نريدها.

وفيما يلي المحتوى المقتبس: <div معرف = "navbar1"> <a href="link1a.html">الزر 1</a> <a href="link2a.html ">الزر 2</a> | <a href="link3a.html "> الزر 3</a> </div>

إذا قمت بإضافة العلامة <span> لتطبيق أنماط CSS الإضافية اللازمة لإنشاء خلفية الزر وتأثيرات التمرير، فسوف يصبح الترميز أكثر إرباكًا.

شريط تنقل CSS قائم على القائمة هناك طريقة أخرى لإنشاء شريط تنقل CSS وهي استخدام علامتي <ul> و<li> لتمثيل الروابط كقائمة غير مرتبة.

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

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

بعد معرفة ذلك، دعونا نلقي نظرة الآن على المثال ب، حيث نقوم بإنشاء شريط تنقل بنمط CSS ومسمى XHTML استنادًا إلى قائمة غير مرتبة.

إليك ترميز XHTML:

وفيما يلي المحتوى المقتبس: <div معرف = "navbar2"> <ul> <li><a href="link1.html">الزر 1</a></li> <li><a href="link2.html ">الزر 2</a></li> <li><a href="link3.html ">الزر 3</a></li> </ul> </div>

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

إليك كود CSS لتحويل قائمة الروابط النصية إلى شريط تنقل:

وفيما يلي المحتوى المقتبس: شعبة# التنقل2 { الارتفاع: 30 بكسل؛ العرض: 100%؛ الحدود العلوية: الصلبة #000 1px؛ الحد السفلي: الصلبة #000 1px؛ لون الخلفية: #336699؛ } شعبة#navbar2 أول { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ عائلة الخطوط: Arial، Helvetica، sans-serif؛ حجم الخط: صغير؛ اللون: #FFF؛ ارتفاع الخط: 30 بكسل؛ المساحة البيضاء: nowrap؛ } شعبة#navbar2 لى { نوع نمط القائمة: لا شيء؛ العرض: مضمن؛ } div#navbar2 لى { زخرفة النص: لا شيء؛ الحشو: 7 بكسل 10 بكسل؛ اللون: #FFF؛ } div#navbar2 ليا:الرابط { اللون: #FFF: } div#navbar2 ليا:زار { اللون: #CCC؛ } div#navbar2 ليا:تحوم { وزن الخط: غامق؛ اللون: #FFF؛ لون الخلفية: #3366FF؛ }