♫♪၀ါသနာတူMember ၀င္ထားၾကတဲ့ မိတ္ေဆြမ်ား♪♫

10/07/2012

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



၁။Design

၂။Edit HTML

၃။ေအာက္က Code ကိုရွာပါ။
  1. </head>  
၄။ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္က Code ကိုထည့္လိုက္ပါ။


  1. <style type='text/css'>  
  2. #foxmenucontainer{  
  3. height:29px;  
  4. background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwyU1a1gbOI/AAAAAAAAAUk/L3j02eS_vEs/menu.jpg) 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://1.bp.blogspot.com/_4HKUHirY_2U/SwyU4P9aMgI/AAAAAAAAAUs/Q5AkIuvWg3g/menuhov.jpg) 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://4.bp.blogspot.com/_4HKUHirY_2U/SwyU1a1gbOI/AAAAAAAAAUk/L3j02eS_vEs/menu.jpg) 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://1.bp.blogspot.com/_4HKUHirY_2U/SwyU4P9aMgI/AAAAAAAAAUs/Q5AkIuvWg3g/menuhov.jpg) 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>  
၅။Save Tamplate ႏိုပ္လိုက္ပါ။

၆။Design

၇။။Add a Gadget

၈။HTML/JavaScript Add ေနရာမွာေအာက္ကCode ထည့္ေပးလိုက္ပါ။
  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-->    
၉။။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။ ။


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

0 comments:

Post a Comment

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္. ♪♫#*♥winaung♥*#♫♪...၏

ဆိုဒ္ေလးမွေႏြးေထြးစြာၾကိဳဆိုပါ၏..သည္ဆိုဒ္ေလးစတင္သည္ခုႏုစ္

(03/october/2012)မွသည္ဆိုဒ္ေလးသည္နည္းပညာမ်ား

ဆာ႕၀ဲလ္းမ်ားေလ႕လာရွာေဖြရင္းစတင္စုေဆာင္ထာသည္ဆိုဒ္ေလးၿဖစ္ပါသည္..

ကၽြန္ေတာ္လိုခ်င္တဲ႕ခ်ိန္မွာရွာရတာလြယ္ကူေအာင္.သည္ေနရာေလးမွာစုထာခ်င္းၿဖစ္ပါသည္...

မိတ္ေဆြမ်ားလဲလိုခ်င္တာမ်ားခြင္႕ေတာင္းစရာမလိုယူသြားႏိုင္ပါသည္ .....ရႊင္လန္းခ်မ္းေၿမ႕ပါေစ..

မိမိဘေလာ့ကို submit မွန္မွန္ လုပ္ေပးျခင္းျဖင့္ မိမိဘေလာ့ ျမန္ဆန္မည္ရွင္းလင္းမည္ ေမာက္တင္ျပီး က်လာတဲ့ေဘာက္ထဲမွာ မိမိဘေလာ့လိပ္စာ ထည့္ကာ Submit ကလစ္လိုက္ပါ ဒါဆို ေနာက္ဇယားတစ္ခုမွ သင့္အီးေမးကို ထည့္ျပီးSubmit လုပ္လိုက္ပါ

<<<အထူးဧည့္ သည္ေတာ္မ်ား>>> Flag Counter

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites