Css နဲ႔ 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 ေလးေတြေရးထားပါတယ္။

About wailynnoo

wailynn oo has written 57 post in this Website..

I am a blogger.