Drop Down Menu ေလးေတြရဲ႕ Width ကုိတူညီေအာင္ ျပဳလုပ္ျခင္း

အားလုံးပဲမဂၤလာပါခင္ဗ်ာ.။ ကၽြန္ေတာ္အခုေဖာ္ျပေပးမွာကေတာ့ Drop Down Menu ေလးေတြရဲ႕ Width ကုိ တူညီေအာင္ျပဳလုပ္တဲ့နည္းေလးပဲျဖစ္ပါတယ္။ မိမိတုိ႔ဘေလာ့ဂ္ေတြရဲ႕ Sidebar မွာ ဒီလုိ Drop Down Menu ေလးထည့္ထားျခင္းဟာ Widget ေတြရ႕ဲ ေနရယူမႈကုိ သက္သာေလ်ာ့ပါးေစပါတယ္။ ဒါေပမယ့္ ကၽြန္ေတာ္ ေအာက္မွာ နမူနာျပထားသလုိ Drop Down Menu ႏွစ္ခုထည့္မယ္ဆုိပါစုိ႔..။ သူတုိ႔ေတြရဲ႕ Text အနဲအမ်ားေပၚမူတည္ၿပီး အတုိအရွည္မတူညီတဲ့အခါ ၾကည့္ရတာ မ်က္စိပသာဒမျဖစ္ႏုိင္ပါဘူး။ 

 

အထက္ပါ Drop Down Menu ႏွစ္ခုရဲ႕ Code ေတြကေတာ့ ေအာက္မွာ ေဖာ္ျပထားတဲ့အတုိင္းပဲျဖစ္ပါတယ္

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">

<option> - နည္းပညာ - </option>

<!-- change the links with your own -->

<option value="http://kp3family.blogspot.com/">kp-3 နည္းပညာ</option>

<option value="http://daweinaymyo.blogspot.com/">ထား၀ယ္ေနမ်ိဳး</option>

<option value="http://sbsangpi.blogspot.com/">ကုိစံပီး</option>

</select></form>

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">

<option> - သုတရသ ဘေလာ့ဂ္မ်ား - </option>

<!-- change the links with your own -->

<option value="http://zawmaung-kopouk.blogspot.com/">ကုိေပါက္ရဲ႕မွတ္စုေလးမ်ား</option>

<option value="http://heintinzaw8.blogspot.com/">ဆရာဟိန္းတင့္ေဇာ္ (ေဗဒင္ပညာ)</option>

<option value="http://blogger-mgmoe.blogspot.com/">Blogger ေမာင္မုိး</option>

</select></form>

ဒါေၾကာင့္ အဲဒီ Drop Down Menu ေလးႏွစ္ခုကုိ အတုိအရွည္ညီသြားေအာင္ ေအာက္ပါအတုိင္း ျပင္လုိက္ပါ့မယ္။ အျပာေရာင္နဲ႔ျပထားတာကေတာ့ ကၽြန္ေတာ္ထပ္ျဖည့္လုိက္တဲ့ Code ေတြပါပဲ။ 200px အစား မိမိတုိ႔ Sidebar ရဲ႕ width နဲ႕လုိက္ေလ်ာညီေထြျဖစ္ေအာင္ ထည့္ေပးဖုိ႔လုိပါတယ္။ အကယ္၍ Sidebar Width က 250px ရွိတယ္ဆိုရင္ 230px ေလာက္ထားေပးလုိက္ပါ.။

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px">

<option> - နည္းပညာ - </option>

<!-- change the links with your own -->

<option value="http://kp3family.blogspot.com/">kp-3 နည္းပညာ</option>

<option value="http://daweinaymyo.blogspot.com/">ထား၀ယ္ေနမ်ိဳး</option>

<option value="http://sbsangpi.blogspot.com/">ကုိစံပီး</option>

</select></form>

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px">

<option> - သုတရသ ဘေလာ့ဂ္မ်ား - </option>

<!-- change the links with your own -->

<option value="http://zawmaung-kopouk.blogspot.com/">ကုိေပါက္ရဲ႕မွတ္စုေလးမ်ား</option>

