سواء كانت قائمة التنقل الخاصة بك عبارة عن صف أفقي عبر الجزء العلوي أو صف عمودي أسفل الجانب ، فإنها لا تزال مجرد قائمة. عند تصميم الملاحة على شبكة الإنترنت ، من السهل أن ننسى أن قائمة التنقل هي مجرد مجموعة من الروابط الممجدة. ولكن إذا قمت ببرمجة الملاحة باستخدام XHTML + CSS ، فيمكنك إنشاء قائمة صغيرة لتنزيلها (XHTML) وسهلة التخصيص (CSS).
ابدء
لبدء تصميم قائمة للتنقل ، تحتاج إلى استخدام قائمة. قد تكون قائمة غير مرتبة قياسية تم تحديدها كملاحة:
إذا نظرت عن كثب إلى HTML ، ستلاحظ أن الرابط "الصفحة الرئيسية" به معرّف أيضًا
أنت هنا. سيسمح لك هذا بإنشاء قائمة تحدد الموقع الحالي لقرائك. حتى إذا لم تكن تخطط لإنشاء هذا النوع من الإشارات المرئية على موقعك الآن ، يمكنك تضمين هذه المعلومات. إذا قررت إضافة الإشارة لاحقًا ، فستتوفر لديك أقل ترميزًا لإعداد موقعك.
بدون أي نمط CSS ، تبدو قائمة XHTML هذه كقائمة قياسية غير مرتبة. توجد رموز نقطية وتكون عناصر القائمة معلومة قليلاً. نظرًا لأنني أستخدم روابط المواضع المؤقتة ، فإن معظم المتصفحات لن تعرض الروابط على أنها قابلة للنقر (تحته خط باللون الأزرق). إذا قمت بلصق HTML أعلاه في صفحة ويب ، سيبدو التنقل الخاص بك كما يلي:
- الصفحة الرئيسية
- منتجات
- خدمات
- اتصل بنا
هذا ممل جداً ولا يشبه إلى حد كبير قائمة الطعام. ولكن مع إضافة بعض أنماط CSS إلى القائمة ، يمكنك إنشاء قائمة تجعلك فخوراً.
قائمة التنقل الرأسي
من السهل جدًا كتابة قائمة تنقل عمودية نظرًا لأنها تظهر بنفس طريقة القائمة العادية: أعلى وأسفل. عرض عناصر القائمة عموديًا أسفل الصفحة.
عندما أقوم بتصميم القوائم ، أود أن أبدأ من الخارج وأعمل فيه. وأعني بذلك أنني أول أسلوب
المجاهدين # الملاحة ثم الانتقال إلى
لى العناصر ثم الروابط ، إلخ. لذلك في هذه القائمة ، عليك أولاً تحديد عرض القائمة. سيضمن ذلك أنه حتى إذا كانت عناصر القائمة طويلة ، فلن تدفع بقية المخطط أو تتسبب في التمرير الأفقي.
ul # navigation {width: 12em؛ }
بمجرد الحصول على مجموعة العرض ، يمكنني اللعب مع عناصر القائمة. هذا يسمح لي بوضع أشياء مثل (للتخلص من الرصاص) وألوان الخلفية والحدود ومحاذاة النص والهوامش.
ul # navigation li {نمط القائمة: لا شيء ؛لون الخلفية: # 039؛border-top: solid 1px # 039؛محاذاة النص: left؛الهامش: 0؛} بمجرد تعيين أساسيات عناصر القائمة ، يمكنك البدء في تشغيل كيفية ظهور القائمة في منطقة الروابط. النمط الأول UL # navigation LI Aثم رابط, A: زار, A: تحومو 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 هو المعرّف أنت هنا. إذا كنت ترغب في تعديل القائمة الخاصة بك للإشارة إلى الموقع الحالي لمستخدميك ، فما عليك سوى استخدام ذلك هوية شخصية لتحديد لون خلفية مختلف أو نمط آخر. انقل تلك السمة هوية شخصية إلى عنصر القائمة الصحيح في الصفحات الأخرى حتى يتم تمييز الصفحة الحالية دائمًا. ul # navigation li # youarehere a {background-color: # 09f؛ } إذا وضعت هذه الأنماط معًا في صفحتك ، فيمكنك إنشاء شريط قوائم أفقي أو عمودي يعمل مع موقعك ، ولكنه سريع التنزيل وسهل التحديث في المستقبل. يؤدي استخدام XHTML + CSS إلى تحويل قوائمك إلى أداة قوية جدًا للتصميم. إذا كنت ترغب في المزيد من الأمثلة على القوائم الأفقية ، فاستشر ما يلي.
قائمة التنقل الأفقي
أنت هنا معلومات الموقع
