waing.1 photo jtjktyik_zps09901c53.gif

Friday, July 26, 2013

မုဒံုဝိုင္းေအာင္နည္းပညာ (AUniqueStyleDropDownBarNavigationMenuသံုးခ်င္ရင္)

၁။ေအာက္ကကုဒ္ကိုရွာပါ။

  1. ]]></b:skin>  
၂။ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။

  1. .nav {  
  2. height:35px;  
  3. background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bHqHuZvLPZ5J09oYKZyvZWLOpqWkEttQiz0Sg80mesyTWnT-BzJKTtzwR0bZV0XnqmUXiXeDHg3Wq3cYNMGHxCqYK7mBCwcv1Uabl9M5P5mFNDfF6qhqfteEfGjThcGoZllOLW_QTBI8/s1600/bg.gif) repeat-x;  
  4. position:relative;  
  5. font-family:arial, verdana, sans-serif;  
  6. font-size:11px;  
  7. width:100%;  
  8. z-index:100;  
  9. margin:0;  
  10. padding:0;  
  11. }  
  12.   
  13. .nav .table {  
  14. display:table;  
  15. margin:0 auto;  
  16. }  
  17.   
  18. .nav .select,  
  19. .nav .current {  
  20. margin:0;  
  21. padding:0;  
  22. list-style:none;  
  23. display:table-cell;  
  24. white-space:nowrap;  
  25. }  
  26.   
  27. .nav li {  
  28. margin:0;  
  29. padding:0;  
  30. height:auto;  
  31. float:left;  
  32. }  
  33.   
  34. .nav .select a {  
  35. display:block;  
  36. height:35px;  
  37. float:left;  
  38. font-weight:bold;  
  39. background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bHqHuZvLPZ5J09oYKZyvZWLOpqWkEttQiz0Sg80mesyTWnT-BzJKTtzwR0bZV0XnqmUXiXeDHg3Wq3cYNMGHxCqYK7mBCwcv1Uabl9M5P5mFNDfF6qhqfteEfGjThcGoZllOLW_QTBI8/s1600/bg.gif);  
  40. padding:0 30px 0 30px;  
  41. text-decoration:none;  
  42. line-height:35px;  
  43. white-space:nowrap;  
  44. color:#2b3238;  
  45. }  
  46.   
  47.   
  48. .nav .select a:hover,  
  49. .nav .select li:hover a {  
  50. background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTlsx6w_zCZCqD10Owz1Ask9F6O2TvIUedsYJihyZ1wK2fCKI8wil6KxtObPUJAwYXRd90f2yRS2N45tSoegxMx4HLg6KtPUFfVlDVW6-aIVYLQjC5l7HaYTjXnT8jp2fGURptqbGPhJc/s1600/hover.gif);  
  51. padding:0 0 0 15px;  
  52. cursor:pointer;  
  53. color:#2b3238;  
  54. }  
  55.   
  56. .nav .select a b{  
  57. font-weight:bold;  
  58. }  
  59.   
  60. .nav .select a:hover b,  
  61. .nav .select li:hover a b {  
  62. display:block;  
  63. float:left;  
  64. padding:0 30px 0 15px;  
  65. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTlsx6w_zCZCqD10Owz1Ask9F6O2TvIUedsYJihyZ1wK2fCKI8wil6KxtObPUJAwYXRd90f2yRS2N45tSoegxMx4HLg6KtPUFfVlDVW6-aIVYLQjC5l7HaYTjXnT8jp2fGURptqbGPhJc/s1600/hover.gif) right top;  
  66. cursor:pointer;  
  67. }  
  68.   
  69. .nav .select_sub {  
  70. display:none;  
  71. }  
  72.   
  73. /* IE6 only */  
  74. .nav table {  
  75. border-collapse:collapse;  
  76. margin:-1px;  
  77. font-size:1em;  
  78. width:0;  
  79. height:0;  
  80. }  
  81.   
  82. .nav .sub {  
  83. display:table;  
  84. margin:0 auto;  
  85. padding:0;  
  86. list-style:none;  
  87. }  
  88.   
  89. .nav .sub_active .current_sub a,  
  90. .nav .sub_active a:hover {  
  91. background:transparent;  
  92. color:#2b3238;  
  93. }  
  94.   
  95. .nav .select :hover .select_sub,  
  96. .nav .current .show {  
  97. display:block;  
  98. position:absolute;  
  99. width:100%;  
  100. top:35px;  
  101. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4FOIBQ6hoLGMWridz_7OwzPTeiZClbPIrG-985oefQnlL3Stb2_YsB1-iMvinjkJNMdJUwo5K4p5uDqAYDzjtunw6QPBD5R_M4RpeUDZ6M7gB4W_A62L1zN26HBQ1MEbAOZk3bKWDrjL/s1600/back.gif);  
  102. padding:0;  
  103. z-index:100;  
  104. left:0;  
  105. text-align:center;  
  106. }  
  107.   
  108. .nav .current .show {  
  109. z-index:10;  
  110. }  
  111.   
  112. .nav .select :hover .sub li a,  
  113. .nav .current .show .sub li a {  
  114. display:block;  
  115. float:left;  
  116. background:transparent;  
  117. padding:0 10px 0 10px;  
  118. margin:0;  
  119. white-space:nowrap;  
  120. border:0;  
  121. color:#2b3238;  
  122. }  
  123.   
  124. .nav .current .sub li.sub_show a {  
  125. color:#2b3238;  
  126. cursor:default;  
  127. }  
  128.   
  129. .nav .select .sub li a {  
  130. font-weight:normal;  
  131. }  
  132.   
  133. .nav .select :hover .sub li a:hover,  
  134. .nav .current .sub li a:hover {  
  135. visibility:visible;  
  136. color:#73a0d2;  
  137. }  
