Joomla CMS

Drop Down Menu in Joomla 1.5

Joomla Default menu က Drop Down Feature ကို support မလုပ္ေတာ့  ကိုယ္တိုင္ဆြဲ Template ေတြမွာ အဲဒီ Feature ကိုုရေအာင္ဘယ္လိုလုပ္မလဲ ???တခ်ိဳ႕ Template ေတြကေတာ့ Drop Down Menu ေတြကို support လုုပ္ၿပီးသားျဖစ္လိုု႔ အဆင္ေျပပါတယ္။ ကြ်န္ေတာ္အခုု share လုပ္ခ်င္တာကေတာ့ ကိုုယ္တိုုင္ဆြဲၿပီး သံုုးတဲ့ Template ေတြမွာ Drop Down Menu တစ္ခုုရဖိုု႔ဘယ္ Extension ေတြကိုုသံုုးမလဲ။ ဘယ္လိုု setting ေတြကိုုျပင္မလဲ ဆိုုတာေတြဘဲ ျဖစ္ပါတယ္။

1.    Extended Menu
ဒီ Menu ကေတာ့ Joomla Docs မွာညႊန္းထားလိုု႔ သံုုးၾကည့္ေပမယ့္ သိပ္မႀကိဳက္လွဘူး။ Install လုုပ္ရတာ config လုုပ္ရတာေတာ့ သိပ္မခက္ပါဘူး။
-    Extended Menu ကိုု ဒီမွာ Download လုုပ္ၿပီး Install လုုပ္လိုုက္ပါ။
-    ၿပီးရင္ေတာ့ ဒီ CSS ေတြကိုု ကိုုယ္သံုုးတဲ့ Template ထဲက css\template.css ထဲမွာေပါင္းထည့္ရပါမယ္။

#twocols{ /* The columns that gets dropped down over yours might be different. */
  z-index:20;
}
 
#leftcol{  /* The columns that gets dropped down over yours might be different. */
  z-index:10;
}
 
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme. */
  position:absolute;
  top:187px;
  left:20px;
  z-index:100;
  font:0.9em Verdana, Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}
 
#mainlevelmainnav,#mainlevelmainnav ul {
  float:left;
  list-style:none;
  line-height:1em;
  background:transparent;
  font-weight:700;
  margin:0;
  padding:0;
}
 
#mainlevelmainnav a {
  display:block;
  color:#f90;
  text-decoration:none;
  margin-right:15px;
  padding:0.3em;
}
 
#mainlevelmainnav li {
  float:left;
  padding:0;
}
 
#mainlevelmainnav li ul  {
  position:absolute;
  left:-999em;
  height:auto;
  width:11em;
  font-weight:400;
  background:#36f;
  border:#00C 1px solid;
  margin:0;
}
 
#mainlevelmainnav li li {
  width:11em;
}
 
#mainlevelmainnav li ul a {
  width:11em;
  color:#fff;
  font-size:0.9em;
  line-height:1em;
  font-weight:400;
}
 
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
  left:-999em;
}
 
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
  ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
  left:auto;
  z-index:6000;
}
 
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
  background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

File ခြဲေရးၿပီးျပန္ Link ေပးလည္းရပါတယ္။
-    ဒီ js code ေတြကိုုေတာ့ Template ထဲက index.php မွာထည့္ေပးရပါမယ္။

<script type="text/javascript"><!--//--><![CDATA[//><!--
  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
           this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\b"), "");
        }
     }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

သူ Reference  Wiki ထဲမွာဖတ္ၿပီးဆက္စမ္းခ်င္တယ္ဆိုုရင္ေတာ့ ဒီမွာ ဆက္ဖတ္ႏိုုင္ပါတယ္။

2.    SuperFish Dropdown Menu
SuperFish က အေပၚက Extended Menu ထက္ပိုုႀကိဳက္တယ္လို႔ထင္ပါတယ္။ Install လုုပ္ၿပီး Default main menu ကိုု Disable လုုပ္ၿပီး သူ႔ကိုု enable လုုပ္ၿပီး သံုုးရင္ရၿပီဗ်ာ။ ကိုုယ့္ Template ရဲ႕ color pattern ေတြနဲ႔ ကိုုုုက္ညီတဲ့ အေရာင္ေတြကိုု ေျပာင္းခ်င္ရင္ေတာ့
modules\mod_superfishmenu\tmpl\css\superfish.css  မွာျပင္သံုုးႏိုုင္ပါတယ္။

3.    swMenuFree
ေျပာမယ္ဆိုုရင္ေတာ့ ကြ်န္ေတာ္အႀကိဳက္ဆံုုးပါ။ အရင္ဆံုုး ဒီမွာ Download လုုပ္ၿပီး Install လုုပ္လိုုက္ပါ။ သူ႕ Installer က component ျဖစ္ေနလိုု႕ေတာ့ေၾကာင္မသြားပါနဲ႕။ Install လုုပ္ၿပီးသြားလိုု႔ Module manager ထဲမွာရွာရင္ မရွိႏိုုင္ေသးပါဘူး။ Component ထဲက swMenuFree ကိုုသြားလိုုက္ပါ။

- Menu Module Setting

Module Name: ေနရာမွာ swmainmenu(ကိုုယ္ႀကိဳက္တဲ့နာမည္ေပးႏိုင္ပါတယ္) လိုု႔ထဲ့ၿပီး Save ကိုClick လိုုက္ပါ။

Size, Position & Offsets  
ကိုုယ္သံုုးမယ့္  Menu item size ေတြ offset ေတြကိုု လိုုသလိုုျပင္သံုုးခ်င္တယ္ဆိုုရင္ အသံုုး၀င္ပါတယ္။

Colors & Backgrounds
Meun Item ေတြကိုု mouse over လုုပ္ရင္ျဖစ္ေစ၊ Menu item ေတြရဲ႕ Background color ေတြကိုုအေရာင္ေျပာင္းခ်င္ရင္ျဖစ္ေစ ဒီ tab ေအာက္မွာလိုုသလိုုျပင္သံုုးႏိုုင္ပါတယ္။ ေထြေထြထူးထူး ျပင္စရာမလိုုတဲ့အတြက္ ပံုုမထည့္ေတာ့ပါဘူး။

Fonts & Padding
ဒီ tab ေအာက္မွာလည္းျပင္စရာရယ္ေတာ့မရွိပါဘူး။ ကိုုယ့္ Menu ရဲ႕ Font ေတြ Padding , Top, Left, Bottom, Right ေတြကိုု setting လုုပ္ေပးႏိုုင္ပါတယ္။ ေထြေထြထူးထူး ျပင္စရာမလိုုတဲ့အတြက္ ပံုုမထည့္ေတာ့ပါဘူး။

Borders & Effects
Menu item တစ္ခုုခ်င္းဆီရဲ႕ Border Width  ေတြ Styles ေတြကိုုျပင္ခ်င္ရင္ျပင္ႏိုုင္ ေအာင္လိုု႔ပါ။ ဒါကေတာ့ swMenu အေၾကာင္းအေသးစိတ္ရွင္းျပထားတဲ့ Youtube video ေလးျဖစ္ပါတယ္။

;feature=related

Note : ေလာေလာဆယ္ ပုံေတြက သိပ္မေကာင္းဘူးဗ်ာ။ ျပန္ edit လုပ္ျပီး တင္ေပးပါမယ္။