Create a basic css horizontal menu

၁ - horizontal menu ကို စဖို႔ HTML list ကို ဖန္တီးမယ္။
ေအာက္ပါပံုစံေလးပါ။




<ul id="css_horizontal_menu">
<li><a href="#" class="first">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

အေျဖကေတာ့

• link1
• link2
• link3
• link4

အဲလိုရလာမွာပါ။

1.ကၽြန္ေတာ္တို႔ HTML မွာတုန္းက

<ul id="css_horizontal_menu"> လို႔ အသံုးျပဳခဲ့ပါတယ္။
 အခု CSS မွာပါ။ ေအာက္ပါတိုင္း ေရးပါမယ္။

#css_horizontal_menu{
/*specify here a width for a horizontal menu at fixed measure*/
/*1. remove the default list bullets*/
list-style:none;
/*2. method to avoid that the background of the div container collapse with floated elements*/
overflow:hidden;
/*3. in relation to the above method, for Internet Explorer 6, we need to specify a width of 100%*/
width:100%;
/*4. margin value to null – needed for Internet Explorer*/
margin:0;
/*5. a space (padding) of 1 px between the list border and its content*/
padding:1px;
/*6. the background color of the menu*/
background-color:#FFFFFF;
/*7. a border of 1px around the menu*/
border:1px solid #437E7E;
} 

အခုေျဖကေတာ့

• link 1
• link 2
• link 3
• link 4

ဆိုၿပီး ျဖစ္သြားပါၿပီ။

2. <li> ေတြကို ျပဳပါမယ္။

#css_horizontal_menu li{
display:inline;
} 

3. HTML ရဲ႕ <a> ေတြကို ပံုစံ ( Style ) ျပင္မယ္။

 #css_horizontal_menu a{
/*1. convert the link from inline to block element so that we can next specify width/height*/
display:block;
/*2. the float left that will align the links horizontally*/
float:left;
/*3. a fixed width for al the links*/
/*for links adaptable in width to its text content, using padding-right without the width*/
width:60px;
/*4. the height*/
height:25px;
/*5. an empty space to the left of each link*/
margin-left:1px;
/*6. and a left space (padding) between the border and the text link*/
padding-left:15px;
/*7. background color of the links*/
background-color:#F0F7F7;
/*8. a left border of 10px*/
border-left:10px solid #C7E2E2;
/*9. the font family*/
font-family:arial;
/*10. the font size*/
font-size:10px;
/*11. convert the font to capital letter*/
text-transform:uppercase;
/*12. remove the text underline added by default to the links*/
text-decoration:none;
/*13. the color of the text links*/
color:#437E7E;
/*14. vertical align of the text link (value equal to the height)*/
line-height:25px;
} 

 ထြက္ေပၚလာတဲ့ အေျဖကေတာ့ ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။

• link 1
• link 2
• link 3
• link 4

 4. ေနာက္ဆံုး အဆံုးသတ္မွာေတာ့ mouse တင္လိုက္တဲ့အေျခအေနကို ျပဳျပင္ပါမယ္။

#css_horizontal_menu a:hover{
/*1. change of background color*/
background-color:#E5E5E5;
/*2. change of the left border color*/
border-left:10px solid #CCCCCC;
/*3. change the color of the text link*/
color:#666666;
} 

5. အခုအၿပီးသတ္မွာ ေအာက္ပါကုဒ္ကို ထပ္ျဖည့္မယ္။

#css_horizontal_menu a.first{
margin-left:0;
} 

 ကဲ . . . ေနာက္ဆံုး ထြက္ေပၚ လာတဲ့ ကုိေတာ့ ကိုယ္တိုင္ပဲ စမ္းသပ္ၾကည့္လုိက္ပါ။

---------------------------------------------------

မူရင္း - http://css.flepstudio.org/en/css-tutorials/horizontal-menu.html

- အဆင္ေျပေအာင္ ဘာသာျပန္ျခင္းသာျဖစ္ပါတယ္

တိုးတက္ေအာင္ျမင္ၾကပါေစ။

ကိုယ္ခ်င္းစာသူ

contact - kochinsarthu@gmail.com