နည်းလမ်းများ ဖွင့်ပြခြင်း

နည်းလမ်းများကို ဖွင့်ပြခြင်း

သတ်မှတ်ချက် တတိယ - HTML ထပ်ပေါင်းပြီ

သတ်မှတ်ချက် တတိယ - CSS ထပ်ပေါင်းပြီ

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

ကိုယ်တိုင် ဆောင်ရွက်ကြည်း

အကြောင်းကြားချက်

width 和 height 属性指定每个条的宽度和高度。

我们添加了黑色背景颜色以及上下外边距，来创建每个条之间的间距。

လှည့်မှတ် ပုံသဏ္ဍာထာ

CSS နှင့် JavaScript ကို အသုံးပြု၍ အမှတ်အသားဆိုင်ရာ ပုံသဏ္ဍာထာ ကို "ဖျက်သိမ်း/ဖျက်သိမ်း" ပုံသဏ္ဍာထာ အဖြစ် ပြောင်းလဲပြီ

သတ်မှတ်ချက် တတိယ - HTML ထပ်ပေါင်းပြီ

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

သတ်မှတ်ချက် တတိယ - CSS ထပ်ပေါင်းပြီ

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* ပထမ ပိုင်း ပြိုကွဲခ�င်း */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* တတိယ ပိုင်း သန့်ကျင်းခြင်း */
.change .bar2 {opacity: 0;}
/* နောက်ဆုံး ပိုင်း ပြိုကွဲခြင်း */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

သတ်မှတ်ချက် တတိယ - JavaScript ထပ်ပေါင်းပြီ

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

ကိုယ်တိုင် ဆောင်ရွက်ကြည်း

အကြောင်းကြားချက်

HTML နှင့် CSS: မည်သည့် အသုံးပြုခြင်း ကို အသုံးပြုခဲ့ သော်လည်း၊ ဤ ကြိမ်မှာ မည်သည့် <div> အရာ ကို အပြင်အဆင်း အရာ တစ်ခု အပေါ် အသုံးပြုခဲ့ ပြီး မည်သည့် အရာ ကို အမည်ရိုး တစ်ခု ချီတည်း။

အသုံးပြုသူ မှတ်ချက်များ အပေါ် အမှတ်အသားဆိုင်ရာ အမှတ်အသားအရာ တစ်ခု ပြသတည်း။ အမှတ်အသားဆိုင်ရာ အရာ သတ်မှတ်ခဲ့ သောအခါ၊ အလွန်းပေါ် အရာ တစ်ခု ပြသတည်း။ အမှတ်အသားဆိုင်ရာ အရာ စွပ်စွဲ ပြီး စွပ်စွဲ ပြီး အလွန်းပေါ် အရာ ပြသတည်း။ အမှတ်အသားဆိုင်ရာ အရာ စွပ်စွဲ ပြီး အလွန်းပေါ် အရာ ပြသတည်း။ အမှတ်အသားဆိုင်ရာ အရာ စွပ်စွဲ ပြီး အလွန်းပေါ် အရာ ပြသတည်း။