كيفية إنشاء الأكورديون المحتوى القائم على CSS
في البرنامج التعليمي اليوم ، سنتعلم كيف يمكننا إنشاء الأكورديون المحتوى الأفقي والرأسي فقط باستخدام CSS3. هناك العديد من الإضافات jQuery التي يمكنها القيام بهذه المهمة نيابة عنك ولكن ماذا تفعل إذا تم إيقاف تشغيل Javascript ، فلن يعمل الأكورديون بشكل صحيح. إذا كان الأكورديون الخاص بك في CSS بحتًا ، فسيعمل مع جميع زوار موقعك.
نحن بصدد إنشاء أفقي و عمودي الأكورديون المحتوى. عند النقر فوق نص العنوان ، ستفتح الشريحة عرض المحتوى بالكامل ، وإليك معاينة سريعة (لقطات) كيف تبدو.
مثل ما ترى؟ دع الترميز يبدأ!
1. إعداد HTML والمحتوى
بادئ ذي بدء ، سنقوم بإنشاء HTML من أجل الأكورديون.
الهيكل يحتاج حاوية شعبة وبعد ذلك أ الجزء لكل شريحة في الأكورديون. في هذا المثال ، سيكون لدينا 5 شرائح. سيكون لكل شريحة شريحة و فقرة للمحتوى.
معلومات عنا
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse id lobortis massa. Nunc viverra velit Leo ، والجلوس amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat يجادل dolor السيرة الذاتية adipiscing. Aliquam ac erat lorem، ut iaculis justo. إيتام ماتريس كريماتيم. Aliquam اللجنة الوطنية للانتخابات justo أنتي ، ميل غير semper. Nulla consectetur interdum massa، vel porta enim vulputate sed. Maecenas elit quam، egestas eget placerat non، fringilla vel eros. حركة عدم الانحياز. Phasellus eu erat enim. حاضر في magna non massa dapibus scelerisque في lorem eu.
خدمات
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse id lobortis massa. Nunc viverra velit Leo ، والجلوس amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat يجادل dolor السيرة الذاتية adipiscing. Aliquam ac erat lorem، ut iaculis justo. إيتام ماتريس كريماتيم. Aliquam اللجنة الوطنية للانتخابات justo أنتي ، ميل غير semper. Nulla consectetur interdum massa، vel porta enim vulputate sed. Maecenas elit quam، egestas eget placerat non، fringilla vel eros. حركة عدم الانحياز. Phasellus eu erat enim. حاضر في magna non massa dapibus scelerisque في lorem eu.
مدونة
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse id lobortis massa. Nunc viverra velit Leo ، والجلوس amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat يجادل dolor السيرة الذاتية adipiscing. Aliquam ac erat lorem، ut iaculis justo. إيتام ماتريس كريماتيم. Aliquam اللجنة الوطنية للانتخابات justo أنتي ، ميل غير semper. Nulla consectetur interdum massa، vel porta enim vulputate sed. Maecenas elit quam، egestas eget placerat non، fringilla vel eros. حركة عدم الانحياز. Phasellus eu erat enim. حاضر في magna non massa dapibus scelerisque في lorem eu.
محفظة
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse id lobortis massa. Nunc viverra velit Leo ، والجلوس amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat يجادل dolor السيرة الذاتية adipiscing. Aliquam ac erat lorem، ut iaculis justo. إيتام ماتريس كريماتيم. Aliquam اللجنة الوطنية للانتخابات justo أنتي ، ميل غير semper. Nulla consectetur interdum massa، vel porta enim vulputate sed. Maecenas elit quam، egestas eget placerat non، fringilla vel eros. حركة عدم الانحياز. Phasellus eu erat enim. حاضر في magna non massa dapibus scelerisque في lorem eu.
اتصل
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse id lobortis massa. Nunc viverra velit Leo ، والجلوس amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat يجادل dolor السيرة الذاتية adipiscing. Aliquam ac erat lorem، ut iaculis justo. إيتام ماتريس كريماتيم. Aliquam اللجنة الوطنية للانتخابات justo أنتي ، ميل غير semper. Nulla consectetur interdum massa، vel porta enim vulputate sed. Maecenas elit quam، egestas eget placerat non، fringilla vel eros. حركة عدم الانحياز. Phasellus eu erat enim. حاضر في magna non massa dapibus scelerisque في lorem eu.
الآن لدينا شرائح لدينا يمكننا أن نبدأ في نمط الأكورديون.
2. المغلق التصميم
أولا نحن بحاجة إلى أسلوب تحتوي على شعبة من الأكورديون. سيعطينا هذا فكرة عن كيفية عرض كل شريحة وكل عنوان من العناوين.
/ * Define Accordion box * / .accordion width: 830px؛ إخفاء الفائض؛ الهامش: 10px auto ؛ اللون: # 474747؛ خلفية: # 414141؛ الحشو: 10px؛
بعد ذلك ، سنقوم بإنشاء عناوين لكل شريحة.
.قسم الأكورديون float: left؛ إخفاء الفائض؛ اللون: # 333؛ المؤشر: المؤشر. الخلفية: # 333؛ هامش: 3PX. .accordion section: hover background: # 444؛
نقوم بتعيين لون الخلفية لتكون رمادية داكنة في القسم ليكون العنوان الرئيسي الذي سينقر فيه الزائرون لعرض الشريحة. نحن نستخدم هذا القسم لكل من العنوان والمحتوى مما يعني أننا قادرون على استخدام HTML أقل وإعادة استخدام عنوان الشريحة كعنوان للمحتوى.
.قسم الأكورديون p display: none؛
في الوقت الحالي ، سيتم إغلاق جميع الشرائح ، لذا نحتاج إلى التأكد من إخفاء الفقرة عن العرض حتى يتم فتح الشريحة ، لذلك في الوقت الحالي ، قم بتعيين عرض الفقرة على لا شيء..
.قسم الأكورديون: بعد موقف: نسبي ؛ FONT-SIZE: 24px؛ اللون: # 000؛ الخط الوزن: جريئة. . مقطع الأكورديون: nth-child (1): بعد content: '1'؛ . قسم الأكورديون: nth-child (2): بعد content: '2'؛ . قسم الأكورديون: nth-child (3): بعد content: '3'؛ . مقطع الأكورديون: nth-child (4): after content: '4'؛ . قسم الأكورديون: nth-child (5): after content: '5'؛
مع إغلاق الشرائح ، نريد أن نعرض رقمًا في أسفل العنوان لنقول الشريحة التي نشغلها. لهذا نستخدم CSS لإضافة محتوى بعد عنوان القسم ، ويمكن القيام بذلك باستخدام :بعد محدد الزائفة.
الآن أنشأنا العنوان الرئيسي للشريحة ، ويمكننا أن نجعل حدث النقر لعرض الشريحة في الأكورديون. ولكن هناك مشكلة ، CSS لا يحتوي على حدث نقرات ، ولهذا السبب يتم إنشاء الأكورديون بشكل طبيعي باستخدام jQuery حتى نتمكن من إرفاق حدث نقرة بنص العنوان.
نحتاج إلى تقليد حدث النقر في CSS والذي يمكن القيام به باستخدام :استهداف محدد الزائفة.
3. باستخدام :استهداف فئة الزائفة محدد
:استهداف يسمح لنا بنمط معرف الشظية. نستخدم أحيانًا علامة ربط على الصفحة للإشارة إلى مكان على الصفحة. على النقر على الرابط هوية شخصية في العلامة مرساة يصبح الهدف ويمكنك نمط هذا باستخدام :استهداف منتخب.
لإضافة هذا إلى الأكورديون ، نحتاج إلى إضافة رابط حول العنوان يشير إلى هوية شخصية الشريحة.
معلومات عنا
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Suspendisse id lobortis massa. Nunc viverra velit Leo ، والجلوس amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat يجادل dolor السيرة الذاتية adipiscing. Aliquam ac erat lorem، ut iaculis justo. إيتام ماتريس كريماتيم. Aliquam اللجنة الوطنية للانتخابات justo أنتي ، ميل غير semper. Nulla consectetur interdum massa، vel porta enim vulputate sed. Maecenas elit quam، egestas eget placerat non، fringilla vel eros. حركة عدم الانحياز. Phasellus eu erat enim. حاضر في magna non massa dapibus scelerisque في lorem eu.
.قسم الأكورديون: الهدف الخلفية: #FFF؛ الحشو: 10px؛ .accordion section: target: hover background: #FFF؛ . Accordion section: target h2 width: 100٪؛ .accordion section: target h2 a color: # 333؛ الحشو: 0؛ . Accordion section: target p display: block؛ .accordion section h2 a padding: 8px 10px؛ العرض محجوب؛ FONT-SIZE: 16px؛ الخط الوزن: عادي؛ اللون: #eee. النص الديكور: لا شيء؛
سيغير الرمز أعلاه حجم الشريحة ليلائم بقية الأكورديون ويغير لون الخلفية إلى اللون الأبيض. تم إخفاء الفقرة حتى الآن على الهدف نحتاج إلى عرض الفقرة.
الآن عند النقر فوق عنوان الأكورديون ، ستقوم الشريحة بتغيير النمط لعرض محتوى الشريحة.
4. الأفقي الأكورديون
الكود أعلاه سيخلق الأكورديون العام الآن يمكننا البدء في إجراء تغييرات CSS للاختلافات بين الأكورديون الأفقي والرأسي. كل من هذه الأكورديونات لديها نفس الوظيفة ولكن التصميم الرئيسي سيكون مختلفًا.
.القسم الأفقي العرض: 5 ٪ ؛ الطول: 250px؛ الانتقال -moz: العرض 0.2s التخفيف. -wkkit-الانتقالية: عرض 0.2s التخفيف. -o- الانتقال: عرض 0.2s التخفيف. الانتقال: العرض 0.2 ثانية التخفيف.
أولا وضعنا عرض قسم العنوان إلى 5 ٪ لذلك هو شريحة مغلقة. نظرًا لأن القسم هو العنوان ومحتوى الشريحة على حد سواء ، نحتاج إلى إضافة الرسوم المتحركة لعرض المحتوى باستخدام خاصية النقل.
/ * ضع رقم الشريحة * /. Horizontal section: after top: 140px؛ اليسار: 15px؛
سيكون موضع الرقم على الشريحة هو نفس الموضع في كل عنوان مغلق يتم وضعه بشكل مختلف عن العناوين الرأسية.
/ * رأس الشريحة المغلقة * /. القسم الأفقي h2 -webkit-convert: rotate (90deg)؛ -moz-تحويل: تدوير (90deg)؛ - تحويل: تدوير (90deg) ؛ تحويل: تدوير (90deg) ؛ العرض: 240px؛ الموقف: النسبية. اليسار: -100px. قمة: 85px؛ / * على الماوس فوق الشريحة المفتوحة * /. Horizontal: target width: 73٪؛ الطول: 230px؛ . Horizontal: target h2 top: 0px؛ اليسار: 0؛ -webkit-تحويل: تدوير (0deg)؛ -moz-تحويل: تدوير (0deg)؛ -o-convert: تدوير (0deg) ؛ تحويل: تدوير (0deg) ؛
سيتم تغيير الرمز أعلاه حجم الشريحة لتناسب بقية الأكورديون. تم تدوير العنوان بشكل رأسي لتدفق العنوان ولكن الآن مع فتح الشريحة ، نحتاج إلى تغيير النص مرة أخرى ليكون أفقيًا عن طريق تدوير النص مرة أخرى إلى 0 درجة.
5. الأكورديون العمودي
الأكورديون العمودي يعمل بنفس طريقة الأكورديون الأفقي إلا أننا بحاجة إلى تغيير ارتفاع بدلا من ال عرض ونحن لسنا بحاجة إلى تغيير محاذاة النص.
.القسم الرأسي العرض: 100 ٪ ؛ الطول: 40px؛ -wkkit-الانتقالية: ارتفاع 0.2s التخفيف. الانتقال -moz: ارتفاع 0.2s التخفيف. - الانتقال: ارتفاع 0.2s التخفيف. الانتقال: ارتفاع 0.2s التخفيف. / * تعيين ارتفاع الشريحة * / .vertical: الهدف ارتفاع: 250 بكسل ؛ العرض: 97٪؛
على ال استهداف حدث الأكورديون العمودي سنقوم بتغيير ارتفاع من العنوان لعرض الشريحة.
.القسم الرأسي h2 موقف: نسبي؛ اليسار: 0؛ أعلى: -15px. / * قم بتعيين موضع الرقم على الشريحة * / .vertical المقطع: بعد top: -60px؛ اليسار: 810px؛ .vertical section: target: after left: -9999px؛
ما سبق سوف يغير موضع نص العنوان على الشريحة المغلقة. مع الشريحة المغلقة نحتاج إلى ضبط موضع من الرقم الموجود على يمين الأكورديون. عندما تكون الشريحة مفتوحة ، نحتاج إلى إخفاء هذا الرقم على العنوان الرئيسي عند تعيين الهدف حتى نغير الموضع الأيسر من الشاشة.
الآن عند النقر فوق عنوان الأكورديون ، ستقوم الشريحة بتغيير النمط لعرض محتوى الشريحة.
ملحوظة المحرر: هذا هو مكتوب من قبل بول أندروود ل Hongkiat.com. بول هو مطور ويب PHP من بريستول ، المملكة المتحدة. يكتب دروسًا حول تطوير الويب: تشمل الموضوعات الرئيسية PHP و jQuery و CSS3 و HTML5. كما يسجل مقتطفات من التعليمات البرمجية المفيدة في Paulund.co.uk.
