Cum să faci un meniu de selecție a paginii în joomla. Crearea unui meniu. Ajustarea manuală a stilurilor de meniu BM Coll

Pentru un site de orice nivel, este de mare importanță cât de bine este compus stilul său, cum totul este „lipit” împreună. Dar în următorul minut, designul se estompează într-un alt plan, deoarece ceea ce devine mult mai important este cât de convenabil este organizată interfața de resurse, cum sunt distribuite materialele, cât de probabil este să puteți ajunge la orice secțiune folosind meniul. Și apoi proprietarul proiectului însuși trebuie să se gândească dacă ceea ce oferă dezvoltatorul șablonului este într-adevăr atât de convenabil, este corect și confortabil să lucrezi cu căutarea materialelor, există o împărțire a acelorași articole în categorii? Dacă acest aspect nu este adus inițial la ideal, poți pierde acei vizitatori care chiar îți puteau aduce profit, dar pur și simplu nu au vrut să se ocupe de o resursă neprofesionistă, pentru că altfel, organizarea navigării pe site ar fi la un cu totul alt nivel. . Dar nu trebuie să creadă că numai cele prevăzute în Șablon de meniu Joomla instrumentele devin limita cu care trebuie să lucrezi. Pentru a îmbunătăți structura și navigarea proiectului dvs., puteți utiliza cu ușurință extensii, de exemplu Modul de meniu Joomla, capabilă să facă schimbări foarte semnificative în acest segment.

Sugestii specifice pentru îmbunătățirea meniului

Ce ne pot oferi extensiile din această categorie? În primul rând, este un meniu variat. Cel mai interesant lucru este că dezvoltatorilor le pasă nu numai de configurarea și funcționarea convenabilă a acestor soluții, ci și de modul în care arată. În acest scop, se folosește animația, sunt oferite selecții de culori și diverse fonturi pentru meniu și sunt pregătite și seturi de pictograme pentru acestea. Și mai bine, aici veți găsi opțiuni care acceptă un număr diferit de niveluri, iar acest lucru deschide deja calea către crearea unor sisteme de navigație serioase, datorită cărora puteți Element de meniu Joomla, intrați în orice secțiune a site-ului sau chiar într-o anumită categorie. Opțiunile care folosesc imagini care simbolizează fiecare element de meniu par și mai interesante; astfel de completări sunt deja în lista noastră. Alege Meniu derulant Joomla, mega-meniuri speciale cu capabilități enorme, precum și meniul acordeon Joomla 3, care simulează plierea unui acordeon obișnuit pentru a plasa conținut. Dar, pe lângă astfel de propuneri, această categorie are multe mai multe evoluții interesante.

Crearea de categorii și multe altele

Este de la sine înțeles că folosind diverse arii tematice, este necesar să se ofere vizitatorilor acces direct la materialele necesare și este indicat ca fiecare categorie să corespundă conținutului ei. Dacă nu vă place formatul în care interfața dvs. standard afișează categoriile, puteți utiliza extensiile corespunzătoare. Pentru a face acest lucru, veți găsi soluții care afișează categorii într-o formă similară cu un meniu derulant, cele care sunt instalate special pentru cooperarea cu K2 sau pur și simplu organizează accesul convenabil la colecții de conținut corespunzătoare unui anumit subiect. Drept urmare, chiar și dvs. veți fi mai confortabil să lucrați cu proiectul dvs., distribuind inițial noi chitanțe în „rafturi”, deoarece atât căutarea, cât și ajustarea unor astfel de materiale devin mai convenabile.

Faceți deplasarea pe site cu adevărat convenabilă

Când un proiect este echipat cu un meniu convenabil, când categoriile sunt distribuite clar pe pagină și chiar și fără a utiliza o căutare, puteți găsi material interesant pentru dvs. - doriți să lucrați cu o astfel de resursă. În plus, așa cum am menționat mai sus, toate evoluțiile actuale au ca scop atragerea atenției cu stilul lor de performanță, deoarece fără acesta este și imposibil. Deci, dacă nu sunteți mulțumit de designul standard al principalelor elemente de navigare de pe site, utilizați extensii din această categorie pentru a face meniul Joomla perfect pentru tine.