<option value="http://heintinzaw8.blogspot.com/">ဆရာဟိန္းတင့္ေဇာ္ (ေဗဒင္ပညာ)</option>

<option value="http://blogger-mgmoe.blogspot.com/">Blogger ေမာင္မုိး</option>

</select></form>

အဲဒီလုိျပင္လုိက္တဲ့အခါ ရလဒ္အေနနဲ႔ ေအာက္ပါအတုိင္းရရွိမွာျဖစ္ပါတယ္။

အခုဆုိရင္ မိမိတုိ႔ရဲ႕ Sidebar မွာ တူညီတဲ့ Drop Down Menu ေလးေတြကုိ ထည့္လုိ႔ရသြားပါၿပီ။ ေနာက္ထပ္ အဲဒီ Drop Down Menu ေလးေတြကုိပဲ ထပ္ၿပီး အလွဆင္ၾကည့္ၾကရေအာင္။ ဒီအတုိင္းဆုိရင္ စားသားေတြရဲ႕ေနာက္မွာ Background Color မပါေတာ့ ၾကည့္ရတာ တစ္ခုခုလုိေနသလုိပဲ။ ဒါေၾကာင့္ ေအာက္ပါအတုိင္း Code ေလးေတြ ထပ္ျဖည့္ၾကည့္ပါ့မယ္။

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px;color:#ff0000;background:#B2DDFB">

<option> - နည္းပညာ - </option>

<!-- change the links with your own -->

<option value="http://kp3family.blogspot.com/" style="width:200px;color:#ff0000;background:#C3F4BD">kp-3 နည္းပညာ</option>

<option value="http://daweinaymyo.blogspot.com/" style="width:200px;color:#ff0000;background:#CDDCE7">ထား၀ယ္ေနမ်ိဳး</option>

<option value="http://sbsangpi.blogspot.com/" style="width:200px;color:#ff0000;background:#FFFF00">ကုိစံပီး</option>

</select></form>

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px;color:#ff0000;background:#B2DDFB">

<option> - သုတရသ ဘေလာ့ဂ္မ်ား - </option>

<!-- change the links with your own -->

<option value="http://zawmaung-kopouk.blogspot.com/" style="width:200px;color:#ff0000;background:#C3F4BD">ကုိေပါက္ရဲ႕မွတ္စုေလးမ်ား</option>

<option value="http://heintinzaw8.blogspot.com/" style="width:200px;color:#ff0000;background:#CDDCE7">ဆရာဟိန္းတင့္ေဇာ္ (ေဗဒင္ပညာ)</option>

<option value="http://blogger-mgmoe.blogspot.com/" style="width:200px;color:#ff0000;background:#FFFF00">Blogger ေမာင္မုိး</option>

</select></form>

ရလဒ္အေနနဲ႔ ေအာက္ပါအတုိင္းရရွိမွာ ျဖစ္ပါတယ္။ color code ေတြေနရာမွာေတာ့ မိမိဘေလာ့ဂ္ရဲ႕ ေနာက္ခံအေရာင္နဲ႔ လုိက္ဖက္တာကုိ ေရြးခ်ယ္အသုံးျပဳႏုိင္ပါတယ္။ အားလုံး မိမိတုိ႔ရဲ႕ ဘေလာ့ဂ္ေလးေတြကုိအလွဆင္ရင္း ေပ်ာ္ရႊင္ၾကည္ႏူးႏုိင္ၾကပါေစ...။ အဆင္မေျပမႈမ်ား တစ္စုံတစ္ရာရွိခဲ့ပါက ကြန္မန္႔ သို႔မဟုတ္ စီေဘာက္မွာ ေဆြးေႏြးေပးခဲ့ၾကပါရန္....။

ေသျခာေလ့လာခ်င္ရင္ေတာ့ေအာက္ကလင့္ကေနသြားပါ
ဒီကေနသြားပါဗ်ာ
အိုင္တီခ၇ီးသည္ဆီကေနကူးယူေဖာ္ျပေပးလိုက္ပါတယ္ခင္ဗ်ာ