၃။ေအာက္ကကုဒ္ကိုျပထားတဲ့ပံုအတိုင္းထည့္ေပးလို္က္ပါ။



  1. <div class="nav">  
  2. <div class="table">  
  3.   
  4. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a></li></ul>  
  5.   
  6. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a>  
  7. <div class="select_sub">  
  8. <ul class="sub">  
  9. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  10. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  11. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  12.   
  13. <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li>  
  14. <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li>  
  15. </ul>  
  16. </div>  
  17. </li>  
  18. </ul>  
  19.   
  20. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a>  
  21. <div class="select_sub">  
  22. <ul class="sub">  
  23.   
  24. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  25. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  26. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  27. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  28. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  29. </ul>  
  30.   
  31. </div>  
  32. </li>  
  33. </ul>  
  34.   
  35.   
  36. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a>  
  37. <div class="select_sub">  
  38. <ul class="sub">  
  39. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  40. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  41. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  42.   
  43. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  44. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  45. </ul>  
  46. </div>  
  47. </li>  
  48. </ul>  
  49.   
  50.   
  51. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a>  
  52. <div class="select_sub">  
  53. <ul class="sub">  
  54.   
  55. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  56. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  57. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  58. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  59. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
  60. </ul>  
  61.   
  62. </div>  
  63. </li>  
  64. </ul>  
  65.   
  66. </div>  
  67. </div>  
က်ေနာ္အေပၚကကုဒ္မွာေရးထားသလိုလင့္ခ္ေတြကိုထည့္ျပီးရင္မုဒံုဝိုင္းေအာင္နည္းပညာေနရာေတြမွာမိမိရဲ႕လင့္ခ္အမည္ကိုေရးေပးပါ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊

0 တစ္ခုခုေရးထားခဲ့ပါ:

Post a Comment

ေျပာစရာမ်ားရွိရင္ေရးထားခဲ့ရန္

Related Posts Plugin for WordPress, Blogger...

Popular Posts