Bună prieteni! Zaur Magomedov este în legătură. În această notă, aș dori să vă prezint un meniu frumos de acordeon vertical pentru un site pe Joomla 2.5 - 3.0. Acest meniu este foarte simplu și nu necesită implementarea multor coduri, lucru căruia îi acord deseori atenție. După cum se spune, „mai puțin este mai bine”.

Am abordat deja în postările anterioare crearea unui meniu orizontal și crearea unui meniu orizontal cu mai multe niveluri pentru joomla 2.5. Acum am ajuns la verticală.

În primul rând, uitați-vă la demo pentru a vedea cum arată totul, dacă vă place, apoi descărcați pachetul cu fișierele sursă.

Am găsit acest meniu pe Internet și am decis să-l adaptez pentru un site folosind cms Joomla, deoarece... Mie mi-a plăcut foarte mult acest meniu, atât ca aspect, cât și ca ușurință în conectare. După ce am corectat ușor scriptul meniului în sine și stiluri css, am obtinut acelasi rezultat ca in .

Conectarea meniurilor în joomla 3.x.x

Mai întâi de toate, despachetați arhiva într-un folder specific de pe computer. Următorul lucru pe care îl vom face este să copiați imaginile din folderul imagini în folderul cu imagini al șablonului dvs. De obicei, în multe șabloane, acesta este folderul imagini, dacă îl aveți numit diferit, de exemplu, img, atunci trebuie să schimbați căile către imaginile din fișierul de stil - vmenu.css. De asemenea, trebuie să conectăm unul dintre scripturile de meniu. Vă sugerez să creați un folder „js” în rădăcina șablonului și să puneți fișiere script în el - menu.js sau menu-collapsed.js. De ce două dosare? Chestia este, dacă ați observat, pe site-ul demo există două opțiuni de afișare acest meniu. Puteți privi cu atenție cum diferă unul de celălalt. Conectați versiunea preferată a scriptului menu.js sau menu-colapsed.js. Opțiunea 1 este scriptul menu-colapsed.js, iar opțiunea 2 este menu.js. Pentru a face acest lucru, chiar la începutul fișierului șablon index.php, introduceți următoarele rânduri:

$doc = JFactory::getDocument(); // obțineți parametri
$doc->addStyleSheet(JUri::base().’/templates/’.$this->template.’/css/vmenu.css’); // include fișierul de stiluri
$doc->addScript(JUri::base().’/templates/’.$this->template.’/js/menu-collapsed.js’); // conectați scriptul de meniu, în acest caz este opțiunea 1
?>

Avem nevoie și de biblioteca jQuery, dar în joomla3 este deja inclusă implicit, deoarece se folosește cadrul.

Deci, fișierul css conține următorul cod:

