System

Simple Coding to show/hide Dropdown Menu using JQuery

မဂၤလာပါ ခင္ဗ်ာ။
ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ အလုပ္လုပ္ကိုင္လ်က္ရိွေသာ ေဌးမင္းေခါင္ ျဖစ္ပါတယ္။ ဒီေန႔ ကၽြန္ေတာ္ တင္ျပခ်င္တဲ့ ဘေလာ့ဂ္ အေၾကာင္းအရာကေတာ့ JQuery JavaScript Library ကို အသံုးျပဳၿပီး Dropdown Menu တစ္ခုကို ဘယ္လို ဖန္တီးလို႔ ရႏိုင္မလဲဆိုတာပဲ ျဖစ္ပါတယ္။ အေၾကာင္းအရာေလးကို စတင္ေျပာျပေပးမွာ ျဖစ္ပါတယ္။

ေရးပံုေရးနည္းကို တစ္ဆင့္ခ်င္းစီ လုပ္ျပေပးသြားမွာ ျဖစ္ပါတယ္။ အရင္ဦးဆံုး html ဖိုင္ တစ္ခုေဆာက္ပါမယ္။ ဖိုင္နာမည္ကိုေတာ့ index.html လို႔ပဲ ေပးလိုက္ပါမယ္။

၎ဖိုင္ထဲမွာ html အဖြင့္ အပိတ္မ်ားကို ထည့္ပါမယ္။ ပံုအတိုင္း ျဖစ္သြားပါမယ္။

JQuery CDN
JQuery Library File ကို ခ်ိတ္ပါမယ္။ ကၽြန္ေတာ္ကေတာ့ JQuery ကို အသံုးျပဳရင္ CDN နဲ႔ပဲ ခ်ိတ္သံုးေလ့ ရိွပါတယ္။ JQuery CDN Link ကို အခု Link မွ ရယူႏိုင္ပါတယ္။ JQuery CDN ကိုေတာ့ Minified ကိုဘဲ အသံုးျပဳပါ။

Copy CDN Link
CDN Link ကို Copy ယူပါ။


ၿပီးရင္ေတာ့ HTML Page ရဲ႕ Head Tag အတြင္းမွာ ထည့္ေပးပါ။


JQuery CDN ခ်ိတ္ၿပီးသြားရင္ေတာ့ CSS Style ေလး နည္းနည္းထည့္ပါမယ္။


body Tag ထဲမွာ Menu HTML Code ေလး ထည့္ပါမယ္။


အေပၚ အဆင့္မ်ား ၿပီးပါက ရုပ္လံုးေလး ထြက္လာပါမယ္။


JavaScript စတင္ ေရးပါမယ္။ ေရးတဲ့အခါ အေပၚ HTML Tags ေတြရဲ႕ ေအာက္မွာ ေရးပါမယ္။ ကုဒ္မွာ ၾကည့္မယ္ဆိုရင္ ul ထဲက li ကို .click ဆိုတာ click ႏိွပ္ရင္ this ဆိုတာ ၎ႏိွပ္လိုက္တဲ့ အထဲက div ကို .show() ဆိုတာ ျပမယ္လို႔ ခိုင္းလိုက္တာပါ။ အဲ့ဒီမွာ ul li အစား class name နဲ႔လည္း ထည့္သံုးလို႔ ရပါတယ္။ အခုက Tag နာမည္နဲ႔ပဲ သတ္မွတ္ထားပါတယ္။


အခု Menu ေတြကို ႏိွပ္မယ္ဆိုရင္ သူနဲ႔သက္ဆိုင္ေသာ Drop-Down Menu က်လာမွာ ျဖစ္ပါတယ္။ ႏိွပ္လိုက္တဲ့ Drop-Down Menu ပဲျပၿပီး က်န္တာက ျပန္ပိတ္ရမယ္။ အဲ့လိုျဖစ္ဖို႔ကို Script မွာ ထပ္ထည့္ပါမယ္။


$(‘ul li div’).hide(); ဆိုတာေလး ထည့္လိုက္ပါမယ္။ Code က ဘာေျပာခ်င္တာလဲ ဆိုေတာ့ ul li div အားလံုးကို ေဖ်ာက္မယ္လို႔ ေျပာလိုက္တာပါ။ အဲ့ေတာ့ Drop-Down Menu မက်ခင္ ေပၚေနတဲ့ Drop-Down Menu အားလံုးကို အရင္ေဖ်ာက္မယ္။ ၿပီးရင္ ႏိွပ္လိုက္တဲ့ Drop-Down Menu ပဲ ျပမယ္။

အခုဆိုရင္ Drop-Down Menu က တစ္ခုဖြင့္ရင္ ေနာက္တစ္ခုက ပိတ္သြားပါမယ္။ တစ္ခု အဆင္မေျပတာ က်န္ေနပါမယ္။ အဲ့ဒါက Menu က ျပန္ပိတ္မရ ျဖစ္ေနပါတယ္။
အဲ့ေတာ့ Script ေလး ထပ္ထည့္ပါမယ္။


