ترميز قائمة التصفح التنقل اللطيفة في CSS3

هذه المقالة هي جزء من موقعنا "سلسلة دروس HTML5 / CSS3" - مكرسة لمساعدتك في جعلك أفضل مصمم و / أو مطور. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة.

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

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

قبل أن ننتقل إلى الكود ، سنتحدث قليلاً عن وظيفة تنقلنا ، البرنامج التعليمي الكامل في القفز!

تقدم تريل

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

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

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

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

ما يكفي من الكلمات, دعنا نقفز في المشروع! سنبدأ بإنشاء إطار HTML الأساسي والانتقال إلى تأثيرات التصميم المختلفة. في البداية تحتاج إلى تحميل الصورة مطلوب للمشروع.

Bare-Bones HTML

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

صفحة اولية

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

    بلوق الرئيسية
 أرشيف
 2011 الكتابة
 نصائح لتطوير مسج في HTML5

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

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

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

القائمة بدون صور

إلى تتحلل برشاقة لدينا فتات الخبز نحتاج إلى مجموعة ثانوية من عناصر قائمة HTML. إذا كنت تحاول الرجوع في التنقل الواحد ، فيمكنك استخدام jQuery للكشف عن وكيل المتصفح وتطبيق معرف وفقًا لذلك. لسوء الحظ ، لا يمكن الاعتماد عليها دائمًا (لبعض مستخدمي الجوال ، على سبيل المثال) حل آخر هو أن تتضمن ورقة أنماط خاصة بـ IE و إخفاء أو إظهار أيهما يعمل القائمة بشكل أفضل - لكن بالطبع ، هذا الخيار مخصص لبرنامج Internet Explorer فقط.

    بلوق الرئيسية
 أرشيف
 2011 الكتابة
 نصائح لتطوير مسج في HTML5

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

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

المغلق انزلاق الصور الخلفية

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

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

 .فتات عرض: كتلة؛  .crumbs li display: inline؛  .crumbs li.first padding-left: 8px؛  .crumbs li a، .crumbs li a: link، .crumbs li a: visit color: # 666؛ العرض محجوب؛ تعويم: اليسار؛ حجم الخط: 12 بكسل ؛ الهامش الأيسر: -13 بكسل ؛ الحشو: 7px 17px 11px 25px ؛ الموقف: نسبي زخرفة النص: لا شيء ؛  .crumbs li a background-image: url ('... /img/bg-crumbs.png')؛ تكرار الخلفية: عدم التكرار ؛ خلفية الموقف: 100 ٪ 0 ؛ الموقف: نسبي  .crumbs li a: hover color: # 333؛ خلفية الموقف: 100 ٪ -48px. المؤشر: المؤشر ؛  .crumbs li a: active color: # 333؛ خلفية الموقف: 100 ٪ -96px.  .crumbs li.first a span height: 29px؛ العرض: 3px ؛ الحدود اليسرى: 1px صلب # d9d9d9 ؛ الموقف: مطلق ؛ أعلى: 0 بكسل ؛ اليسار: 0 بكسل ؛

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

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

تأثيرات مخصصة مع CSS3

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

تشغل الأنماط الفردية مساحة كبيرة ، لذا سأقسمها إلى كتلتين رمزيتين.

 .crumbs2 display: block؛ الهامش الأيسر: 27 بكسل ؛ الحشو: 0؛ الحشو أعلى: 10px.  .crumbs2 li display: inline؛  .crumbs2 li a، .crumbs2 li a: link، .crumbs2 li a: visit color: # 666؛ العرض محجوب؛ تعويم: اليسار؛ حجم الخط: 12 بكسل ؛ الحشو: 7px 16px 7px 19px ؛ الموقف: نسبي زخرفة النص: لا شيء ؛ الحدود: 1 بكسل × # d9d9d9 ؛ الحد الأيمن للعرض: 0 بكسل ؛  .crumbs2 li a background-image: -webkit-gradient (linear، left left، top left، stop stop (0.45، rgb (241،241،241))، color-stop (0.73، rgb (245،245،245)))؛ خلفية الصورة: - التدرج الخطي (أسفل الوسط ، rgb (241،241،241) 45٪ ، rgb (245،245،245) 73٪) ؛ / * لـ Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1، endColorstr = # f5f5f5)؛ / * بالنسبة لبرنامج Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1، endColorstr = # f5f5f5)"؛  .crumbs2 li.first a border-top-left-radius: 5px؛ - الحد من دائرة نصف قطرها - topleft: 5px. -Wkkit-border-top-left-radius: 5px؛  .crumbs2 li.last a border-right-width: 1px؛ الحد الأدنى نصف القطر الأيمن: 5 بكسل ؛ -Moz-border-radius-bottomright: 5px؛ -wkkit-border-bottom-right-radius: 5px؛

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

