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

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

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

<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 ကို အသုံးပြု၍ မှတ်သားလေ့ရှိပါသည်:

<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>

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

#menu {
	display: flex;
}

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

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

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

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

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

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

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

<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>

#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;
}