လုပ်နည်း - Menu Icon
CSS ဖြင့် မီနူးအိုင်ကွန်တစ်ခု ဖန်တီးနည်းကို လေ့လာပါ။
Menu Icon တစ်ခုဖန်တီးနည်း
အိုင်ကွန်ဒစ်ဂျစ်တိုက်ကို အသုံးမပြုပါက၊ CSS ဖြင့် အခြေခံမီနူးအိုင်ကွန်ကို ဖန်တီးနိုင်သည်-
မီနူးအိုင်ကွန်-
Animated Menu Icon (၎င်းကိုနှိပ်ပါ)။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div></div>
<div></div>
<div></div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
နမူနာရှင်းပြထားပါတယ်။
width
နှင့် ပိုင်ဆိုင်မှု သည် height
ဘားတစ်ခုစီ၏ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်သည်။
ကျွန်ုပ်တို့သည် အနက်ရောင်တစ်ခုထည့်ထားပြီး ၊
ဘားတစ်ခုစီကြားရှိ အကွာအဝေးတစ်ခုကို ဖန်တီးရန်အတွက် background-color
အပေါ်နှင့်အောက်ခြေ ကို အသုံးပြုထားသည်။margin
ကာတွန်းအိုင်ကွန်
မီနူးအိုင်ကွန်ကို "ပယ်ဖျက်/ဖယ်ရှား" အိုင်ကွန်သို့ ပြောင်းလဲရန် CSS နှင့် JavaScript ကို အသုံးပြုပါ-
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
function myFunction(x) {
x.classList.toggle("change");
}
နမူနာရှင်းပြထားပါတယ်။
HTML နှင့် CSS- ကျွန်ုပ်တို့သည် ယခင်ကကဲ့သို့ ပုံစံများကို အသုံးပြုသည်၊ ယခုတစ်ကြိမ်သာ၊ ကျွန်ုပ်တို့သည် <div> ဒြပ်စင်တစ်ခုစီတွင် ကွန်တိန်နာဒြပ်စင်တစ်ခုကို ထုပ်ပိုးပြီး တစ်ခုစီအတွက် အတန်းအမည်ကို သတ်မှတ်ပေးပါသည်။
အသုံးပြုသူသည် divs (ဘားများ) ပေါ်တွင် mouse ကိုရွှေ့သည့်အခါ ကွန်တိန်နာဒြပ်စင်ကို ညွှန်ပြသင်္ကေတတစ်ခုပြသရန် အသုံးပြုသည်။ ၎င်းကို နှိပ်လိုက်သည့်အခါ၊ ၎င်းတွင် အတန်းအမည်အသစ်တစ်ခု ထပ်ထည့်မည့် JavaScript လုပ်ဆောင်ချက်ကို လုပ်ဆောင်မည်ဖြစ်ပြီး၊ အလျားလိုက်ဘားတစ်ခုစီ၏ စတိုင်များကို ပြောင်းလဲစေမည့်- ပထမနှင့် နောက်ဆုံးဘားကို အက္ခရာ "x" အဖြစ် ပြောင်းလဲကာ လှည့်ပတ်မည်ဖြစ်သည်။ အလယ်ရှိ ဘားသည် မှိန်သွားကာ မမြင်နိုင်သော ဖြစ်သွားသည်။