ကုဒ္ အရမ္းေျပာင္းသြားလို႔ မလန္႔သြားနဲ႔ေနာ္။ Code Break Down လုပ္ျပပါမယ္။

  • <script> အဖြင့္ ေအာက္ကေန စေျပာပါမယ္။ ပထမ လိုင္းကေတာ့ ul li ကို ႏိွပ္ရင္လို႔ ေျပာတာပါ။ အေပၚမွာ ရွင္းျပၿပီးခဲ့တဲ့အတိုင္း ဒုတိယလိုုင္းကေတာ့ if Condition ထည့္ထားတာပါ။ အကယ္၍ ႏိွပ္လိုက္တဲ့ Drop-Down Menu ( ul ထဲက li ထဲက div ) က .is(‘:visible’) ဆိုတာက Screen မွာ ေပၚေနမယ္ဆိုရင္ ၎ကို ေဖ်ာက္ေပးပါလို႔ ေျပာတာပါ။
  • တတိယလိုင္းကေတာ့ else ဆိုတာ အေပၚ condition မဟုတ္ခဲ့ရင္ စတုတၳလိုင္းကေတာ့ ေပၚေနတဲ့ Drop-Down Menu အားလံုးကို ေဖ်ာက္ခိုင္းတာ ျဖစ္ၿပီး ပဥၥမလိုင္းကေတာ့ ကိုယ္ႏွိပ္လိုက္တဲ့ Drop-Down Menu ေပၚပါလို႔ ေျပာထားတာ ျဖစ္ပါတယ္။
  • အဲ့ေတာ့ ကိုယ္ႏိွပ္တဲ့ Drop-Down Menu က ေပၚရင္ ေဖ်ာက္မယ္၊ မေပၚရင္ က်န္အားလံုးကို ေဖ်ာက္၊ ေနာက္ဆံုး ကိုယ္ႏိွပ္တဲ့ Drop-Down Menu ဘဲ ေပၚဆိုၿပီး ေရးလိုက္တာ ျဖစ္ပါတယ္။

အခုဆိုရင္ လိုခ်င္တဲ့ ပံုစံေလးေတာ့ ေပၚလာၿပီ ျဖစ္ပါတယ္။ ဒါေပမယ့္ ေပၚေနတဲ့ Drop-Down Menu ကို Menu မဟုတ္တဲ့ အျခားေနရာကို ႏိွပ္ရင္ ေဖ်ာက္ခ်င္တယ္။ အဲ့အတြက္ Script မွာ ကုဒ္ထပ္ထည့္ပါမယ္။


အနီအကြက္ထဲက ကုဒ္လိုင္း အသစ္ကို ထည့္ပါမယ္။ ၎ကုဒ္က ဘယ္လို အလုပ္လုပ္လဲဆိုရင္ document ကို click ႏိွပ္ရင္ ဆိုၿပီး ေရးထားတာပါ။ function(e) ဆိုတဲ့ အထဲက e ဆိုတာ event ကို ေျပာတာပါ။ ေနာက္တစ္လိုင္းကေတာ့ document ထဲက ဘယ္ေနရာကိုႏွိပ္ႏွိပ္ function က အလုပ္လုပ္ေနမွာပါ။ အဲ့အတြက္ if Condition တစ္ခု ခံထားပါတယ္။ e.target ဆိုတာ ကိုယ္ႏိွပ္လိုက္တဲ့ element ကို ေျပာတာပါ။ .closest ဆိုတာ ႏွိပ္လိုက္တဲ့ေနရာရဲ႕ parent ေတြမွာ .menu_container class name ပါတဲ့ element ရိွလားလို႔ condition စစ္ထားတာပါ။ .length == 0 ဆိုတာ တစ္ခုမွ မရိွခဲ့ရင္ ul li div ဆိုတာ Drop-Down Menu အားလံုးကို ေဖ်ာက္မယ္လို႔ ေျပာတာပါ။ အဲ့အတြက္ user က menu ေနရာကလြဲလို႔ အျခားေနရာ ဘယ္ေနရာႏိွပ္ႏိွပ္ Drop-Down Menu ကို ေဖ်ာက္မယ္လို႔ ေျပာတာပါ။

အခုဆိုရင္ေတာ့ ကိုယ္လိုခ်င္တဲ့ Drop-Down Menu ေလးက ၿပီးျပည္စံုတဲ့ ကုဒ္ေလး ရရိွၿပီ ျဖစ္္ပါတယ္။ အဲ့ကုဒ္မွာဆိုရင္ .hide(), .show() ေနရာမွာ class နဲ႔ display: none; တို႔ display:block; တို႔နဲ႔ ကစားလို႔ ရပါတယ္။
လုပ္ေဆာင္ပံု အဆင့္ဆင့္အတိုင္း လုပ္ၾကည့္ပါက အဆင္ေျပမယ္လို႔ ထင္မိပါတယ္။ ကုဒ္ တစ္လိုင္းခ်င္းစီကို နားလည္လာရင္ Menu အဖြင့္ အပိတ္ကို ေကာင္းေကာင္း ေရးႏိုင္လာပါလိမ့္မယ္။ အခုလို ဖတ္ရႈေပးတဲ့ အတြက္ ေက်းဇူးတင္ပါတယ္။

Code အျပည့္အစံုကို ေအာက္ပါ Link မွ ရယူပါ။
https://github.com/spiceworksmyanmar/basic_coding_dropdown_menu_using_jquery/blob/master/index.html

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *