Navigation လွလွေလး ဖန္တီးၾကရေအာင္
(သင္ခန္းစာ မစခင္မွာ ႀကိဳတင္ေျပာထား ခ်င္တာေလး ရွိပါတယ္၊ ယခုလက္ရွိ facebook မွာ တင္ရတာ ျဖစ္တဲ့အတြက္ ပံုနဲ႔တကြ ေဖာ္ျပဖို႔ အခက္အခဲ ရွိပါတယ္၊ note အေနနဲ႔တင္ရင္ ျဖစ္ေသာ္လဲ note အေနနဲ႔ တင္ရင္ စိတ္၀င္စားမႈ နည္းတဲ့အတြက္ လက္ရွိ သင္ခန္းစာေတြကို pdf file နဲ႔ ေအာက္မွာ တင္ေပးထားမွာ ျဖစ္သလို ေရးၿပီးသား ကုဒ္ေတြကိုလဲ အလြယ္တကူ Download ရယူၿပီး စမ္းသပ္ ၾကည့္ႏိုင္ ပါတယ္၊ ဒါကိုမွ နားမလည္ႏိုင္ေသးဘူး ဆိုရင္ေတာ့ comment ခ်န္၍ ေသာ္လည္းေကာင္း၊ brightermyanmar@gmail.com သို႔ email ပို႔၍ ေသာ္လည္းေကာင္း ေမးျမန္းႏိုင္ပါေၾကာင္း ႀကိဳတင္ အသိေပးအပ္ ပါတယ္ခင္ဗ်ာ)
သင္ခန္းႏွင့္ ပါတ္သက္လို႔ နည္းနည္းေလး ေျပာခ်င္ပါတယ္။ HTML ကို CSS နဲ႔ အလွဆင္ရာမွာ Inline style, Internal style ႏွင့္ External style ဟူ၍ (၃) မ်ိဳး ရွိေသာ္လည္း External style ကိုပဲ အသံုးျပဳ သြားပါမယ္။
ပထမဆံုး HTML file ကို ေအာက္ပါအတိုင္း တည္ေဆာက္ပါမယ္။
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Brighter Myanmar</title>
</head>
<body>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</nav>
</body>
</html>
အထက္ပါကုဒ္ကို မိမိႏွစ္သက္ရာ file name ေပးၿပီး .html ျဖင့္ save လိုက္ပါ။
ေနာက္တစ္ဆင့္ အေနနဲ႔ Css file ကို တည္ေဆာက္ရပါမယ္။ file နာမည္ကို style.css လို႔ နာမည္ေပး ပါမယ္။ ၎ file ကို HTML file နဲ႔ ခ်ိပ္ဆက္ အလုပ္လုပ္ရန္ ေအာက္ပါအတိုင္း <header> tab အတြင္းမွ </title> အပိတ္ေအာက္မွာ ေရးပါမယ္။
<title>Brighter Myanmar</title>
<link rel="stylesheet" href="style.css" />
CSS file တည္ေဆာက္ျခင္း စတင္ၾကရေအာင္။
ပထမဆံုး Css တည္ေဆာက္တိုင္း ေအာက္ပါ code ကို ထည့္သင့္ပါတယ္။
*{
margin:0;
padding:0;
}
select လုပ္ထားတဲ့ selector * ေလးကေတာ့ body အတြင္းမွ tab ေတြ အားလံုးကို select မွတ္တဲ့ အဓိပၸါယ္ပါပဲ။ ဘာလို႔ margin:0; , padding:0; ထားတာလဲဆိုေတာ့ နဂိုမူလအတိုင္းဆို <html> ႏွင့္ </html> အၾကားက tab ေတြ တစ္ခုနဲ႔တစ္ခုၾကား အလိုအေလွ်ာက္ 5- pixels(5px) ကြာေ၀းေနမွာျဖစ္ ပါတယ္။
ေနာက္ပိုင္း Website တစ္ခုလံုး တည္ေဆာက္ရာမွာ tab ေတြအားလံုးရဲ့ margin ႏွင့္ padding ေတြရဲ့ တန္ဖိုးကို လိုအပ္သလို သတ္မွတ္ေပးမွာ ျဖစ္ပါတယ္။
လက္ရွိအခ်ိန္မွာ run ၾကည့္လိုက္ရင္ေတာ့ အရင္ပံုစံနဲ႔မတူဘဲ margin:0 ရဲ့ အဓိပၸါယ္ကို သိရမွာျဖစ္ပါ တယ္။ maring ကို 0 ထားလိုက္တဲ့အတြက္ အေပၚဘက္နဲ႔ ဘယ္ဘက္မွာ ေဘာင္ကပ္သြားတာ ကိုေတြ႔ရ ပါတယ္။
ေနာက္တစ္ဆင့္အေနနဲ႔ Navigation ရဲ့ အက်ယ္နဲ႔ ေနာက္ခံအေရာင္ကို ေအာက္ပါအတိုင္း ေပးပါမယ္။
nav{
width:1000px;
background:skyblue;
margin:0 auto;
}
အထက္ပါကုဒ္မွာ margin:0 auto; ဆိုတာကို ရွင္းပါမယ္ ေရွ႕က 0 က အထက္နဲ႔ေအာက္ဘက္ရဲ့ margin ကို 0 ထားမယ္လို႔ ေျပာပါတယ္၊ ေနာက္က auto ဆိုတာကေတာ့ ဘယ္ဘက္နဲ႔ ညာဘက္ကို အလိုလို တစ္၀က္ဆီ ခြဲလိုက္တာပါပဲ။
ေနာက္ တစ္ဆင့္အေနနဲ႔ ေအာက္ပါ ကုဒ္ကို ေရးပါမယ္။
ul li{
width:200px;
background:chocolate;
line-height:35px;
text-align:center;
list-style:none;
}
List item တစ္ခုခ်င္းဆီရဲ့ အက်ယ္ကို ၂၀၀ ထားပါမယ္၊ ဘာလို႔လဲဆိုေတာ့ nav ရဲ့ အက်ယ္ကို ၁၀၀၀ ေပးခဲ့လို႔ပါပဲ၊ list item က ၅ ခု ယူထားတဲ့အတြက္ တစ္ခုကို ၂၀၀ ေပးပါတယ္။
ေနာက္တစ္ခုက list ရဲ့ ေနာက္ခံအေရာင္ကို chocolate ဆိုတဲ့ အေရာင္ေပးပါမယ္။ အေရာင္စပ္တာ ညံ့သည့္အတြက္ အေရာင္ေတြကို နာမည္ေတြနဲ႔ပဲ အမ်ားဆံုး အသံုးျပဳသြားမွာပါ။ ေနာက္တစ္ေၾကာင္းျဖစ္ တဲ့ line-height ဆိုတာကေတာ့ list ရဲ့ အထက္ေအာက္ အက်ယ္ပါပဲ၊ ဒီေနရာမွာ height ကိုသံုးရင္ list ရဲ့အထဲက စာလံုးေတြ (Content)ဟာ အထက္ေအာက္ အလယ္မွာေနရာယူမွာမဟုတ္ပါဘူး၊ ဒါေၾကာင့္ line-height ကို သံုးရတာပါ။ ေနာက္တစ္ခု text-align:center; ဆိုတာကေတာ့ list item ရဲ့ width အက်ယ္ 200 pixel ရဲ့အလယ္မွာ ေနရာယူမယ္လို႔ ဆိုလိုပါတယ္။ ေနာက္တစ္ခု list-style:none; ဆိုတာကေတာ့ list တစ္ခုခ်င္းဆီရဲ့ေရွ႕က အစက္အေပ်ာက္ေလးေတြကို ေဖ်ာက္တာပါပဲ၊ ဒီေနရာမွာ မေဖ်ာက္ခ်င္ဘဲ တျခား စတိုင္ေလးေတြလဲ သံုးလို႔ရပါတယ္။ ဒါေတြကေတာ့ square, circle,disc စတာ ေတြလဲ အသံုးျပဳႏိုင္ပါတယ္။
ေနာက္ တစ္ဆင့္အေနနဲ႔ vertical လိုက္ျဖစ္ေနတဲ့ list ေတြကို horizontal အျဖစ္ေျပာင္းလဲေစဖို႔ အထက္ပါကုဒ္ ေအာက္မွာပဲ float:left; ကိုသံုးရပါမယ္။
float:left;
List items ေတြကို horizontal အျဖစ္ေျပာင္းလဲၿပီး ကၽြန္ေတာ္တို႔လိုခ်င္တဲ့ စတိုင္ လွလွေလးျဖစ္ေအာင္ ေအာက္ပါကုဒ္ေတြ ေရးရပါမယ္။
ul li{
width:200px;
background:chocolate;
line-height:35px;
text-align:center;
list-style:none;
float:left;
border-right:2px groove sienna;
-moz-box-sizing:border-box;
}
ul li:first-child{
border-left:2px groove sienna;
}
ul li a{
text-decoration:none;
}
border-right:2px groove black; ဆိုတာကေတာ့ List တစ္ခုခ်င္းဆီရဲ့ ညာဘက္မွာ border ေပးမွာ ျဖစ္ပါတယ္၊ border အထူကို 2px ေပးပါတယ္။ groove ဆိုတာကေတာ့ border ရဲ့ style ပါပဲ။ မ်ားေသာအားျဖင့္ ဒီေနရာမွာ solid ကိုသံုးၾကပါတယ္။ ကၽြန္ေတာ္ကေတာ့ ပိုလွေအာင္ groove ကို သံုးလိုက္ တာပါ။ sienna ဆိုတာကေတာ့ အေရာင္နာမည္တစ္ခုပါ။ chocolate ထက္ပိုၿပီးထင္တဲ့ အေရာင္ကိုေရြးထားတာျဖစ္ပါတယ္။ ေနာက္တစ္ခု -moz-box-sizing:border-box; ဆိုတာကို ေသခ်ာ ရွင္းျပပါမယ္။ ပံုမွန္အတိုင္းဆို border 2px ထည့္လိုက္ရင္ List ေတြရဲ့ width ဟာ 2px ဆီ ထပ္ၿပီးေတာ့ က်ယ္သြား ပါတယ္၊ ကၽြန္ေတာ္တို႔ nav ကို 1000px ယူခဲ့တဲ့အတြက္ List ၅ ခုအတြက္ 200px ဆီပဲရမွာပါ။ border အတြက္ 2px ထပ္ေပါင္းထည့္လိုက္ရင္ ေနာက္ဆံုး List ဟာ ေအာက္ကို အလိုလို ေရာက္သြားပါလိိမ့္မယ္၊ ဒါေၾကာင့္ box-sizing:border-box; ကိုသံုးရတာပါ။ဒီလိုသံုးလိုက္လို႔ border တစ္ခုခ်င္းဆီအတြက္ 2px ေနရာမယူေတာ့ပါဘူး၊ ေရွ႕ဆံုးက ေရးထားတဲ့ -moz- ဆိုတာကေတာ့ ဒီ box-sizing:border-box; ကုဒ္ကို Mozilla မွာ သံုးရင္ Mozilla က မသိမွာမို႔ Mozilla အတြက္ -moz- ကိုေရွ႕ဆံုးက ထည့္ေပးရတာပါ။ Google Chrome အတြက္ကေတာ့ -webkit- ကိုသံုးပါတယ္။ Internet Explorer အတြက္ -ms- ကိုသံုးပါတယ္ Opera အတြက္ -o- ကို ထည့္သြင္းေရးသားရမွာျဖစ္ပါတယ္။
ေနာက္တစ္ခုအေနနဲ႔ ul li:first-child{ border-left:2px groove sienna; } ဆိုတာကေတာ့ ပထမဆံုး List ရဲ့ ဘယ္ဘက္ကိုလဲ border 2px ေပးမယ္လို႔ ဆိုလိုပါတယ္။
ul li a{ text-decoration:none;} ဆိုတာကေတာ့ Home ဆိုတဲ့ စာသားေလးေတြရဲ့ ေအာက္က underline ေတြကို ေဖ်ာက္လိုက္တာျဖစ္ပါတယ္၊ ျပန္ထည့္ခ်င္တယ္ဆိုရင္ေတာ့ text-decoration:underline; ကို သံုးရမွာပါ။ underline အစား blink ဆိုတာကိုလဲ အသံုးျပဳႏိုင္ပါတယ္၊ blink ကိုသံုးလိုက္ရင္ေတာ့ စာလံုးေလးေတြက ေပၚလိုက္ ေပ်ာက္လိုက္ျဖစ္ေနမွာ ျဖစ္ပါတယ္။
ေနာက္ဆံုးအေနနဲ႔ ပံုမွာျပထားတဲ့အတိုင္း Navigation ေဘးဘက္ေတြမွာ အခၽြန္ေလးေတြ ထပ္ထည့္ ပါမယ္။ ဒီအခၽြန္ေလးေတြထည့္ဖို႔ ေရးနည္းမ်ိဳးစံုရွိတဲ့အထဲက အထက္မွာသတ္မွတ္ထားတဲ့ nav ရဲ့ width 1000 ကိုျပန္လည္ ျပင္ဆင္ျခင္းမရွိဘဲ လုပ္လို႔ရတဲ့ နည္းလမ္းကို သံုးသြားမွာပါ။ ဒီအတြက္ ေအာက္ပါ ကုဒ္ေတြ လိုပါတယ္။
nav:before{
content:"";
font-size:0px;
border:17.5px solid chocolate;
position:absolute;
right:100%;
border-left-color:transparent;
}
nav:after{
content:"";
font-size:0px;
border:17.5px solid chocolate;
position:absolute;
left:100%;
border-right-color:transparent;
}
အထက္ပါကုဒ္မွာ nav:before ဆိုတဲ့ selector ရဲ့အဓိပၸါယ္ကေတာ့ ေစာေစာကရွိၿပီးသား nav ရဲ့ေရွ႕မွာ ေနရာသတ္မွတ္လိုက္တာပါ။ ေနာက္ဆံုး result ပံုရဲ့ ေရွ႕ဆံုးက ၾတိဂံအခၽြန္ေလးရဖို႔ပါပဲ။ content:””; ဆိုတာကေတာ့ ဘာမွေရးမထားတဲ့ content တစ္ခုကိုသတ္မွတ္တာပါ။ ဒီဘာမွမရွိတဲ့ content ကိုပဲ ကၽြန္ေတာ္တို႔ Border ယူၿပီး သံုးသြားမွာပါ။ font-size:0px; ဆိုတာကေတာ့ လက္ရွိ content မွာ ဘာမွ မေရးဘဲ ဗလာျဖစ္ေနေပမယ့္ font-size ရဲ့ height ကို 16 pixel အလိုလိုယူထားျခင္းျဖစ္လို႔ font-size ကို 0 သတ္မွတ္ေပးရတာပါ။ ဒီေနရာမွာ နားမလည္ႏိုင္တာ တစ္ခုရွိပါလိမ့္မယ္။ font-size ကလဲ 0 ေပးထားတယ္၊ content မွာလဲ ဘာစာမွေရးမထားဘဲ ဘယ္လိုလုပ္ Border ေပးလို႔ရမလဲေပါ့၊ ဒါေပမယ့္ ရပါတယ္၊ ဘာမွမရွိဘူးဆိုေပမယ့္ အဲ့ဒီမရွိဘဲယူထားတဲ့ ေနရာေလးကိုပဲ Border ယူသြားတာပါ။ border:17.5px solid chocolate; ဆိုတာကေတာ့ border အထူကို 17.5px ထားပါမယ္။ ဘာလို႔လဲ ဆိုေတာ့ ကၽြန္ေတာ္တို႔ List ေတြရဲ့ height ကို 35px ထားခဲ့လို႔ပါပဲ။ 17.5px ရွိတဲ့ border ၂ ခုေပါင္း လိုက္မွ 35px အျမင့္ရွိတဲ့ List ရဲ့ height ကို မီမွာျဖစ္လို႔ပါ။ solid ဆိုတာကေတာ့ မ်ဥ္ေၾကာင္းလို႔ တစ္ဆက္တည္းယူတာပါ၊ chocolate ဆိုတာကေတာ့ List ရဲ့ အေရာင္နဲ႔တူေအာင္ ယူလိုက္တာပါ။
ဆက္ၿပီး position:absolute; ထားဖို႔အတြက္ nav မွာသြားၿပီး position:relative; ထားရပါမယ္။ ေအာက္ပါကုဒ္ကိုၾကည့္လိုက္ပါ။
position:relative;
selector တစ္ခုအတြင္းမွာ position ကို absolute ထားလိုက္ရင္ page တစ္ခုလံုးမွာ ႀကိဳက္ႏွစ္သက္တဲ့ ေနရာကိုေရႊ႕ႏိုင္ပါတယ္။ ဒါေပမယ့္ nav မွာ position:relative; ထားျခင္းအားျဖင့္ nav ကေနပဲ စမွတ္ ယူၿပီး ေရႊးလွ်ားမယ္လို႔ ဆိုလိုပါတယ္။ ခု လက္ရွိ right:100%; ထားလိုက္ျခင္းဟာ nav ဆိုတဲ့ Element တစ္ခုလံုး ရဲ့ ညာဘက္ကေန တစ္ရာ ရာခိုင္ႏႈန္းေရြ႕မယ္လို႔ဆိုလိုပါတယ္။ 100% ေရႊ႕လိုက္ရင္ 100% အေက်ာ္ျဖစ္တဲ့ nav ရဲ့ ဘယ္ဘက္မွာ လာကပ္မွာျဖစ္ပါတယ္။ ေနာက္တစ္ေၾကာင္းအေနနဲ႔ border-left-color:transparent; မွာ transparent ဆိုတာ ထိုးေဖာက္ျမင္ႏိုင္ျခင္း ဆိုတဲ့အဓိပၸါယ္အရ border ရဲ့ ဘယ္ဘက္က အေရာင္ကို ေဖ်ာက္ေပးလိုက္ျခင္းျဖစ္ပါတယ္။ ဒါေၾကာင့္ ကၽြန္ေတာ္တို႔လိုခ်င္တဲ့ အခၽြန္ေလး ရလာျခင္းျဖစ္ပါတယ္။
ေအာက္က nav:after ဆိုတဲ့အရာကလဲ nav:before နဲ႔အတူတူပါပဲ။ ဘယ္ညာပဲကြာသြားတာပါ။ ဒါေၾကာင့္ left ကို right ေျပာင္း ၊ right ကို left ေျပာင္းလိုက္ရင္ အဆင္ေျပသြားမွာပါ။ ဒီသင္ခန္းစာကို ဒီေလာက္နဲ႔ပဲ အဆံုးသတ္ပါရေစ။ ေနာက္ဆံုးလုပ္သြားခ်င္တာက ကၽြန္ေတာ္တို႔ရဲ့ Navigation ေလးကို အေပၚမွာ ကပ္မေနေစဘဲ ေအာက္ကို နည္းနည္းဆင္းသြားေစဖို႔ nav ရဲ့ margin top ကို 50px ထားလိုက္ ပါမယ္။
nav{
width:1000px;
background:skyblue;
margin:0 auto;
position:relative;
margin-top:50px;
}
အထက္ပါကုဒ္အတိုင္း margin-top:50px; ကိုမေရးဘဲ margin:0 auto; ေနရာမွာ margin:50px auto 0px; လို႔ျပင္လိုက္ရင္လဲ ရပါတယ္။ ဒါေပမယ့္ အထက္မွာေရးထားတာကို မျပင္ခ်င္တဲ့အတြက္ ေအာက္က တစ္ေၾကာင္း သီးသန္႔ေရးလိုက္ တာပါ။ ခုလိုဖတ္ေပးတာ ေက်းဇူးအမ်ားႀကီး တင္ပါတယ္ ခင္ဗ်ာ။ ေနာက္ရက္မွာ ဆက္လက္တင္ျပပါဦးမယ္။ နားမလည္တာမ်ားရွိခဲ့ရင္ facebook မွာ comment ခ်န္ခဲ့ျခင္းျဖင့္လည္းေကာင္း၊ brightermyanmar@gmail.com သို႔ စာေရးသားေပးပို႔၍လည္းေကာင္း ေမးျမန္ႏိုင္ပါတယ္ခင္ဗ်ာ။
ဒီပိုုစ့္ကိုု pdf ဖိုုင္ အျဖစ္ ေဒါင္းလုုဒ္လုုပ္လိုု ပါက ေအာက္ပါ လင့္တြင္း ေဒါင္းလုုပ္ ရယူႏုုိင္ပါသည္
ref;Brighter Myanmar
--------------------------------------
ကိုမ်ဳိး(lwanmapyay.blogspot.com) လြမ္းမေျပ သုတရပ္၀န္း | Facebook
ကိုမ်ဳိး(lwanmapyay.blogspot.com) လြမ္းမေျပ သုတရပ္၀န္း | Facebook