تكنولوجيا الأبواب المنزلقة في CSS

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

مع تصميم بسيط، يمكننا أن نفعل ذلك.

من أين يأتي الابتكار؟

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

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

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

تكنولوجيا الأبواب المنزلقة

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

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

إذا زاد حجم الهدف وتجاوز العرض الموضح أعلاه، فسيتم تمديد الصورة بعيدًا بسبب التغييرات في حجم النص والخط، مما يؤدي إلى إنشاء فجوات قبيحة. ما نحتاج إلى الحكم عليه هو التنبؤ بمدى قابلية التوسع هذه. إذا قمت بتغيير حجم الخط في المتصفح، هل سينمو الهدف؟ من الناحية العملية، ينبغي علينا على الأقل تقدير حجم الخط لزيادة حجمه إلى 300%. يجب أيضًا أن تستوعب صور الخلفية هذا النمو. في المثال أعلاه، قمنا بتعيين الصورة السفلية (اليمنى) على 400*150 بكسل والصورة العلوية على 9*150 بكسل.

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

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

سيتم تطبيق نفس الأسلوب على الملصق المسمى "الحالي". بمجرد حصولنا على هذه الصور الأربع (1، 2، 3، 4) يمكننا البدء في إنشاء ملصقاتنا باستخدام العلامات وCSS.

إنشاء التسميات

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

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

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

نبدأ بالعلامة التالية:

<div معرف = "رأس">
<ul>
<li><a href="#">الصفحة الرئيسية</a></li>
<li id="current"><a href="#">الأخبار</a></li>
<li><a href="#">المنتجات</a></li>
<li><a href="#">حول</a></li>
<li><a href="#">الاتصال</a></li>
</ul>
</div>

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

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

#الرأس {
تعويم: يسار؛
العرض: 100%؛
الخلفية: أصفر؛
حجم الخط: 93%؛
ارتفاع الخط: عادي؛
}

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

#الرأس {
الهامش:0;
الحشو: 0؛
نمط القائمة: لا شيء؛
}
#رأس لي {
تعويم: يسار؛
الهامش:0;
الحشو: 0؛
}قم بتعيين سلسلة الربط لفرض العرض ككائن كتلة، ويمكننا التحكم في جميع الأنماط دون قلق:

#الرأس أ {
عرض:كتلة؛
}

بعد ذلك، نضيف صورة الخلفية على اليمين إلى عنصر القائمة (التغييرات موضحة بالخط العريض):

يمكننا الآن وضع الصورة اليسرى على يسار سلسلة المرساة (العنصر الموجود داخل الحاوية). نضيف أيضًا حشوة تعمل على تكبير التسمية ودفع النص بعيدًا عن حواف التسمية:

#الرأس أ {
عرض:كتلة؛
الخلفية: URL("norm_left.gif")
عدم تكرار الجزء العلوي الأيسر؛
الحشو: 5px 15px؛
}

بهذه الطريقة نحصل على التأثير 2. لاحظ كيف يتم تشكيل علامتنا. هنا، سوف يفاجأ مستخدمو IE5/Mac على الفور، "يا إلهي، علامات التبويب الخاصة بي مكدسة عموديًا وتمتد إلى الشاشة بأكملها!" لا تقلق، سنساعدك على حل المشكلة على الفور. في الوقت الحالي، حاول اتباع الخطوات الموضحة أدناه، أو إذا كان ذلك مناسبًا، قم بالتبديل مؤقتًا إلى متصفح آخر، وسيتم حل مشكلة إصدار IE5/Mac على الفور.

الآن بعد أن اكتملت صورة الخلفية للملصق العام، نحتاج إلى استبدال الصورة للملصق "الحالي". نحقق ذلك عن طريق إضافة id = "current" وسلسلة ربط إلى عنصر القائمة الهدف. وبما أنه ليس هناك حاجة لتغيير مظهر الخلفية غير الصورة، فإننا نستخدم خاصية صورة الخلفية:

نضع الصورة في خلفية حاوية #header (استبدال الخلفية الصفراء الأصلية)، وننقل صورة الخلفية إلى الأسفل، ونضيف لون الخلفية المقابل إلى المساحة الفارغة أعلى الصورة. في الوقت نفسه، قم بإزالة الحشوة الموروثة من النص وأضف 10 بكسل من الحشوة إلى الجانبين العلوي واليسرى والأيمن من ul:

#الرأس {
تعويم: يسار؛
العرض: 100%؛
الخلفية:#DAE0D2 URL("bg.gif")
كرر-x أسفل؛
حجم الخط: 93%؛
ارتفاع الخط: عادي؛
}
#الرأس {
الهامش:0;
الحشو: 10 بكسل 10 بكسل 0؛
نمط القائمة: لا شيء؛
}

نقوم بذلك عن طريق تقليل قيمة الحشوة السفلية لسلسلة المرساة العادية بمقدار 1 بكسل (5px-1px=4px)، ثم إضافة الحشوة المطروحة إلى سلسلة المرساة "الحالية".

اللمسات الأخيرة

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

الآن بعد أن أصبحت الزوايا شفافة، ستظهر الصورة على اليسار من خلال زوايا الصورة على اليمين. للتعويض، نضيف حشوة (9 بكسل) إلى عنصر النموذج الذي يطابق عرض الصورة على اليسار. الآن بعد أن أضفنا الحشو إلى عنصر النموذج، نحتاج إلى إزالة نفس العرض لتوسيط النص (15px-9px=6px):

#رأس لي {
تعويم: يسار؛
الخلفية: URL("right.gif")
عدم تكرار الجزء العلوي الأيمن.
الهامش:0;
الحشو: 0 0 9 بكسل؛
}
#الرأس أ {
عرض:كتلة؛
الخلفية: URL ("left.gif")
عدم تكرار الجزء العلوي الأيسر؛
الحشو: 5px 15px 4px 6px؛
}

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

#رأس لي {
تعويم: يسار؛
الخلفية: URL ("left.gif")
عدم تكرار الجزء العلوي الأيسر؛
الهامش:0;
الحشو: 0 0 9 بكسل؛
}
#رأس أ، #رأس قوي، #امتداد رأس {
عرض:كتلة؛
الخلفية: URL("right.gif")
عدم تكرار الجزء العلوي الأيمن.
الحشو: 5px 15px 4px 6px؛
}
#الرأس #الحالي {
صورة الخلفية:url("left_on.gif");
}
#الرأس #الحالي {
صورة الخلفية:url("right_on.gif");
الحشو السفلي: 5px؛
}

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

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

حل متسق
بعد Effect 2، إحدى المشكلات التي اكتشفناها هي أنه في وضع التصفح IE5/Mac، تمتد كل علامة تبويب وتحتل عرض المتصفح بالكامل، بحيث يتم تكديس علامات التبويب معًا عموديًا. هذا ليس ما نريده.

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

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

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

لا يوجد شيء لا يمكنك التفكير فيه ولا شيء لا يمكنك فعله. يُظهر لنا التأثير النهائي مثالاً، لكن تصميمنا لا يمكن أن يقتصر على هذا.

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

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