Acest minitutorial va arata cum puteti da un aspect unui meniu Joomla publicat. Este o solutie mai spartana dar functionala.
Creati un nou modul de tip meniu (Modules->New->Menu).
Denumiti-l si puplicati-l in pozitia dorita.
La Module Parameters vom seta:
- Menu Name - meniul ce dorim sa fie afisat;
- Menu Style - list;
Salvam.
Stilul html "list" nu permite reprezentarea elementelor prin numarul lor de ID. ID-ul il vom identifica in css-ul temei.
Acum vom insera, in fisierul index.php al temei noastre, inainte de tagul </head>, codul:
<script type="text/javascript">
window.addEvent('domready', function() {
var sfEls = document.getElementById("meniucolor").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"), "");
}
}
});
</script>
Acest cod va da efectul hover la trecerea mouselui peste meniu.
Acum. cu firebug-ul sau alt program de vizualizare cod html, vom incerca sa vedem id-urile elementelor din meniu de tip lista, si acestea vor arata de forma (Ex: li.item34, li.item35, li.item36, li.item37 ....)
Vom crea codul css pt acestea in fisierul css al temei joomla.
/****************** Meniu color*******/
#meniucolor li {
padding:5px;
list-style:none;
}
#meniucolor li.item34 {
background:#ff0000;
}
#meniucolor li.item35 {
background:#ff4000;
}
#meniucolor li.item36 {
background:#ff8000;
}
#meniucolor li.item37 {
background:#ffBF00;
}
#meniucolor li.item34.sfhover, #meniucolor li.item34:hover {
background:#AD0000;
}
#meniucolor li.item35.sfhover, #meniucolor li.item35:hover {
background:#AD2800;
}
#meniucolor li.item36.sfhover, #meniucolor li.item36:hover {
background:#AD5700;
}
#meniucolor li.item37.sfhover, #meniucolor li.item37:hover {
background:#AD8200;
}
In acest fel putem particulariza fiecare buton al meniului cu alta culoare...
