إنشاء أيقونة قائمة متحركة

 إنشاء أيقونة قائمة متحركة

كيفية إنشاء أيقونة القائمة

إذا كنت لا تستخدم مكتبة الرموز ، فيمكنك إنشاء رمز قائمة أساسي باستخدام CSS:

الشرح لرمز القائمة في المثال :

تحدد خاصية العرض والارتفاع عرض كل شريط وارتفاعه.

لقد أضفنا لون خلفية أسود ، ويتم استخدام الهامش العلوي والسفلي لإنشاء مسافة بين كل شريط.

أيقونة متحركة

استخدم CSS و JavaScript لتغيير رمز القائمة إلى أيقونة "إلغاء / إزالة" عند النقر فوقها

الخلاصة

HTML و CSS: نستخدم نفس الأنماط كما كان من قبل ، هذه المرة فقط ، نلف عنصر حاوية حول كل عنصر <div> ونحدد اسم فئة لكل منها.

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

المثال                 المصدر

واخيرا مبروك عليك الاداة ♥