CSS တွင် မီနူးဖန်တီးခြင်း

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ဝဘ်ဆိုဒ်မီနူးများ ဖန်တီးခြင်းကို လေ့ကျင့်မည်။ ဥပမာအနေဖြင့် အောက်ပါမီနူးကို ပြုလုပ်ကြည့်ရအောင်:

ပထမဦးစွာ HTML အပိုင်းကို ပြုလုပ်ရန် လိုအပ်ပါသည်။ မီနူးရှိ လင့်ခ်များအားလုံးကို ထည့်သွင်းထားသော div တစ်ခု ဖန်တီးပါမည်:

html<div id="menu">
  <a href="#">link text 1</a>
  <a href="#">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

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

html<div id="menu">
  <a href="#">link text 1</a>
  <a href="#" class="active">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

ယခု ကျွန်ုပ်တို့၏ လင့်ခ်များကို တစ်တန်းတည်း ဖော်ပြပါမည်:

css#menu {
  display: flex;
}

ကျွန်ုပ်တို့၏ လင့်ခ်များ၏ style များကို ရေးသားပါမည်:

css#menu a {
  margin-right: 5px;
  padding: 10px;
  font: 15px Arial;
  text-decoration: none;
  color: #1437AD;
  border: 1px solid #1437AD;
  background-color: white;
}

လင့်ခ်များအား mouse တင်လိုက်ခြင်း (hover) တုံ့ပြန်မှု ဖန်တီးပါမည်:

css#menu a:hover {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

active link ၏ အသွင်အပြင်သည် mouse တင်လိုက်သော လင့်၏ အသွင်အပြင်နှင့် တူညီပါသည်။ ထို style နှစ်ခုကို အတူတကွ ပေါင်းစပ်ပါမည်:

css#menu a:hover, #menu a.active {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}

ကုဒ်အားလုံးကို အတူတကွ စုစည်းပြီး ကျွန်ုပ်တို့၏မီနူးအတွက် ကုဒ်ကို ရရှိပါမည်:

html<div id="menu">
  <a href="#">link text 1</a>
  <a href="#" class="active">link text 2</a>
  <a href="#">link text 3</a>
  <a href="#">link text 4</a>
  <a href="#">link text 5</a>
</div>

css#menu {
  display: flex;
}
#menu a {
  margin-right: 5px;
  padding: 10px;
  font: 15px Arial;
  text-decoration: none;
  color: #1437AD;
  border: 1px solid #1437AD;
  background-color: white;
}
#menu a:hover, #menu a.active {
  color: blue;
  border: 1px solid blue;
  background-color: #F5F6FA;
}