Notele mele sunt concepute în primul rând pentru webmasterii începători. În ciuda acestui fapt, dezvoltatorii experimentați vor găsi aici și ceva interesant pentru ei înșiși.
În blogul meu, voi publica articole despre tehnologiile web moderne (HTML5, CSS3 și altele). Dacă în procesul de lucru pe proiecte descopăr o soluție "proaspătă" pentru o sarcină, scriu aici aici informații despre acest lucru, care îmi permit să aplice cunoștințele în viitor, dacă este necesar.
Sper că informațiile vor fi utile vizitatorilor.
Dacă dintr-un anumit motiv nu sunteți mulțumit de aspectul meniului din șablonul Joomla, nu trebuie să schimbați întregul șablon, puteți face numai prin schimbarea meniului propriu, care nu vă place.
În acest articol voi demonstra cum se poate face acest lucru. Pentru a face acest lucru, avem nevoie de: un site pe Joomla (folosesc un site cu date demo și un șablon standard pe care îl puteți descărca și instala în CMS).
Trebuie să eliminăm din cod toate valorile atributului href pentru linkuri, înlocuindu-le cu simbolul "#".
Am un cod "curățat" - cu acesta și vom lucra. Acum trebuie să decidem dacă toate meniurile dorim să schimbăm sau doar una. Dacă este vorba doar de unul, trebuie să îi atribuim un sufix de clasă. Acest lucru se face în sistem (Extensii ► Modul Manager). Găsim modulul necesar (în cazul nostru, "Meniul principal"), deschideți-l și, în secțiunea Setări ► opțiuni avansate, specificați sufixul de clasă - în cazul nostru, "_menu". Containerul div după adăugarea sufixului are acum clasa "moduletable_menu".
Până când ieșim de aici, trebuie să dezactivați titlul meniului, astfel încât acesta să nu apară mai presus de toate elementele de meniu.
Mergem mai departe. Vrem ca meniul nostru să arate astfel:
Sarcina noastră este să ne asigurăm că prin aplicarea mai multor reguli css, meniul nostru, codul pe care l-am salvat, arăta ca meniul din figură. Mai întâi, eliminați toate indentările din toate elementele de pe pagină și aloca toate elementele de text aceeași dimensiune a fontului:
Problema este că la fiecare element în mod implicit sunt setate valorile marjei și polifonajului proprietăților. și în diferite browsere sunt diferite, astfel încât este necesar pentru a reseta proprietățile de a face cu impunerea de orice html - pagini, pentru că atunci nu a existat nici surprize cu spații nicăieri care au luat și indentare în elementele.
În continuare, vom enumera următoarele reguli pentru lista noastră:
Salvați și vedeți ce avem în browser:
Din moment ce am înfășurat toate liniuțele, meniul nostru este cuplat dens în partea din stânga sus a ferestrei browserului. Același tip pe care îl va avea când schimbăm stilurile de meniu din sistem, se va potrivi strâns cu limitele containerului său, deci vom aplica următoarea regulă în div.moduletable_menu. creând mici indentări în jurul acestuia:
Extensii ► Manager șablon ► dați clic pe numele șablonului nostru (este selectat în mod implicit) și selectați "Editați css" din meniul de sus.
Deoarece stilurile nu se aplică elementelor dintr-un șablon de testare, fișierul template.css este gol.
Meniu înainte de schimbare
Meniu după schimbare
Trimiteți-le prietenilor: