ਕਿਵੇਂ ਬਣਾਓ: ਮੇਨੂ ਆਇਕਾਨ

ਕਿਵੇਂ ਮੇਨੂ ਆਇਕਾਨ ਬਣਾਓ

پہلی قدم - ایچ تی ایم ایل اضافے:

<div></div>
<div></div>
<div></div>

دوسری قدم - سی ایس ایس اضافے:

دیوی {
  وسیع: 35پیکس;
  کوئی: 5پیکس;
  بگھر رنگ: بلک;
  مارگن: 6پیکس 0;
}

آپ خود کا تجربہ کریئن

مثال توضیح:

وسیع اور کوئی پرزنٹیشن کیا جاتا ہے کہ ہر بند کی وسیع اور کا جائیگا۔

ہم نے کالے رنگ کا پس منظر اور اوپر نیچے کی برون مارگ اضافے کی ہیں تاکہ ہر بند کے درمیان فاصلہ بنایا جائے گا۔

آنیماٹک آئیکن

سی ایس ایس اور جاوا اسکریپٹ کا استعمال کریئن تاکہ کلک کی جب، منو آئیکن کو 'منسوخ/محو' آئیکن میں تبدیل کیا جائے:

پہلی قدم - ایچ تی ایم ایل اضافے:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

دوسری قدم - سی ایس ایس اضافے:

.container {
  ڈسپلے: ان لائن بلوک;
  کورسر: پوائنٹر;
}
.bar1, .bar2, .bar3 {
  وسیع: 35پیکس;
  کوئی: 5پیکس;
  بگھر رنگ: #333;
  مارگن: 6پیکس 0;
  ترنسیشن: 0.4س;
}
/* پہلا بار کو چکر لگائی جائیگا */
.change .bar1 {
  ترنسمفارم: ترانسلیٹ(0, 11پیکس) روتین(-45درجہ);
}
/* دوسری بار کو بچھائی جائیگا */
.change .bar2 {opacity: 0;}
/* آخری بار کو چکر لگائی جائیگا */
.change .bar3 {
  ترنسمفارم: ترانسلیٹ(0, -11پیکس) روتین(45درجہ);
}

تیسری قدم - جاوا اسکریپٹ اضافے:

function myFunction(x) {
  x.classList.toggle("change");
}

آپ خود کا تجربہ کریئن

مثال توضیح:

ایچ تی ایم ایل اور سی ایس ایس: ہم نے پچھلے کی طرح کی طرح کی انداز استعمال کی، لیکن اس بار ہم نے ہر <div> علامت کو ایک کمپوزنٹ علامت کاربر میں پیچھے لایا اور ہر علامت کو ایک کلاس نا م طے کیا۔

کمپوزنٹ علامت کاربر کو استعمال کیا جاتا ہے کہ وہارکش کو دکھائی دے جائے جب آپ کا موس دکھائی دینے والی علامت پر آیا جاتا ہے۔ جب وہ کلک کیا جاتا ہے تو وہ ایک جاوا اسکریپٹ فانکشن کو چلائے گا جس میں وہ ایک نئی کلاس نا م اضافے گا جس سے ہر عمودی بند کا انداز تبدیل ہوجائے گا: پہلا اور آخری بند کو تبدیل کیا جائے گا اور وہ 'x' حرف کی شکل میں چکر لگائی جائے گا۔ وسطی بند کو بچھائی جائیگی اور وہ ناپید ہوجائیگا۔