-بكت التدرج و -MOZ الخطية التدرج هي الحلول الأساسية التي تقوم بمعظم العمل. لقد قمت بتضمين رمز قديم للإصدارات القديمة من Internet Explorer ، ولكن انها ليست مضمونة لعرض بشكل صحيح في كل وقت (نحن نستخدم تقنيات تقديم صورة قوية ، بعد كل شيء). لاحظ أنني قمت بتعيين كلاً من رموز ألوان RGB و hex بين خصائص الخلفية. يمكنك التمسك بأسلوب أو آخر إذا كنت أكثر راحة.

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

CSS3 الحدود والظلال

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

 .crumbs2 li a: hover border-top-colour: # c4c4c4؛ لون الحدود السفلية: # c4c4c4؛ background-image: -webkit-gradient (خطي ، أسفل اليسار ، أعلى اليسار ، لون توقف (0.45 ، rgb (241،241،241)) ، توقف لون (0.73 ، rgb (248،248،248))) ؛ خلفية الصورة: - التدرج الخطي (أسفل الوسط ، rgb (241،241،241) 45٪ ، rgb (248،248،248) 73٪) ؛ / * لـ Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8، endColorstr = # f1f1f1)؛ / * بالنسبة لبرنامج Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8، endColorstr = # f1f1f1)"؛ اللون: # 333 ؛ -moz-box-shadow: 0px 2px 2px # e8e8e8؛ -webkit-box-shadow: 0px 2px 2px # e8e8e8؛ box-shadow: 0px 2px 2px # e8e8e8؛  .crumbs2 li a: active border-top-colour: # c4c4c4؛ لون الحدود السفلية: # c4c4c4؛ الخلفية - الصورة: - التدرج اللوني (الخطي ، أسفل اليسار ، أعلى اليسار ، توقف اللون (0.45 ، rgb (224،224،224)) ، توقف اللون (0.73 ، rgb (235،235،235))) ؛ خلفية الصورة: - التدرج الخطي (أسفل الوسط ، rgb (224،224،224) 45٪ ، rgb (235،235،235) 73٪) ؛ / * لـ Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb، endColorstr = # e0e0e0)؛ / * بالنسبة لبرنامج Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb، endColorstr = # e0e0e0)"؛ box-shadow: -1px 1px 1px 0px #dadada inset؛ -webkit-box-shadow: -1px 1px 1px 0px #dadada inset؛ -moz-box-shadow: -1px 1px 1px 0px #dadada inset؛ اللون: # 333 ؛

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

على تحوم سترى أ تأثير تنقش لامعة الذي يقترن الحدود المظلمة يعطي أنماط الصفحة المنبثقة. إذا قمت بالنقر مع الاستمرار ، فسوف تحصل على الحالة النشطة التي تتميز ب خلفية مظلمة التدرج. يؤدي هذا التأثير إلى ظهور الأزرار في الواقع “مزحوم” في الصفحة.

نحن أيضا تطبيق مربع الظل الخصائص من المواصفات CSS3 الجديدة. -بكت, -MOZ, وتستخدم الأنماط الافتراضية مع نفس الإعدادات. تحوم يعرض ظل الضوء الخروج من أسفل الرابط المحدد. عندما تكون نشطة ، سيتم تشكيل الظل على الحدود العليا واليمنى والسفلية. يتم إنشاء هذا التأثير مع أقحم تمت إضافة الكلمة الأساسية إلى نهاية كل سطر خاصية box-shadow. مرة أخرى ، تعتبر CSS Tricks أفضل صديق لك هنا بمقال رائع حول مربع الظل ، حيث يتحدث عن بناء الجملة واستخدامه المناسب في CSS3.

المكافأة: المزيد من الأنماط

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

هذه يتم تضمين ملفات المكافأة في الملف المصدر التي يمكنك تنزيلها بتنسيق أرشيف zip. في القسم أدناه.

يمكنك التحقق من الصورة أعلاه للحصول على فكرة عما أتحدث عنه. إذا كنت بحاجة إلى نظام ألوان معين ، فتح البوب Photoshop> الصورة> التعديلات> الصبغة / التشبع لتعديل نظام الألوان لمطابقة القالب الخاص بك ، تذكر تحقق من خيار Colorize في جزء الصبغة / التشبع إذا لم يتغير اللون على الإطلاق.

استنتاج

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

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