/********************************
Meniu vertical derulant acordeon
************************************************************/
ul.vmenu (


marja: 0;
umplutură: 0;
list-style:none;
}
ul.vmenuli (
marjă: 0 0 2px;
}
ul.vmenu li a (

chenar: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
chenar-rază: 3px;
culoare: #515151;
afisare: bloc;
umplutură: 5px 8px;
text-decor: niciuna;
}
ul.vmenu li > a:hover, ul.vmenu li.active > a, ul.vmenu li >
ul.vmenu li.parent > a:after (

display:bloc;
conţinut:"";
float:dreapta;
margine: 8px 5px 0 0;
înălțime: 3px;
lățime: 6px;
}
/* Articole derulante */
ul.vmenu li ul (
greutatea fontului: normal;
marjă: 10px 0 10px 15px;
list-style:none;
}
ul.vmenu li ul li (
fundal: niciunul;
marjă: 0 0 5px
}
ul.vmenu li ul li a (

chenar: mediu nici unul;
umplutură: 0 0 0 15px;
}
ul.vmenu li ul li a:hover (culoare:#29719E;text-decoration:subline)
ul.vmenu li ul li.active a (color:#29719E;font-weight:bold)

/*********************
Meniu vertical derulant acordeon - opțiunea 2
************************************************************************/
ul.vmenu2 (
font: bold 12px Arial,Helvetica,sans-serif;
list-style: none outside none;
marja: 0;
umplutură: 0;
list-style:none;
}
ul.vmenu2li (
marjă: 0 0 2px;
}
ul.vmenu2 li a (
fundal: url("../images/vmenu-li-bg.jpg") stanga jos repeta-x;
chenar: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
chenar-rază: 3px;
culoare: #515151;
afisare: bloc;
umplutură: 5px 8px;
text-decor: niciuna;
}
ul.vmenu2 li > a:hover, ul.vmenu2 li.active > a, ul.vmenu2 li > a:focus (culoare fundal:transparent; culoare:#0088CC)
ul.vmenu2 li.parent > a:after (
background:url("../images/arrow-dropdown.png") fără repetare;
display:bloc;
conţinut:"";
float:dreapta;
margine: 8px 5px 0 0;
înălțime: 3px;
lățime: 6px;
}
/* Articole derulante */
ul.vmenu2 li ul (
greutatea fontului: normal;
marjă: 10px 0 10px 15px;
list-style:none;
}
ul.vmenu2 li ul li (
fundal: niciunul;
marjă: 0 0 5px
}
ul.vmenu2 li ul li a (
fundal: url("../images/vmenu-arrow.png") no-repeat scroll 5px center transparent !important;
chenar: mediu nici unul;
umplutură: 0 0 0 15px;
}
ul.vmenu2 li ul li a:hover (culoare:#29719E;text-decoration:subline)
ul.vmenu2 li ul li.active a (culoare:#29719E;font-weight:bold)

ÎN acest fișier conține stiluri pentru ambele opțiuni și puteți elimina stilurile opțiunii de meniu de care nu aveți nevoie.

Acum că avem toate elementele create, putem crea un modul cu care ne vom afișa meniul într-una sau alta poziție modulară a șablonului. Am ales coloana din stânga. Accesați managerul de meniu și faceți clic pe linkul „Adăugați un modul pentru de acest tip meniu" vizavi de meniul creat de noi. De asemenea, puteți crea un modul de meniu în felul următor - mergeți la managerul de module: Extensions -> Module Manager -> Create -> Menu (selectați tipul de modul).

Accesați fila " Opțiuni suplimentare" Aici INTRODUCĂM UN SPAȚIU și introducem sufixul clasei de meniu - vmenu. Pentru ce este? Este posibil să existe mai multe meniuri pe site și, pentru ca stilurile acestora să nu se suprapună, introducem o clasă alternativă la lista nenumerotată de meniuri. Dacă ți-a plăcut a doua opțiune pentru afișarea meniului, atunci introduceți ca sufix separat de un spațiu - vmenu2.

Asta este, după ce au fost făcute setările, salvați modulul. Dacă ați făcut totul corect, pe site-ul dvs. va apărea un meniu similar cu cel de pe site.

Lasă-mă să-ți amintesc din nou! Există două opțiuni de meniu pe site-ul demo și probabil veți alege una dintre ele. În acest caz, nu este nevoie să includeți ambele fișiere script, doar unul este suficient.

• Fișier menu-colapsed.js. - aceasta este opțiunea noastră 1 - meniul Acordeon - opțiunea 1
• Fișierul menu.js este opțiunea noastră 2 - meniul acordeon - opțiunea 2
• Sufixul clasei de meniu (separat printr-un spațiu) pentru opțiunea 1 - vmenu
• Sufixul clasei de meniu (separat printr-un spațiu) pentru opțiunea 2 - vmenu2

Pe baza acestui lucru, conectați fișierul de care aveți nevoie. De asemenea, puteți elimina stiluri din fișierul css pentru o opțiune de care nu avem nevoie, pentru a nu încărca încă o dată kiloocteți suplimentari.

Conectarea meniurilor în joomla 2.5.x

Conectarea unui meniu în joomla 2.5 nu este diferită de conectarea în joomla 3, cu excepția faptului că trebuie să conectăm suplimentar biblioteca jQuery. Pentru a face acest lucru, adăugați următoarea linie la codul de mai sus:

$doc->
?>

Vom obține ceva de genul acesta:

$doc = JFactory::getDocument(); //obține parametri
$doc->addScript(‘http://code.jquery.com/jquery-latest.min.js’); //include cea mai recentă versiune a bibliotecii jQuery
$doc->addScript(JUri::base().’/templates/’.$this->template.’/js/menu-collapsed.js’); //conectați scriptul de meniu, în acest caz este opțiunea 1
?>

Și încă ceva. În joomla 2.5 nu există tip de element de meniu Legături de sistem -> Antet, există doar un tip de separator de text - Separator, dar acest tip de articol nu ni se potrivește, deoarece Titlul elementului de meniu nu va fi înconjurat de un link. În acest caz, trebuie să selectați tipul „URL extern” și să introduceți substituentul - # ca URL. Toate celelalte sunt la fel.

Atât am vrut să spun. Dacă ceva nu merge (poate că am făcut o greșeală undeva în text), atunci pune întrebări în comentarii. La revedere tuturor, ne vedem în postările următoare!

Salut tovarăși! În acest articol vom termina ceea ce am început în postarea anterioară, adică vom face posibilă afișarea materialelor pe site. Astăzi vom crea elemente de meniu în Joomla 3.6. Elementele de meniu sunt cea mai importantă componentă a oricărei resurse de pe Internet, deoarece joacă un rol semnificativ în navigarea principală a site-ului.

Constructorii de site-uri neexperimentați începători de mult timp nu pot înțelege relația care se vede între crearea de material, crearea de categorii și crearea de meniuri. Dar cu timpul veți înțelege de ce este necesar și cum să lucrați cu el. După cum am menționat anterior pe CMS Joomla 3.6, materialul creat trebuie să fie legat de o categorie. Dar asta nu este tot; pentru ca articolul să fie afișat pe paginile site-ului, trebuie să creați un meniu.

Dezvoltatorii au oferit o mare varietate de opțiuni de afișare pentru elementele de meniu. Să începem să adăugăm elemente în meniul principal Joomla existent.

Crearea unui element de meniu de bază

1. În panoul administrativ Joomla din partea de sus găsim secțiunea - Meniu/Manu principal/Creare element de meniu.

2. Pe pagina următoare scriem „Titlul meniului”. Lăsați câmpul Alias ​​gol. Acest lucru se datorează faptului că, după ce numele meniului este creat, sistemul va scrie automat tot ce este necesar în el. Acest lucru este valabil și pentru materialele și categoriile pentru care scrieți un titlu.

3. Tip de element de meniu– aceasta este o parte importantă responsabilă pentru ieșirea materialului. Faceți clic pe Selectați.

În fereastra care se deschide, găsim „Materiale”, unde trebuie să selectăm una dintre opțiunile prezentate. Pe site-ul meu, folosesc în proporție de 99% „Lista materialelor din categoria”.

4. Acum că ați decis și selectat tipul de meniu de mai sus, ar trebui să „ Selectarea categoriei" În mod implicit, sistemul va afișa Uncategorized. Aici trebuie să selectați o categorie care va fi legată de meniu. Este posibil să schimbați legarea în viitor. Deci, dacă ați conectat din greșeală ceva ce nu ați dorit, îl puteți remedia oricând accesând meniul Joomla.

5. În zona din dreapta a ferestrei există setări legate de afișare. Stare - selectați „Publicat”. Pagina principală – Cred că totul este clar. Dacă îl selectați, tot conținutul din categorie va fi afișat pe pagina principală. De asemenea, puteți seta „Elementul părinte”. Valoarea implicită este „Menu Root”. Această secțiune joacă un rol important, deoarece vă permite să creați un submeniu în meniul principal selectat în linie. Dar, din moment ce avem un singur element de meniu până acum, nu există nimic special de legat.

6. Ca rezultat, elementul de meniu pe care l-am creat trebuie să fie „Salvare” făcând clic pe unul dintre butoanele corespunzătoare din partea stângă sus a ecranului.

Creați un element de meniu cu un material de afișare

Dacă doriți ca un articol să fie afișat în meniu, trebuie să reveniți la Tip element/Materiale/Material din meniu. Și în coloana „Selectarea materialului”, selectați materialul corespunzător. În continuare, totul este identic cu metoda de mai sus.

Acum puteți merge la pagina principală a site-ului și puteți verifica existența și funcționalitatea noului element de meniu Joomla și conținutul aflat în acesta.

Sper că am putut să te ajut. Dacă aveți întrebări, adresați-le în comentarii.

Vă mulțumim pentru atenție și ne vedem curând pe paginile Stimylrosta.

Ați găsit o eroare gramaticală în text? Vă rugăm să raportați acest lucru administratorului: selectați textul și apăsați combinația de taste rapide Ctrl+Enter

În această lecție despre modulele Joomla, vă voi arăta un modul excelent pentru afișarea meniurilor pe paginile site-ului.

Unde este?

Directorul modulului Meniu este situat în directorul /modules/mod_menu al folderului rădăcină al site-ului. Directorul conține fișiere standard pentru modulele de sistem:

• directorul tmpl;
• fișiere helper.php;
• mod_menu.php;
• mod_menu.xml.

De ce este nevoie?

Modulul Meniu de pe un site Joomla este necesar pentru a afișa orice meniu de site creat anterior în orice poziție selectată a modulelor.

Acest modul nu preia stilul meniului derulant și va afișa elementele de meniu sub forma unei liste. Aceasta înseamnă că utilizarea acestui modul în poziția șablonului pentru meniul principal NU va oferi un meniu derulant, ci va afișa elementele de meniu ca o listă.

Permiteți-mi să vă reamintesc că pentru a crea un meniu derulant pentru un site web, trebuie să indicați în setările șablonului ce meniu ați ales ca principal.

Cum se creează?

Pentru a crea un modul de meniu, trebuie să aveți drepturile corespunzătoare. În mod implicit, acest modul poate fi creat doar de un super administrator.

• Din meniul principal al panoului administrativ, accesați fila Module;
• În bara de instrumente a filei, faceți clic pe butonul „Creare”;
• Din lista de tipuri de module, selectați Tipul de meniu;
• Completați setările modulului de meniu în 4 file. Să salvăm;
• Întregul meniu a fost creat, după ștergerea cache-ului site-ului va apărea pe site.

Setări pentru modulul de meniu Joomla

Să ne uităm la cele 4 file ale setărilor modulului de meniu.

Fila 1 - Modul

Fila de setări principale. Aici

Asigurați-vă că completați numele modulului;

Dacă doriți să ascundeți numele modulului, ascundeți-l imediat în setarea din dreapta „Afișați titlul”;

În câmpurile de setări trebuie să: selectați meniul însuși pe care doriți să-l afișați (1), selectați elementul de meniu de bază (2), indicați elementul de meniu de început (3) și de sfârșit (4) și decideți dacă să afișați meniul subarticolele (5).

Cu setarea (2) puteți muta meniul în meniul de bază cu o structură complexă a site-ului. Dacă luați elementul de meniu curent recomandat, atunci elementul de meniu activ cel mai apropiat senior va fi selectat ca element de bază.

Specificarea elementului de meniu inițial (3) și final (4) vă permite să scurtați meniuri lungi și structuri complexe de site. Scop similar Setări afișează sub-articolele din meniul (5).

În partea dreaptă a filei, asigurați-vă că completați afișajul antetului (6), starea (8) și poziția în șablon (7). Alte setări sunt opționale.

class="eliadunit">

Câmpurile „Comandă” sunt interesante, aici puteți clasa imediat modulul pe care îl creați în modulele acestei poziții. Acest lucru se poate face și în tabelul modulelor trăgând modulul.

O „Notă” este creată pentru administratorii site-ului și este vizibilă în tabelul cu module.

„Începutul publicării” vă va permite să programați lansarea modulului după dată.

Fila 2 - Snap

Aici trebuie să alegeți pe ce pagini ale site-ului va fi afișat acest modul. Setarea implicită este „Pe toate paginile”.

Selectarea paginilor de afișare se efectuează folosind elementele de meniu din filtrul „Pe toate...”, „Niciuna”, „Numai pe specificat”, „Pe toate, cu excepția celor specificate”.

De exemplu, doriți să afișați modulul pe care îl creați doar pe pagina principală. Pentru a face acest lucru, selectați „Numai la specificat” în filtru și selectați bifa în lista de meniu, numai meniu pagina principala(materiale selectate).

Fila 3 - Setări avansate

Aici puteți seta un unic aspect modul dacă șablonul dvs. are stiluri de module suplimentare sau ați creat singur astfel de stiluri de modul.

Poți să faci invers. Aici, specificați oricare dintre „Sufixul de clasă de meniu” și „Sufixul de clasă CSS al modulului”, apoi adăugați propria regulă CSS la acest modul.

Spre deosebire de setările altor module, există o modificare a stilurilor Java Script din meniul drop-down (Poziție de destinație).

Fila 4 - Drepturi

Completat pentru site-uri cu mai mulți utilizatori cu mai mult de un administrator.

După completarea tuturor câmpurilor, modulul de meniu de pe site-ul Joomla trebuie să fie salvat și vizualizat pe site după golirea memoriei cache.

Concluzie

În această lecție ne-am uitat la modulul Meniu de pe un site web Joomla. Foarte util pentru crearea unui subsol complet al site-ului cu meniuri de navigare tehnice și informaționale suplimentare.

Elementele de meniu din Joomla sunt extrem de importante deoarece... ele formează întreaga structură a sitului. Elementele de meniu sunt cele care determină ce va fi încărcat pe pagină și cum. Și toate acestea sunt determinate într-una dintre secțiunile Joomla - meniul.

Există multe varietăți de rezultate bazate pe elemente de meniu, dar, desigur, toate sunt rareori utilizate. Vom vorbi acum despre cele mai populare.

Vom adăuga elemente de meniu la final Meniu principal Joomla, care este prezentat imediat după instalare.

Element de meniu de bază

1. Accesați crearea unui element de meniu pentru un singur meniu (Meniul principal).

2. Primul lucru introduceți numele element de meniu propus. În continuare trecem la selectarea tipului de element de meniu, unde se face alegerea scopului său.

3. In fata noastra este intreaga lista de destinatii. Secțiunea cea mai comună a listei este „Materiale”. Produce unul sau mai multe materiale, de ex. continutul site-ului principal.

Acum afișăm un singur material.

4. Tot ce trebuie să faci este să alegi cel mai important lucru este materialul în sine. Faceți clic pe butonul nou: „Selectați”.

5. Se va afișa lista absolut toate materialele pe care le-am creat vreodată în Joomla. Selectăm materialul pe care vrem să-l expunem.

6. Cel mai important lucru este făcut! Poate sa persista.

7. Pe site-ul web din „Meniul principal” existent, va apărea un articol nou acolo unde puteți mergeși asigurați-vă că funcționează.

O altă opțiune de meniu

1. Pagina pe care aterim este după ce parcurgeți elementul de meniu, acesta poate fi de un tip complet diferit, cum ar fi blog de categorie.

2. Pentru un blog de categorie apare buton nou, unde trebuie să selectați una dintre categorii. Categoriile sunt necesare deoarece Ei sunt cei care împărtășesc toată diversitatea materialelor. De exemplu, puteți lua categoria standard în care toate materialele sunt împărțite implicit.

3. Un nou articol de meniu este acum disponibil pe site-ul web, Când faceți clic pe el, mai multe materiale sunt afișate simultan. De fapt, ieșire toate materialele categoria pe care am ales-o și chiar sunt împărțite în pagini.

Aceasta este doar o mică parte din capacitatea Joomla de a afișa conținutul site-ului. Puteți personaliza fiecare mic detaliu și puteți depana paginile în funcție de cerințele dvs.: afișați contacte, link extern, link de descărcare și multe altele.

Dacă vrei să te întorci meniu vertical Vorizontală, apoi consultați lecția: