Horizontal Navigation Menuဘားလုပ္နည္း

၁။Design

၂။Edit HTML

၃။ေအာက္က Code ကိုရွာပါ။

1. </head>  

</head>

၄။ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္က Code ကိုထည့္လိုက္ပါ။

1. <style type='text/css'>  
2. #foxmenucontainer{  
3. height:29px;  
4. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ei24vJnviyVYiRbr3ew6bv8t19SUrI-tKYV1JzfL5mV-HBpMasOIFzY8R-V0hXKjEohFSkUmRIaIalUP0TxuNNlD_VkNiNHg6qL9itj8cgF3o_kHIB0v52KGtHfAevIA0KlG7SRgS8x5/) repeat-x;  
5. display:block;  
6. padding:0px 0 0px 0px;  
7. border-top:1px solid #474747;  
8. font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;  
9. font-weight:normal;  
10. }  
11.   
12. #menu ,#menu ul {  
13. margin: 0px 5px;  
14. padding: 0px;  
15. list-style: none;  
16. height:29px;  
17. }  
18.   
19. #menu a {  
20. color: #B3DBEF;  
21. display: block;  
22. font-weight: normal;  
23. padding: 4px 10px 6px 10px;  
24. }  
25.   
26. #menu a:hover {  
27. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCnJHhhc5ADLjPF0gnwkAkfIsI94F3Imo_yFIromsXuQ3-hHcDiprCLg4XOV1Xx-XBQ_Yvc25Tp8ZPAzobhsXiQAivlzjPcxiYFq27fJRK-jhs-XwACKtyS1cvz_HmebLXMZZXmEJCJDZA/) repeat-x;  
28. color: #fff;  
29. display: block;  
30. text-decoration: none;  
31. }  
32.   
33. #menu li {  
34. float: left;  
35. margin: 0px 0 0px 0;  
36. padding: 0px;  
37. }  
38.   
39. #menu li li {  
40. float: left;  
41. margin: px 0px 0px 5px;  
42. padding: 0px;  
43. width: 130px;  
44. }  
45.   
46. #menu li li a, #menu li li a:link, #menu li li a:visited {  
47. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ei24vJnviyVYiRbr3ew6bv8t19SUrI-tKYV1JzfL5mV-HBpMasOIFzY8R-V0hXKjEohFSkUmRIaIalUP0TxuNNlD_VkNiNHg6qL9itj8cgF3o_kHIB0v52KGtHfAevIA0KlG7SRgS8x5/) repeat-x;  
48. width: 150px;  
49. float: none;  
50. margin: 0px;  
51. padding: 4px 10px 5px 10px;  
52. color:#fff;  
53. }  
54.   
55. #menu li li a:hover, #menu li li a:active {  
56. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCnJHhhc5ADLjPF0gnwkAkfIsI94F3Imo_yFIromsXuQ3-hHcDiprCLg4XOV1Xx-XBQ_Yvc25Tp8ZPAzobhsXiQAivlzjPcxiYFq27fJRK-jhs-XwACKtyS1cvz_HmebLXMZZXmEJCJDZA/) repeat-x;  
57. width: 150px;  
58. float: none;  
59. margin: 0px;  
60. padding: 4px 10px 5px 10px;  
61. color:#06415F;  
62. }  
63.   
64. #menu li ul {  
65. position: absolute;  
66. width: 10em;  
67. left: -999em;  
68. z-index:1;  
69. }  
70.   
71. #menu li:hover ul {  
72. left: auto;  
73. display: block;  
74. }  
75.   
76. #menu li:hover ul, #menu li.sfhover ul {  
77. left: auto;  
78. }  
79. </style>  

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ei24vJnviyVYiRbr3ew6bv8t19SUrI-tKYV1JzfL5mV-HBpMasOIFzY8R-V0hXKjEohFSkUmRIaIalUP0TxuNNlD_VkNiNHg6qL9itj8cgF3o_kHIB0v52KGtHfAevIA0KlG7SRgS8x5/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCnJHhhc5ADLjPF0gnwkAkfIsI94F3Imo_yFIromsXuQ3-hHcDiprCLg4XOV1Xx-XBQ_Yvc25Tp8ZPAzobhsXiQAivlzjPcxiYFq27fJRK-jhs-XwACKtyS1cvz_HmebLXMZZXmEJCJDZA/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ei24vJnviyVYiRbr3ew6bv8t19SUrI-tKYV1JzfL5mV-HBpMasOIFzY8R-V0hXKjEohFSkUmRIaIalUP0TxuNNlD_VkNiNHg6qL9itj8cgF3o_kHIB0v52KGtHfAevIA0KlG7SRgS8x5/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCnJHhhc5ADLjPF0gnwkAkfIsI94F3Imo_yFIromsXuQ3-hHcDiprCLg4XOV1Xx-XBQ_Yvc25Tp8ZPAzobhsXiQAivlzjPcxiYFq27fJRK-jhs-XwACKtyS1cvz_HmebLXMZZXmEJCJDZA/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

၅။Save Tamplate ႏိုပ္လိုက္ပါ။

၆။Design

၇။။Add a Gadget

၈။HTML/JavaScript Add ေနရာမွာေအာက္ကCode ထည့္ေပးလိုက္ပါ။

view plainprint?

1. <!-kp-3နည္းပညာ-http://kp3family.blogspot.com-->   
2. <div id="foxmenucontainer">  
3.   
4. <div id="menu">  
5.   
6. <ul>  
7.   
8. <li><a expr:href="data:blog.homepageUrl">kp3နည္းပညာ</a></li>  
9.   
10. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
11.   
12. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a>  
13. <ul>  
14. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
15. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
16. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
17. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
18. </ul>  
19. </li>  
20.   
21. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
22.   
23. <li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
24.   
25. <li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
26.   
27. <li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
28.   
29. <li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>  
30.   
31. </ul>  
32.   
33. </div>  
34.   
35. </div>  
36. <!--kp3CSS Horizontal Navigation Menu-http://kp3family.blogspot.com-->    

<!-kp-3နည္းပညာ-http://kp3family.blogspot.com--> 
<div id="foxmenucontainer">

<div id="menu">

<ul>

<li><a expr:href="data:blog.homepageUrl">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a>
<ul>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
</ul>
</li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

</ul>

</div>

</div>
<!--kp3CSS Horizontal Navigation Menu-http://kp3family.blogspot.com-->  

၉။။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။ ။


မွတ္ခ်က္။ ။http://kp3family.blogspot.com ေနရာေတြမွာမိမိရဲ႕လင့္ခ္ေတြနဲ႕အစားထိုးေပးလိုက္ပါ။

Posted in: Menuဘားလုပ္နည္း