4 طرق لإنشاء الأكورديون CSS فقط رهيبة
الأكورديون المحتوى جعل نمط تصميم مفيد. يمكنك استخدامها للعديد من الأشياء المختلفة: للقوائم ، والقوائم ، والصور ، ومقتطفات المقالات ، المقتطفات النصية ، وحتى مقاطع الفيديو
معظم الأكورديون هناك تعتمد على جافا سكريبت ، وخاصة على مسج, ولكن منذ استخدام تقنيات CSS3 المتقدمة على نطاق واسع ، يمكننا أيضًا العثور على أمثلة لطيفة لذلك فقط استخدام HTML و CSS, التي تجعلها في متناول في البيئات مع تعطيل جافا سكريبت.
يمكن أن يكون إنشاء الأكورديون فقط في CSS مهمة صعبة ، لذا سنحاول في هذا المنشور فهم المفاهيم الرئيسية التي يستخدمها المطورون عندما يحتاجون إلى إنشاء واحدة.
في إنشاء علامات تبويب CSS فقط ، عادةً ما يكون هناك طريقتان رئيسيتان ، كل واحدة منها بها حالتان للاستخدام المتكرر. النهج الأول يستخدم عناصر شكل خفية, بينما الثاني يستفيد محددات CSS الزائفة.
1. طريقة زر الراديو
تضيف طريقة زر الاختيار مدخلات راديو مخفية وعلامة تسمية مقابلة إلى كل علامة تبويب في الأكورديون. يكون المنطق بسيطًا: عندما يختار المستخدم علامة تبويب ، فإنه يقوم في الأساس بالتحقق من زر الاختيار الذي ينتمي إلى علامة التبويب هذه ، بنفس الطريقة عند ملء النموذج. عندما ينقرون على علامة التبويب التالية في الأكورديون ، فإنهم يختارون زر الاختيار التالي ، إلخ.
في هذه الطريقة, يمكن فتح علامة تبويب واحدة فقط في نفس الوقت. يبدو منطق HTML بشيء من هذا القبيل:
عنوان المحتوى (لا تستخدم علامة h1 هنا)
بعض المحتوى ...
P>
أنت بحاجه إلى إضافة زوج تسمية راديو منفصل لكل علامة تبويب في الأكورديون. لن يعطي HTML وحده السلوك المطلوب ، تحتاج إلى إضافة قواعد CSS المناسبة أيضًا ، دعنا نرى كيف يمكنك تحقيق ذلك.
ارتفاع ثابت علامات التبويب العمودية
في هذا الحل (انظر لقطة الشاشة أدناه) ، أخفى المطور زر الاختيار بمساعدة عرض لا شيء؛ القاعدة ، ثم أعطى وضعًا نسبيًا لعلامة التصنيف التي تحمل عنوان كل علامة تبويب ، وموضعًا مطلقًا في المقابل التسمية: بعد شبه عنصر.
هذا الأخير يحمل المقبض المميز بعلامة خضراء + تفتح علامات التبويب. تستخدم علامات التبويب المغلقة أيضًا مؤشرًا باللون الأخضر “-” علامات. في CSS ، يتم تحديد علامات التبويب المغلقة بمساعدة محدد العنصر + العنصر.
تحتاج أيضًا إلى إعطاء محتوى علامة التبويب المفتوحة ارتفاعًا ثابتًا. للقيام بذلك ، حدد نص علامة التبويب المفتوحة (المميزة بفئة محتوى علامة التبويب في HTML أعلاه) بمساعدة محدد العنصر 1 ~ element2 CSS.
المنطق الأساسي لـ CSS هنا هو ما يلي:
إدخال [نوع = راديو] عرض: لا شيء ؛ التسمية موقف: نسبي ؛ العرض محجوب؛ التصنيف: بعد content: "+"؛ الموقف: مطلق ؛ اليمين: 1 م ؛ الإدخال: علامة + محددة: بعد content: "-"؛ الإدخال: محدد ~ .tab-content height: 150px؛
يمكنك إلقاء نظرة على CSS الكامل هنا على Codepen. مكتوب في الأصل CSS في ساس ، ولكن إذا قمت بالنقر فوق “عرض المترجمة” زر ، يمكنك أن ترى ملف CSS المترجمة.
الصورة الأكورديون مع أزرار الراديو
تستخدم هذه الصورة الجميلة الأكورديون نفس طريقة زر الاختيار ، ولكن بدلاً من الملصقات ، المطور هنا تستخدم علامة HTML figcaption لإنجاز سلوك الأكورديون.
يختلف CSS بعض الشيء ، ويرجع ذلك أساسًا إلى أنه في هذه الحالة لا يتم وضع علامات التبويب عموديًا ولكن أفقيًا. استخدم المطور عنصر CSS الخاص بالعنصر + (الذي تم استخدامه في الحالة السابقة لتحديد المسامير) لضمان بقاء حواف الصور المغطاة مرئية.
اقرأ الدليل المفصل حول كيفية إنشاء هذا الأكورديون الأنيق فقط.
2. طريقة مربع الاختيار
تستخدم طريقة تحديد خانة الاختيار نوع إدخال مربع الاختيار بدلاً من زر الاختيار. عندما يختار المستخدم علامة تبويب ، يقوم في الأساس بمراجعة مربع الاختيار المقابل.
الفرق بالمقارنة مع طريقة زر الاختيار هو أنه ممكن لفتح أكثر من علامة تبويب واحدة في نفس الوقت, مثلما هو ممكن للتحقق من أكثر من مربعات اختيار داخل النموذج.
من ناحية أخرى ، لن تغلق علامات التبويب نفسها من تلقاء نفسها عندما ينقر المستخدم على علامة أخرى. منطق HTML هو نفسه كما كان من قبل ، فقط في هذه الحالة تحتاج إلى استخدام مربع الاختيار لنوع الإدخال.
عنوان المحتوى (لا تستخدم علامة h1 هنا)
بعض المحتوى ...
P>
ثابت مربع الاختيار الأكورديون
إذا كنت تريد علامات تبويب محتوى ذات ارتفاع ثابت ، فإن منطق CSS هو نفسه تمامًا كما في حالة زر الاختيار ، فقد تغير نوع الإدخال من الراديو إلى خانة الاختيار. في هذا القلم Codepen يمكنك إلقاء نظرة على الكود.
مربع الاختيار ارتفاع السوائل الأكورديون
عندما تفتح أكثر من علامة تبويب واحدة في نفس الوقت ، قد يؤثر عرض علامات تبويب الارتفاع الثابتة سلبًا على تجربة المستخدم نظرًا لأن ارتفاع الأكورديون قد ينمو بشكل كبير. يمكن تحسين هذا إذا كنت تغيير ارتفاع ثابت إلى ارتفاع السوائل. وهذا يعني أن علامات التبويب المفتوحة تتوسع أو تتقلص وفقًا لحجم المحتوى الذي تحتفظ به.
للقيام بذلك تحتاج إلى قم بتعديل الارتفاع الثابت لمحتوى علامة التبويب إلى أقصى ارتفاع, و استخدام الوحدات النسبية:
الإدخال: محدد ~ .tab-content max-height: 50em؛
إذا كنت ترغب في فهم كيفية عمل هذه الطريقة بشكل أفضل ، يمكنك إلقاء نظرة على Codepen هذا.
3. الطريقة: الهدف
: الهدف هو أحد محددات CSS3 المزيفة. بمساعدتها ، يمكنك ربط عنصر HTML بعلامة ربط بالطريقة التالية:
عنوان التبويب
محتوى علامة التبويب
عندما ينقر المستخدم على عنوان علامة تبويب ، سيتم فتح القسم بالكامل بفضل :استهداف محدد الزائفة ، وسيتم تغيير عنوان URL أيضًا إلى التنسيق التالي: www.some-url.com/#tab-1.
علامة التبويب المفتوحة يمكن تصميمها في CSS بمساعدة القسم: الهدف ... قاعدة. لدينا برنامج تعليمي رائع هنا على hongkiat حول كيفية إنشاء أكورديونات CSS فقط لطيفة مع :استهداف الطريقة في كل من التخطيطات الرأسية والأفقية.
العيب الرئيسي لل :استهداف الطريقة هي ذلك يغير عنوان URL عندما ينقر المستخدم على علامات التبويب. يؤثر هذا على محفوظات المستعرض ولن يقوم زر الرجوع في المتصفح بنقل المستخدم إلى الصفحة السابقة ، ولكن إلى الحالة السابقة للأكورديون.
4. إن: تحوم الأسلوب
يمكن التغلب على هذا القصور الأخير إذا استخدمنا :يحوم CSS شبه محدد بدلاً من :استهداف, ولكن في هذه الحالة ، لن تتفاعل علامات التبويب مع النقر ولكن على حدث التحويم. الحيلة هنا هي أنك تحتاج إلى إما إخفاء العناصر التي لم يتم كشفها, أو تقليل عرضها أو ارتفاعها - اعتمادا على تخطيط علامات التبويب
يجب أن يكون العنصر الذي تم تمريره مرئيًا ، أو يجب ضبطه على العرض / الارتفاع الكامل من أجل جعل الأكورديون يعمل.
تم إجراء الأكورديون الثلاثة التالية فقط في CSS باستخدام: طريقة التحويم ، انقر فوق الروابط الموجودة أسفل لقطات الشاشة لإلقاء نظرة على الكود.
الصورة الأفقية الأكورديون
منحرف الأكورديون
تحوم تنشيط الأكورديون مع الدولة الافتراضية
