قائمة التنقل المصنوعة يدويًا للباب المنزلق

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

الأهداف المثالية التي تريد قائمة التنقل تحقيقها هي:

1. جميلة وشخصية.

2. الهيكل واضح، والدلالات واضحة، ولا توجد علامات زائدة عن الحاجة.

3. يتم فصل الأداء والبنية والسلوك على ثلاثة مستويات، دون أي تدخل.

4. يفضي إلى إخراج البيانات من برامج الخلفية.

5. تحتوي القائمة على تغييرات تأثير ثلاث حالات.

6. يمكن تسليط الضوء وتسجيل عناصر القائمة التي تم النقر عليها.

7. عرض النص قابل للتكيف. عندما يتغير محتوى النص في الطول، يمكن أن يتغير الزر بمرور الوقت.

8. متوافق مع جميع المتصفحات الرئيسية.

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

بناء

في رأيي، القائمة القياسية المثالية يجب أن تحتوي على الهيكل التالي:

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

أسلوب

حسنًا، إنه مجرد هيكل عظمي الآن، فلنجمله قليلاً، ونضيف بعض الأنماط البسيطة، على الأقل نزيل النقاط الصغيرة، ونرتبه أفقيًا!

حسنًا، دعنا نضيف بعض الأنماط!

حسنًا، انظر الآن، لقد حققنا هدفنا الصغير.
الآن بعد أن أصبح الهيكل العظمي في مكانه، فإن الخطوة التالية هي وضع ملابس جميلة على كل عنصر من عناصر القائمة.
لتحقيق الشرط الأول، يجب عليك أولاً أن يكون لديك زر جميل وترسمه بنفسك. أوه، أنا لست فنانًا، هذا صعب! ومع ذلك، لا تكن صبورًا جدًا، فالإنترنت واسع للغاية لدرجة أن هناك العديد من العجائب التي قد قام بها شخص ما بالفعل. (الدموع قادمة...) كود مصدر الزر: http://bbs.blueidea.com/thread-2860891-1-1.html

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

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

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

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

لا تنشغل يا إلهي إذا قمت بتثبيت الصور بهذه الطريقة فكيف يمكنني تحقيق حالات تمرير الماوس الثلاثة؟ يجب أن نعلم جميعًا أنه باستثناء متصفح IE6 اللعين، تدعم المتصفحات الأخرى حاليًا الفئة الزائفة li:hover. ومع ذلك، لكي تكون هذه الطريقة متوافقة مع جميع المتصفحات الرئيسية (هذا هو هدفنا الثامن، لا تنساه!)، فإن هذه الطريقة لا تعمل. يمكن لـ IE6 فقط تطبيق فئة التمرير الزائفة على العلامة A، ويتجاهل العلامات الأخرى!

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

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

حسنًا، لقد أوشكت استعداداتنا على الانتهاء، وحان الوقت لمنح القائمة ملابس جديدة.

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

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

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

ولكن...هذه السمة بها أيضًا نقطة ضعف قاتلة، حيث لا يمكن التعرف عليها إلا من خلال المتصفحات المتقدمة مثل FF3. يمكن للمتصفحات الأخرى أن تأخذ منعطفًا فقط. اه أوه! لذلك، ما مدى أهمية توحيد معايير المتصفح! يبدو أن HACK هو أيضًا وسيلة راحة يتعين علينا التعامل معها.

ولحسن الحظ، فقد وجد بعض الخبراء الحل بالفعل. يرجى قراءة هذين المقالين أولا.

الدروس ذات الصلة:
"مثالان لتطبيق العرض: كتلة مضمنة" (Qin Ge)
"سمة الكتلة المضمنة لتوافق المحاكاة" (Yi Fei)

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

لنكتب أولاً نمط الصورة على اليمين، والذي يتم تطبيقه على العقدة الفرعية وعلامة العنصر li.

li a{display:inline-block; padding-right:30px; *padding-top:0; /button.gif) عدم التكرار لليمين -36px; اللون:#fff;}

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

يتم وضع الصورة الموجودة على الجانب الأيسر من الزر في عنصر SPAN، ومحاذاة صورتها إلى اليسار، وتعيين الحشو لتوسيع عرضها وارتفاعها.

ثم أعدهم مرة أخرى إلى الوضع المضمن، مما يؤدي إلى تشغيل ميزة haslayout الخاصة بـ IE.
في الكود أعلاه، نرى أيضًا تطبيق HACK، *padding-bottom: 0; و*padding-top: 0;، والذي يستخدم لحل التأثيرات المختلفة للمتصفحات مثل IE وFF. إذا كنت لا تصدقني، يمكنك حذفه ومعرفة التأثير الذي سيحدثه. هناك مشكلة في امتداد الارتفاع ضمن IE.
حسنًا، حان وقت كتابة التأثير عند تحريك الماوس.

li a:hover{padding-right:30px;background:url(images/button.gif) بدون تكرار لليمين -108px;}
li a:hoverspan{padding-left:30px;background:url(images/button.gif) بدون تكرار لليسار -72px;font-weight:bold;}

التالي هو التأثير بعد النقر بالماوس.

li a:active{padding-right:30px;background:url(images/button.gif) بدون تكرار لليمين -180px;}
li a:الامتداد النشط{padding-left:30px;background:url(images/button.gif) بدون تكرار لليسار -144px;font-weight:bold;}

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

الآن أصبح إصدار CSS النقي من قائمة الأبواب المنزلقة جاهزًا بشكل أساسي.