CSS နဲ့ menu လှလှ လုပ်ကြမယ်။
wailynnooCss နဲ့ menu လေးတစ်ခုတည်ဆောက်ကြည့်ရအောင်ပါ။ ကျွန်တော်တို့ menu လေးကိုပုံတွေမသုံးဘဲအလှပဆုံး ဖြစ်အောင်တည်ဆောက်ထားပါတယ်။
ပြီးရင်တော့ ဒီလိုမြင်ရပါမယ်။
coding ကတော့ဒီလိုပါ။
<html>
<head>
<title>css menu</title>
<style>
ul {
list-style: none; ကျွန်တော်တို့ list ကို အစက်မပါအောင် list-style ကို none ပေးထားရပါတယ်။
margin: 0;
padding: 0;
}
#menu {
width: 200px; ကျွန်တော်တို့ menu တစ်ခုလုံးရဲ့ အကျဉ်းအကျယ်ကို ဒီနေရာမှာ လုပ်နိုင်ပါတယ်။
border-style: solid; menu ရဲ့ ပတ်ပတ်လည်က boder ရဲ့ style ပေါ့ အစက်ကလေးတွေဖြစ်စေချင်ရင် dotted လို့ပြောင်းလိုက်ပါ။
border-color: blue; menu ရဲ့ ပတ်ပတ်လည်က boder ရဲ့ ရောင်ပေါ့။
border-width: 1px; menu ရဲ့ ပတ်ပတ်လည်က boder ရဲ့ အကျယ်ပါ။
}
#menu li a { menu div ထဲက li ထဲမှာရှိနေတဲ့ link tag တွေကို effect ဖြစ်စေပါတယ်။
color: #666666; text အရောင်ကို အညိုရောင်ပေါ်စေပါတယ်။
display: block;
height: 24px;
background-color:skyblue;
border-bottom-style:solid; ဒါကတော့ menu ထဲက link တစ်ခုနဲ့ တစ်ခုကြားက အပြာရောင်မျဉ်းကြောင်းကို ဖြစ်ပေါ်စေဖို့ပါ။
border-bottom-color: blue; ဒါကတော့ menu ထဲက link တစ်ခုနဲ့ တစ်ခုကြားက မျဉ်းကြောင်းလေးရဲ့ အရောင်ပေါ့။
border-bottom-width:1px; ဒါကတော့ menu ထဲက link တစ်ခုနဲ့ တစ်ခုကြားက မျဉ်းကြောင်းလေးရဲ့ အကျယ်ပေါ့။
text-decoration: none; link text ကဲ့အောက်မှာမျဉ်းတားထားတာလေး မပါအောင်ပါ။ none လိုပြောမထားရင် auto မျဉ်းတားထားလို့ပါ။
padding: 8px 0px 0px 20px; /* top right bottom left */ ဒါကတော့ link text ပေါ်မဲ့နေရာကို အပြောင်းအလဲလုပ်လို့ရပါတယ်။
}
#menu li a:hover { menu div ထဲက li ထဲမှာရှိနေတဲ့ link tag တွေပေါ်ကို mouse တင်လိုက်တဲ့အခါ effect ဖြစ်စေပါတယ်။
color: #fff; mouse တင်လိုက်တဲ့အခါ ပြောင်းလဲသွားတဲ့ link text ရဲ့အရောင်ပါ။ (အဖြူ)
background-color:blue; mouse တင်လိုက်တဲ့အခါ ပြောင်းလဲသွားတဲ့ background ရဲ့အရောင်ပါ။
padding: 8px 0px 0px 20px; /* top right bottom left */
}
#menu li a:active { menu div ထဲက li ထဲမှာရှိနေတဲ့ link tag တွေacitve ဖြစ်သွားတဲ့အခါ effect ဖြစ်စေပါတယ်။
color: #fff;
background-color:blue;
padding: 8px 0 0 20px; /* top right bottom left */
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Html</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="http://webtut.6te.net/" title="Web Development for Myanmar">Wai Lynn Oo</a></li>
</ul>
</div>
</body>
</html>
ကျွန်တော်မြန်မာလို comment လေးတွေရေးထားပါတယ်။