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

دليل خطوة بخطوة

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

ابدء

لبدء تصميم قائمة للتنقل ، تحتاج إلى استخدام قائمة.

قد تكون قائمة غير مرتبة قياسية تم تحديدها كملاحة:

<الملاحة>

• الصفحة الرئيسية
  
• و المنتجات
  الخدمات
• و
  
• اتصل بنا
  
  

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

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

  • الصفحة الرئيسية
  • منتجات
  • خدمات
  • اتصل بنا

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

  قائمة التنقل الرأسي

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

  عرض عناصر القائمة عموديًا أسفل الصفحة.

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

  ul # navigation {width: 12em؛ }

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

  ul # navigation li {
  نمط القائمة: لا شيء ؛
  لون الخلفية: # 039؛
  border-top: solid 1px # 039؛
  محاذاة النص: left؛
  الهامش: 0؛
  }

  بمجرد تعيين أساسيات عناصر القائمة ، يمكنك البدء في تشغيل كيفية ظهور القائمة في منطقة الروابط. النمط الأول UL # navigation LI A ثم A: link ، A: زار ، A: hover ، و A: نشط (إذا كنت تريدهم). بالنسبة إلى الروابط ، أرغب في جعل الروابط عنصر كتلة (بدلاً من الافتراضي في السطر). هذا يجبرهم على أخذ مساحة LI بأكملها - ويتصرفون أكثر مثل فقرة ، مما يجعلها أسهل على شكل أزرار القائمة. الشيء الآخر الذي أفعله دائما هو إزالة التسطير (زخرفة النص: لا شيء ؛) ، لأن هذا يجعل الأزرار تبدو وكأنها أزرار بالنسبة لي.

  ولكن بالطبع ، قد يكون تصميمك مختلفًا.

  ul # navigation li a {
  العرض محجوب؛
  زخرفة النص: لا شيء ؛
  الحشو:.
  border-bottom: solid 1px # 39f؛
  border-right: solid 1px # 39f؛
  }

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

  a: link، a: visited {color: #fff؛ }
  a: hover، a: active {color: # 000؛ }

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

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

  إذا كنت تريد المزيد من الأمثلة على القوائم الرأسية ، فراجع القائمة أدناه.

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

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

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

  <الملاحة>
  

  
  
  • الصفحة الرئيسية
    
  • و المنتجات
    الخدمات
  • و
    
  • اتصل بنا
    
    

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

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

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

    ul # navigation li {display: inline؛ }

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

    ul # navigation li a {
    زخرفة النص: لا شيء ؛
    الحشو:.
    border-bottom: solid 1px # 39f؛
    border-top: solid 1px # 39f؛
    border-right: solid 1px # 39f؛
    }
    a: link، a: visited {color: #fff؛ }
    ul # navigation li a: hover {
    لون الخلفية: #fff؛
    اللون: # 000؛
    }

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

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

    ul # navigation li # youarehere a {background-color: # 09f؛ }

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

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

    • قائمة أفقي منسقة
    • قالب القائمة الأفقي الأساسي
    • وهناك قائمة أفقي مع أنت هنا
    • قالب القائمة الأفقي الأساسي مع أنت هنا