kp3နည္းပညာ၊၂၅၁၊ဘေလာ့မွာ KP-3 ရဲ႕ Horizontal Menu အသစ္ေလးသံုးခ်င္၇င္

အခုတင္တဲ့ Post ေလးကကေတာ့ဘေလာ့မွာ Horizontal Menu ကိုသံုးခ်င္တဲ့မိတ္ေဆြေတြအတြက္ပါ။ ဘေလာ့ႏွင့္၀က္ဆိုက္ဒ္တခုလံုးျပည့္စံုလွပေစေအာင္ Mune ကလည္းတကယ့္ကိုအေရးၾကီးဆံုးနဲ႕အဓိက လို႕ေျပာလို႕ရပါတယ္။ဒါေၾကာင့္အခုေနာက္ပိုင္းရတဲ့အခ်ိန္ေလးေတြမွာ Menu ပိုင္းေတြကိုဘဲတင္ျဖစ္ဖို႕ မ်ားမယ္ထင္ပါတယ္။သြားၾကည့္လို႕ရေအာင္ DEMO လင့္ခ္ေပးထားပါတယ္။

ဒီမွာသြားၾကည့္လိုက္ပါ။

၁။ Layout

၂။Edit HTML

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

]]></b:skin>

ေတြ ့ျပီဆို၇င္အေပၚမွာေအာက္က Css Code ကိုထည့္ေပးလိုက္ပါ။

#painters2 {
  padding:0;
  margin:0;
  list-style-type:none; 
  }
#painters2 li {
  width:75px; 
  height:20px; 
  float:left;
  border:1px solid #000;
  margin-right:2px;
  }
#painters2 a em {
  font-style:normal; 
  font-size:1em; 
  line-height:1.5em;
  }
#painters2 a {
  text-decoration:none;
  color:#000;
  position:absolute; 
  width:75px; 
  height:20px; 
  display:block;
  text-align:center;
  }
#painters2 a.red {background:#c00; color:#fff;}
#painters2 a.orange {background:#fc0; color:#000;}
#painters2 a.yellow {background:#ee0; color:#000;}
#painters2 a.green {background:#080; color:#fff;}
#painters2 a.blue {background:#00c; color:#fff;}
#painters2 a:hover {
  width:120px; 
  height:28px;
  z-index:200;
  background:transparent url(../ads/opaque.gif);
  }
#painters2 a:hover em {
  font-size:1.5em;
  line-height:1.1em;
  overflow:hidden;
  cursor:pointer;
  background:#fff; 
  border:1px solid #000;
  position:absolute; 
  width:120px; 
  height:25px;
  left:-12px; 
  top:-4px;
  }
#painters2 a:hover.red em {background:#c00;}
#painters2 a:hover.orange em {background:#fc0;}
#painters2 a:hover.yellow em {background:#ee0;}
#painters2 a:hover.green em {background:#080;}
#painters2 a:hover.blue em {background:#00c;}

၃။Save Template ေအာက္က Code Layout>>>Add a Gadget>>>HTML/JavaScript Add ထည့္ေပးလိုက္ပါ။

<ul id="painters2">
  <li><a class="red" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="orange" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="yellow" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="green" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="blue" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
</ul>  

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

မွတ္ခ်က္။ ။kp3family ႏွင့္ kp3လင့္ခ္ေတြကိုမိမိရဲ ့လင့္ခ္ေတြနဲ ့အစားထိုးေပးလိုက္ပါ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

MENU

• Kp3နည္းပညာ၊၄၈၅၊AUniqueStyleDropDownBarNavigationMenuသံုးခ်င္ရင္
• Kp3နည္းပညာ၊၄၇၅၊ဘေလာ့မွာFacebookStyleDropDownMenuသံုးခ်င္ရင္
• Kp3နည္းပညာ၊၄၇၂၊ဘေလာ့မွာအလြယ္ကူဆံုး Accordion Menu သံုးခ်င္ရင္
• Kp3နည္းပညာ၊၄၇၁၊ဘေလာ့မွာCSS3 Multi Level Drop Down Menu သံုးနည္း
• Kp3နည္းပညာ၊၄၃ဝ၊Kp-3 Blue Tabbed Drop Down
• Kp3နည္းပညာ၊၄၂၆၊Kp-3 Grey Impression Drop Down Menu
• Kp3နည္းပညာ၊၄၂၅၊Kp-3 Green Impression Drop Down Menu
• Kp3နည္းပညာ၊၄၂၄၊Kp-3 Blue Impression Drop Down Menu
• Kp3နည္းပညာ၊၄၂၃၊Kp-3 Blue Center Drop Bar Menu
• Kp3နည္းပညာ၊၄၂ဝ၊Kp-3 Sunrise Gloss Drop Down Menus
• Kp3နည္းပညာ၊၄၁၉၊Kp-3 Massive Blue Drop Down menu
• Kp3နည္းပညာ၊၃၉၃၊ဘေလာ့မွာ KP-3CSS Horizontal Navigation Menuသံုးခ်င္ရင္
• Kp3နည္းပညာ၊၃၉၂၊ဘေလာ့မွာ KP-3Horizontal Double Line Menu သံုးခ်င္ရင္
• Kp3နည္းပညာ၊၃၆၃၊Kp-3 ရဲ႕ Vertical Dropdown Menu ေလးသံုးခ်င္ရင္
• Kp3နည္းပညာ၊၃၅၉၊ဘေလာ့မွာKp-3 Tab Menu ေလးသံုးခ်င္ရင္
• kp3နည္းပညာ၊၃၁၉၊ဘေလာ့မွာ KP-3Horizontal ေလးထည့္နည္း
• kp3နည္းပညာ၊၃၁၂၊KP-3 ရဲ႕ HORIZONTAL MENU အသစ္ေလးသံုးခ်င္ရင္
• kp3နည္းပညာ၊၂၉၇၊ဘေလာ့မွာ kp-3 ရဲ႕ Menu အသစ္ေလးသံုးခ်င္ရင္
• kp3နည္းပညာ၊၂၆၇၊ဘေလာ့အတြက္ KP-3 Horizontal Tabs Menu ေလးထည့္နည္း
• kp3နည္းပညာ၊၂၅၄၊ဘေလာ့မွာလြယ္ကူတဲ ့KP-3ရဲ ့Horizontal CSS menu ေလးထည့္နည္း
• kp3နည္းပညာ၊၂၅၀၊ဘေလာ့မွာ KP-3 ရဲ႕ Drop Down Menu အသစ္ေလးသံုးခ်င္၇င္
• kp3နည္းပညာ၊၂၄၂၊ဘေလာ့မွာ Dancing Links လို႕ေခၚတဲ့ Jquery Link Nudging ေလးသံုးနည္း
• kp3နည္းပညာ၊၂၄၁၊ဘေလာ့မွာ CSS-driven tabs Menu ေလးထည့္နည္း
• kp3နည္းပညာ၊၂၁၇၊ဘေလာ့မွာNAVIGATION BUTTONS Menu ေလးသံုးခ်င္ရင္

Posted in: MENU