Cum să faci un meniu într-un meniu, un meniu din imagini, un meniu ascuns în Joomla. Crearea și personalizarea meniurilor în Joomla

Continuăm să ne familiarizăm cu administrarea Joomla 3. În acest articol ne vom familiariza în detaliu cu posibilitatea meniului de sistem Joomla. Probabil că nu este nevoie să spunem ce este un meniu de site. Este suficient să spunem că pe un site Joomla meniul poate fi plasat vertical în dreapta și/sau orizontal în zona antetului site-ului.

Din informațiile generale despre meniul Joomla, este de menționat că materialele de categorie care nu sunt atașate niciunui meniu de site nu vor fi vizibile pe site.

Meniuri și elemente de meniu Joomla 3

Meniurile site-ului Joomla sunt create de administratorul site-ului sau utilizatorii site-ului cu permisiuni de a gestiona meniul site-ului. Drepturile de gestionare a meniului sunt setate în Componente→Manager de meniu→fila Permisiuni.

Meniul Joomla în sine nu este informativ, ci o unitate de sistem a site-ului. Este creat un meniu pentru crearea ulterioară a elementelor de meniu informative.

Notă: Pe site-ul Joomla puteți crea orice număr de meniuri și orice număr de elemente de meniu cu orice adâncime de imbricare. Imbricarea meniului este un arbore de următorul tip: articole de meniu - subarticole ale elementelor de meniu - subarticole ale subarticolelor articolelor de meniu etc.

Cum se creează un meniu pentru site-ul Joomla

Pentru a crea un meniu de site, deschideți fila: Meniu→Manager de meniu→Creați un meniu dintr-o bară orizontală sau Structură→Manager de meniu→Creați un meniu pentru meniul vertical al părții administrative a site-ului.

Dăm meniului un nume, asigurați-vă că introduceți numele sistemului al meniului (tipul meniului). Tipul de meniu poate fi orice cuvânt latin care indică clar scopul meniului. De exemplu, meniu principal, meniu principal, meniu de sus, meniu subsol.

Cum se creează elemente de meniu (subelementele de meniu)

Crearea elementelor de meniu se face pe fila: Meniu → Nume meniu → Creare element de meniu.

Tipuri de elemente din meniu

După cum am menționat deja, elementele de meniu Joomla 3 sunt unități informative ale site-ului. Folosind elementele de meniu, puteți deschide pagini de pe site cu informații diverse. Aceste informații pot varia și, în funcție de tipul de informații, sunt create diferite tipuri de meniuri. Să ne uităm la tipurile de elemente de meniu:

Tip de element de meniu

1. Contacte (4 tipuri);

2. Fluxuri de știri (3 tipuri);

3. Materiale (7 tipuri), și anume

  • Materiale de arhivă;
  • Materiale alese;
  • Material;
  • categoria blog;
  • Creați material;
  • Lista tuturor categoriilor de site-uri;
  • Lista materialelor dintr-o categorie.

4.Manager de setări;

5.Manager de utilizatori (7 tipuri);

6. Etichete (3 tipuri);

7.Ambalaj;

9. Sistem (4 tipuri);

10.Căutare inteligentă.

După cum puteți vedea, există multe tipuri de elemente de meniu și cu ajutorul lor puteți organiza o navigare foarte bună pe site.

Destul de teorie, să trecem la practică și să creăm un meniu cu două sau trei elemente de meniu.

Un exemplu de creare a unui meniu de site Joomla

Să creăm un meniu numit „Meniu1”. Numele sistemului va fi „meniu-1”.

Accesați fila: Meniu → Creare meniu.

Pe pagina de creare a meniului, specificați numele acestuia „Menu1” și numele sistemului „meniu-1”.

Faceți clic pe butonul „Creați”.

Toate! Meniul a fost creat.

Ce înseamnă numele meniului de sistem?

Vă voi arăta pentru ce este numele meniului de sistem. Accesați phpmyadmin, managerul bazei de date a site-ului.

  • Căutăm tabelul: prefix_menu_types.
  • Deschideți-l (faceți clic pe nume), care corespunde interogării SQL:
  • SELECTAȚI * FROM `prefix_menu_types`
  • Și vedem numele de sistem al meniurilor create (tipul meniului).

Concluzie: Numele sistemului de meniu este necesar pentru a crea valori unice în câmpurile tabelului menu_types din baza de date Joomla.

Deci, am creat meniul Joomla, este timpul să creăm elemente de meniu.

Crearea elementelor de meniu Joomla

În fila Meniu → Elemente de meniu → Creare meniu, creați un element de meniu.

class="eliadunit">

Dați un nume articolului de meniu.

Selectați tipul de element de meniu. Să fie un tip de meniu: Categorie Blog.

Specificați fereastra țintă: O nouă fereastră cu elemente de navigare.

În dreapta indicăm numele meniului nostru și elementul părinte al acestui element de meniu (2,3).

În alte file, setăm alte setări ale elementelor de meniu:

Opțiuni de aspect pentru blog (3) – șablon de blog. Puteți specifica numărul de coloane.

Display (4) – șablon pentru afișarea materialului individual;

Setări de integrare (5) – permiteți crearea de fluxuri RSS pentru acest element de meniu.

Opțiuni de pagină (7). Aici puteți seta un titlu alternativ care va fi vizibil în browser. De asemenea, puteți activa „Titlul paginii”. Acesta va fi vizibil la începutul tuturor paginilor acestui element de meniu în etichete

, care se potrivește cu toate paginile categoriei blogului.

Metadate (8). Trebuie să completați metadatele pentru acest blog, și anume descrierea și cuvintele cheie. Descrierea trebuie să fie unică și să nu aibă mai mult de 165 de caractere. Cuvintele cheie sunt opționale.

După ce ați verificat toate setările elementului de meniu, faceți clic pe „Creare” sau „Creare închidere”.

Toate! Elementul de meniu a fost creat. Mai rămâne doar să plasați meniul pe site.

Cum să plasați un meniu pe un site web Joomla

Vom plasa două meniuri pe site. Derulant orizontal și vertical cu afișarea întregului arbore de meniu.

Cum să plasați un meniu vertical Joomla orizontal

Meniul derulant orizontal Joomla este plasat într-un modul special de șablon numit „meniu”. Câmpuri suplimentare pentru plasarea meniurilor pot fi create în șablon, de exemplu footermenu, topmenu.

Pentru a crea un modul de meniu, accesați fila: Module Manager →Create Menu. Selectați tipul de modul „Meniu”.

Setări modul de meniu

În fila „Legarea la elementele de meniu”, indicăm pe ce pagini ale site-ului să afișați acest modul cu meniul.

De la autor: Salutari draga prietena. În acest articol vom vorbi despre cum se creează un meniu vertical pentru joomla 3. Desigur, subiectul nu este nou și a fost deja discutat de mai multe ori în articole de pe site-ul nostru și cel mai probabil știți foarte bine cum este implementat acest element. Dar, deoarece meniul este cel mai important bloc al oricărui site web bun, cred că nu ar strica să luăm în considerare câteva extensii suplimentare care facilitează crearea acestui bloc de navigare.

Deci, așa cum am menționat mai sus în acest articol, ne vom uita la două module destul de interesante care formează un meniu vertical în CMS-ul Joomla. Aceasta înseamnă că primul modul pe care îl vom lua în considerare este Simple Responsive Menu.

În mod tradițional, pe pagina de descriere a extensiei curente, faceți clic pe butonul „Descărcare” pentru a accesa site-ul web oficial al dezvoltatorului.

La momentul scrierii acestui articol, cea mai recentă versiune actuală este 1.10, așa că o descarcăm folosind butonul „Descarcă acum”. După descărcare, instalați modulul ca de obicei. Folosind managerul de extensii Joomla.

Vă rugăm să rețineți că modulul afișează un meniu specific, ceea ce înseamnă că trebuie să îl creați înainte de a publica modulul. Apoi, accesați managerul de module.

Și accesați pagina de configurare a modulului nou instalat.

În parametrul „Selectare meniu”, selectați meniul ale cărui articole vor fi afișate ca conținut al modulului. Dacă meniul este pe mai multe niveluri, adică conține atât link-uri părinte, cât și linkuri pentru copii, atunci în parametrul „Afișați articolele submeniului”, trebuie să specificați „Da”, în acest caz sub-articolele vor fi afișate pe ecran . De asemenea, folosind parametrii „Start level” și „End Level”, puteți determina nivelul inițial și final de imbricare al legăturilor, adică acele niveluri care vor fi afișate pe ecran. Și, în final, selectăm o poziție pentru afișarea modulului pe ecran, indicăm pe ce pagini va fi disponibil și determinăm starea „Publicat”.

Acum să trecem la partea utilizator pentru a verifica rezultatele.

După cum puteți vedea, extensia funcționează excelent. În același timp, modulului i-a fost adăugată adaptabilitatea, adică la o anumită dimensiune a ecranului, conținutul modulului este restrâns într-o listă derulantă, economisind astfel în mod semnificativ spațiul utilizat pe ecran.

Parametrii responsabili pentru receptivitate sunt incluși în fila „Opțiuni de răspuns” din pagina de setări a modulului curent. Acum să trecem la următorul modul, numit Joombig Menu Tree.

Acest modul afișează pe ecran un meniu vertical, al cărui aspect este foarte asemănător cu arborele directoarelor și fișierelor sistemului de operare Windows. Ca de obicei, faceți clic pe butonul „Descărcare” pentru a accesa site-ul web oficial al dezvoltatorului.

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul pentru o creștere rapidă de la zero în construirea site-ului web

Acum accesați pagina de configurare a modulului nou instalat.

Parametri disponibili pentru configurare:

Activați/Dezactivați jQuery – conectați propria bibliotecă jQuery;

Lățimea modulului (%) – lățimea modulului în procente;

Marja – marjele externe;

Select Menu – selectează meniul afișat de modul;

Afișare/Ascunde directorul de titluri – arată sau ascunde titlul directorului părinte (linia care va fi afișată deasupra tuturor elementelor de meniu)

Director cu titluri – titlul elementului de nivel superior;

Start Level – nivel inițial pentru afișarea unui meniu cu mai multe niveluri;

End Level – nivelul final de afișare al unui meniu cu mai multe niveluri;

Afișare articole din submeniu – dacă să afișați elementele din submeniu.

După publicarea modulului, accesați partea utilizator pentru a verifica rezultatele.

În general, un modul de meniu este un modul destul de simplu care, în mare, poate fi creat independent, dar pentru aceasta trebuie să cunoașteți API-ul Joomla CMS. Prin urmare, dacă doriți să învățați cum să vă creați propriile extensii care vor rezolva pe deplin sarcinile atribuite, cursul nostru Joomla-Professional vă va fi util. Crearea extensiilor pentru Joomla.

Aceasta încheie acest articol. Toate cele bune pentru tine și codificare fericită!!!

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul pentru o creștere rapidă de la zero în construirea site-ului web

Salutare tuturor! poate fi împărțit în două componente: prima este meniul în sine, iar a doua este elementele sale. Sună foarte ciudat. Meniul în sine este, de fapt, o casetă pe care o vom crea, denumi și afișa pe site folosind modulul corespunzător. Dar acest lucru nu este suficient, trebuie încă completat cu informațiile necesare - puncte. Conținutul paginii site-ului către care duce va depinde de tipul și setările articolului. În acest articol ne vom uita la toate aspectele lucrului cu meniurile Joomla: crearea, personalizarea și adăugarea paginilor site-ului.

Până acum, cele de mai sus arată foarte confuz. Acum vom lua în considerare lucrul cu totul în ordine.

Crearea și personalizarea unui meniu Joomla

Pentru a lucra cu meniul, trebuie să utilizați managerul corespunzător, pentru care există chiar și un articol separat în .

Imediat după instalarea Joomla, există deja un meniu - Principal. Dacă te uiți la el, poți chiar să vezi articolul cu același nume - „Acasă”.

De ce ne-au pregătit deja toate astea? Aici ajungem la regula fundamentală în Joomla: o pagină începe să existe numai după crearea unui element de meniu (MU) asociat cu ea (referindu-se la aceasta). Și nu contează dacă meniul este afișat pe site sau nu, principalul lucru este că acesta este acolo și există un articol pe pagina corespunzătoare. Chiar și pagina principală este creată după acest principiu. Dacă mergem mai departe în raționamentul nostru, putem spune asta în Joomla nu există pagini ca atare, există elemente de meniu care îndeplinesc acest rol. Tipul articolului este responsabil pentru informațiile care vor fi afișate în zona de conținut a noii pagini.

Care este rezultatul? Ai nevoie de o pagină nouă? Creăm un meniu, creăm un articol cu ​​tipul dorit și obținem o pagină nouă. Conținutul paginii va depinde de tipul selectat și de setările PM. Acest lucru trebuie înțeles și reținut!

Mulți oameni, când se familiarizează pentru prima dată cu Joomla, cred că atunci când creează material nou prin managerul corespunzător, creează o nouă pagină de site. Este gresit. O pagină nouă este creată numai folosind Joomla PM. Tipul acestuia determină tipul de informații afișate în zona de conținut. Deci, materialul creat este doar unul dintre aceste tipuri de informații pentru zona de conținut.

Tot ce trebuie să faceți este să introduceți:

  • Titlu - va fi afișat în panoul de control, în lista de meniuri disponibile;
  • Tip - numele sistemului cu litere latine;
  • Descriere (optional.

Pentru a edita titlul, tipul și descrierea meniurilor deja create, trebuie să le marcați și să faceți clic pe butonul „Editare” din bara de instrumente. Dacă faceți pur și simplu clic pe nume, veți trece la editarea elementelor acestuia.

În consecință, pentru a șterge un meniu, marcați-l și utilizați butonul „Șterge”.

Adăugarea de elemente noi

Acum să trecem la partea distractivă. Crearea unui meniu este doar jumătate din luptă, principalul lucru este să-l umpleți cu articole! Pentru a face acest lucru, selectați un meniu din lista celor existente (doar faceți clic pe numele acestuia) și găsiți-vă în secțiunea responsabilă pentru articolele sale. Pentru a crea un articol nou, faceți clic pe butonul „Creare” din bara de instrumente. Să intrăm în constructorul de elemente, să ne uităm la setările acestuia.

Prima și principala opțiune este . Este responsabil pentru ce tip de informații vor fi afișate în zona de conținut a paginii. Există doar 29 de tipuri. Fiecare tip are propriii parametri obligatorii, care vă permit să specificați informațiile afișate în pagini.

De exemplu, tipul - material, este responsabil pentru afișarea materialelor create în zona de conținut a paginii, parametrii necesari vă permit să selectați care dintre materialele existente vor fi adăugate în această pagină;

A doua opțiune necesară este Titlu - sub acest nume elementul va fi adăugat în meniu.

  • Alias ​​​​- opțional. Cu SEF activat, Joomla va genera automat o adresă URL care poate fi citită pentru pagina nouă.
  • Notă - o mică notă explicativă.
  • Link - va fi completat automat după salvarea PM. Adresa URL originală a paginii va fi afișată înainte de a o converti într-un formular care poate fi citit de om (SEF).
  • Stare: publicat - dacă meniul a fost deja postat pe site, atunci acest articol va apărea pe el imediat după salvare; nepublicat - articolul va fi salvat, dar nu va apărea pe site; în coș - șterge.
  • Acces — definește nivelul de acces.
  • Meniu - unde să adăugați elementul creat.
  • Element părinte - în mod implicit, acesta este rădăcina PO, dar îl puteți transforma și într-un subelement (element copil) al altui PO.
  • Comanda - capacitatea de a seta un număr de serie pentru un articol, apare după ce acesta este salvat.
  • Fereastra țintă - în ce fereastră de browser se deschide pagina către care se leagă acest element de meniu.
  • Pagina principală - pagina creată va deveni pagina principală a site-ului. Vă rugăm să rețineți că există o singură pagină principală.
  • Limba pentru acest element de meniu.
  • Stil șablon—definiți stilul pentru o nouă pagină de site. În mod implicit, va fi folosit stilul șablonului Joomla activ.
  • ID - număr unic de identificare.

Setarea ordinii elementelor de meniu

Lista PM-urilor este strict ordonată - se respectă ierarhia și ordinea.

Ierarhia reprezintă un fel de arbore în care fiecare element este un element frate (stă la un nivel al ierarhiei), părinte (nivel superior) sau copil (stă cu un pas mai jos și este un subelement al elementului părinte) pentru alte elemente de meniu .

De exemplu, în imaginea pentru articolul „Franța”: „Marea Britanie” și „Germania” sunt frați, iar „Europa” este elementul părinte.

Ordinea de apariție determină aranjarea elementelor de meniu care se află la același nivel al ierarhiei și sunt legate de același element părinte. Ordinea poate fi modificată folosind săgețile.

Modulul de meniu Joomla

Meniurile sunt:

1. Imaginare - nu sunt afișate pe site, ci sunt create doar pentru a adăuga elemente la ele și, prin urmare, a crea noi pagini de site.

2. Valabil - afișat pe site și folosit pentru navigare.

Dacă ați citit deja articole despre modulele Joomla, ar fi trebuit să ghiciți că meniul este afișat pe site folosind modulul corespunzător cu același nume.

În articolele anterioare, am vorbit deja despre și despre, inerente doar modulului Meniu. Pentru claritate, să le considerăm în relație cu un meniu din stânga arbitrar.

1. Detalii.

  • Titlu - dacă titlul va fi afișat pe paginile site-ului, atunci ar trebui să fie semnificativ și de înțeles, în primul rând, pentru cititor. Dacă titlul nu este afișat pe site, atunci nu trebuie să vă faceți prea multe griji pentru el.
  • Afișați titlul - respectiv, afișați sau nu titlul specificat mai sus pe paginile site-ului.
  • Poziție - Poziția pentru modul depinde de . Cel mai adesea, determinarea unui loc pentru un meniu viitor nu este dificilă: spațiul este alocat pentru meniul principal în antetul site-ului, iar pentru cele suplimentare - în coloanele din stânga sau din dreapta. Desigur, există șabloane mai simple care oferă doar coloane din stânga sau din dreapta pentru meniu.
  • Stare - selectați „Publicat”, astfel încât imediat după salvare, meniul să apară pe paginile site-ului.
  • Acces - dacă acesta nu este un meniu de sistem pentru administratorii Joomla, ci este normal pentru toți utilizatorii site-ului, atunci părăsim nivelul de acces - „Pentru toată lumea”.
  • Ordine - definește ordinea în care modulele apar într-o singură poziție.
  • Începe/încheie publicarea - dacă meniul nu este temporar, atunci aceste opțiuni nu trebuie atinse.
  • Ultimele opțiuni nu necesită intervenția noastră.

După cum am spus deja, elementele de meniu din Joomla sunt, de fapt, pagini de site. Prin urmare, atunci când alegem un link către PM, selectăm paginile pe care va fi afișat acest meniu pe site.

3. Parametrii de bază

  1. Selectăm meniul pe care îl vom afișa pe site.
  2. După cum am spus, elementele de meniu sunt o ierarhie. Această opțiune vă permite să specificați ce niveluri din această ierarhie vor fi afișate. Pentru a afișa toate PM, inclusiv sub-articolele, specificați „1” la nivelul inițial, „Toate” la ultimul nivel și selectați „Da” în următoarea opțiune.

Ei bine, se pare că am înțeles totul! Vă mulțumim pentru atenție și ne vedem curând. Întotdeauna al tău Dmitry Afonin.

Scor JED: total - 28, funcționalitate - 50, suport - 23, documentație - 28.

Meniul BM Cool- una dintre preferatele mele module gratuite și sigure pentru CMS Joomla 3 . Îmi place simplitatea și concizia sa, adaptabilitatea (ceea ce se vede rar în opțiunile gratuite) și capacitatea de a o personaliza cu ușurință manual. În forma sa pură, această extensie nu mi s-a potrivit, dar cu unele ajustări ale fișierului CSS nu au mai rămas probleme. Cred că evaluările scăzute ale modulului din catalogul Joomla JED se explică tocmai prin necesitatea configurației sale manuale. Nu este atât de dificil pe cât pare. Mai mult, am salvat propriile setări ale fișierului CSS pentru mine și pentru tine într-un fișier separat.

Acest modul este ideal pentru cei care au nevoie de un meniu orizontal adaptiv simplu și complet gratuit pe site-ul lor cu Joomla 3. Voi spune imediat că este acceptă meniuri cu mai multe niveluri, dar personal am avut anumite probleme cu asta pe unele site-uri. Nu m-am ocupat încă de ele, deoarece am găsit alte opțiuni; dar cred că problema este un conflict între bibliotecile jQuery - acest lucru poate fi mai mult decât rezolvat dacă se dorește.(Vă spun mai jos cum le-am rezolvat. Nu este deloc jQuery pentru meniurile cu un singur nivel, modulul este mai mult decât optim). Îl folosesc pe majoritatea site-urilor mele.

Demo a modulului BM Cool Menu

Demo-ul actual al acestui modul este prezentat în antetul acestui site. Este, de asemenea, duplicat în subsol. Puteți vedea cum funcționează acest meniu cu o structură pe mai multe niveluri aici.

Setări pentru modulul gratuit de meniu adaptiv BM Cool Menu

Setările acestui modul gratuit și securizat pentru crearea unui meniu receptiv (afișat la fel de bine atât pe computere, cât și pe dispozitive mobile) pe Joomla 3 includ următoarele elemente:

  • Afișați articolele din submeniu- afișați sau nu subarticole.
  • Culoarea textului- culoarea textului.
  • Culoarea textului cu mouse-ul- culoarea textului când treceți cursorul mouse-ului.
  • Fundalul meniului- culoarea de fundal a meniului.
  • Imagine de fundal- imagine ca fundal (setări în format css)
  • Arată chenar- arată cadrul sau nu.
  • raza frontierei- raza colțurilor de rotunjire în cadru.
  • Culoarea chenarului- culoarea cadrului.
  • Fundal activ- culoarea elementului de meniu activ.
  • Încărcați jQuery- dacă se conectează sau nu biblioteca jQuery.

Astea sunt toate setarile. Destul de simplu și concis. Personal, îmi plac astfel de module gratuite mai mult decât extensiile voluminoase și stângace, cu un număr mare de opțiuni pe care nu le voi folosi niciodată în viața mea.

Ajustarea manuală a stilurilor de meniu BM Coll

Acum voi spune câteva cuvinte despre ajustarea manuală a modulului pentru a crea un meniu adaptiv pe Joomla 3 BM Cool Menu. Problema pe care am întâlnit-o a fost când am decis să elimin complet raza și culoarea chenarului. După efectuarea modificărilor corespunzătoare în setările modulului din panoul de administrare de pe computer în modul extins (pagina completă), meniul a reflectat perfect toate aceste modificări, totuși, pe dispozitivele mobile și în fereastra minimizată, atât cadrul cât și rotunjirea au fost conservat. În plus, modulul comprimat s-a ridicat invariabil în partea de sus și a acoperit o parte a altui modul situat deasupra. Am vrut să personalizez afișarea meniului astfel încât toate elementele acestuia să fie aliniate în centru. Cert este că, de exemplu, pe un ecran de computer 4:3 totul părea destul de neted și decent, dar pe 16:9 meniul era apăsat la stânga și părea cumva greșit. Ei bine, plus totul, am decis să scot banda luminoasă care separă elementele din meniu.

Soluția a fost găsită prin modificarea sau comentarea unor linii din fișierul css al modulului, care se află de-a lungul căii: /modules/mod_bm_cool_menu/assets/css/style.css. Pentru orice eventualitate, am salvat fișierul vechi neatins sub numele stil vechi.css. Iar în cel nou a făcut câteva modificări.

Alinierea meniului central

In clasa .bm-cool-meniu am inlocuit plutește la stânga; pe inline:bloc;(linia 29) și a făcut același lucru în clasa linia 37 .bm-cool-meniu a. De asemenea, adăugat la linia clasa 10 .bm-cool-meniu: text-align:center;

Eliminarea liniei albe de separare dintre elementele de meniu

Pentru a face acest lucru, comentez complet rândul 30. Pentru cei care au uitat sau nu au știut niciodată cum să facă asta: /*chenar-dreapta: solid subțire #fcfcfc;*/

Personalizare suplimentară a afișajului meniului pe dispozitivele mobile

Pentru ca meniul să nu acopere modulul (sau sigla) aflat mai sus în clasă .bm-cool-meniu-trigger(linia 167 și mai jos) Am adăugat umplutură în partea de sus: margine-sus: 10px;

Pentru a preveni apariția cadrului de meniu și colțurile rotunjite în versiunea mobilă, am comentat rândurile 173, precum și rândurile 175 până la 180.

Am postat fișierul style.css pe care l-am modificat în interiorul arhivei cu modulul prin link direct. Se numeste stilul meu.css. Dacă nu doriți să vă deranjați cu schimbarea manuală a stilurilor, îl puteți utiliza pur și simplu redenumindu-l în stil.css.

Aș dori să subliniez că modificările pe care le-am făcut privesc doar meniul cu un singur nivel. Cu toate acestea, nu este dificil să faci modificări adecvate pentru un design pe mai multe niveluri.

Schimbarea titlului meniului în versiunea mobilă

Ei bine, rămâne un detaliu foarte mic, dar semnificativ. Schimbați cuvântul Meniul, scris în latină atunci când vizualizați pagini în versiunea mobilă sau când minimizați pagina din browser într-o fereastră mică. S-ar putea presupune că ar trebui făcute modificări la fișierul de limbă - dar nu. Se pare că trebuie să puneți titlul meniului în fișier de-a lungul căii: /modules/mod_bm_cool_menu/tmpl/default.php(linia 14).

Asta e tot. Cred că ți-am spus principalul lucru. Recunosc sincer că am luat acest modul din întâmplare și, uitându-mă la notele lui, la început am fost destul de sceptic în privința lui. Totuși, după ce am încercat alte opțiuni și mi-am dat seama că în catalogul oficial există foarte, foarte puține meniuri adaptive gratuite și sigure, m-am întors la asta și am început să-l personalizez în continuare. Îl folosesc acum pe majoritatea site-urilor mele.

Rezolvarea problemei cu BM Cool Menu nu funcționează

Problema pe care o am în minte este următoarea: pe unele site-uri pe care le-am avut, BM Cool Menu nu a extins sub-articole nici la hover, nici la clic. Am crezut multă vreme că există un fel de conflict de scenariu. Când am găsit în sfârșit timp să-mi dau seama, am văzut că nici pe un site Joomla 3 complet curat, tocmai instalat, meniul nu s-a deschis. Atunci mi-a devenit clar că nu era vorba deloc de conflicte. Experimental și cu prețul unui număr imens de celule nervoase, am reușit totuși să stabilesc asta problemă cu extinderea și afișarea meniului cu mai multe niveluri BM Cool Menu apare numai în Poziția-1 a șablonului standard al șablonului Joomla Protostar. Prin mutarea acestui modul în orice altă poziție (de exemplu, banner), se întâmplă miracole - și începe să funcționeze.

Dacă trebuie neapărat să plasați meniul în Poziția-1, atunci va trebui să ajustați ușor fișierul index al șablonului Protostar (index.php în rădăcina șablonului - /templates/protostar/index.php). Faptul este că, implicit, ieșirea acestei poziții este înfășurată într-un container de navigare cu clasa nativă de meniu navigator Joomla 3. Prin eliminarea acestui „wrapper” și înlocuirea stilului de la „none” la „xhtml”, obținem poziția 1, în care modulul BM Cool Menu va începe să funcționeze așa cum ar trebui.

Deci, găsim acest fragment:

nav class="navigation" role="navigation">

Ștergem rândurile 1 și 3 și înlocuim, de asemenea, „niciunul” în a doua linie cu „xhtml”. Asta e soluția.

Link-uri BT Content Slider - modul de flux de știri sub forma unui slider

DEMO oficial al modulului BM Cool Menu

Pagina modulului BM Cool Menu din catalogul oficial de extensii Joomla

Site-ul oficial al modulului BM Cool Menu

Descărcați modulul BM Cool Menu prin link direct

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 ajustat ușor scriptul meniului în sine și stilurile CSS, am obținut același rezultat ca în .

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 imagini în 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? Cert este că, dacă ați observat, pe site-ul demo există două opțiuni pentru afișarea acestui meniu. Puteți privi cu atenție cum diferă unul de celălalt. Conectăm versiunea noastră preferată a scriptului menu.js sau menu-collapsed.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 index.php al șablonului, introduceți următoarele rânduri:

addStyleSheet(JUri::base()."/templates/".$this->template."/css/vmenu.css"); // include fișierul de stil $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 ( font: bold 12px Arial,Helvetica,sans-serif; list-style: none outside none; margin: 0; padding: 0; list-style:none; ) ul.vmenu li ( margin: 0 0 2px; ) ul.vmenu li a ( fundal: url("../images/vmenu-li-bg.jpg") stânga jos repetare-x; chenar: 1px solid #D5D5D5; -moz-border-radius: 3px; -o - border-radius: 3px -webkit-border-radius: 3px display: block: 5px 8px ) ul.vmenu li > a:hover, ul.vmenu; vmenu li > a:focus (background-color:transparent; color:#0088CC) ul.vmenu li.parent > a:after ( background:url("../images/arrow-dropdown.png") no-repeat; conținut:""; margin:8px 0 0; list-style:none; ) ul.vmenu li ul li ( background:none; margin:0 0 5px ) ul.vmenu li ul li a ( background: url("../images/vmenu-arrow.png") no-repeat scroll 5px center transparent !important; chenar: mediu nici un padding: 0 0 0 15px ) ul.vmenu li a:hover (color:#29719E;text-decoration:underline) ul.vmenu li ul li.active a (color:#29719E; 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; margin: 0; padding: 0; list-style:none; ) ul.vmenu2 li (marja: 0 0 2px; ) ul.vmenu2 li a ( fundal: url("../images/vmenu-li-bg.jpg") stânga jos repetare-x; chenar: 1px solid #D5D5D5; -moz-border-radius: 3px; -o-border-radius: 3px color: 5px 8px ) ul.vmenu2; activ > a, ul.vmenu2 li > a:focus (culoare-fond:transparent; culoare:#0088CC) ul.vmenu2 li.parent > a:after ( background:url("../images/arrow-dropdown.png") no-repeat; display:block; content:""; float:right; margin:8px 5px 0 0; height:3px width:6px ) /* Elemente derulante */ ul.vmenu2 li ul ( font-weight: normal; margin: 10px 0 10px 15px; list-style: none; ) ul. vmenu2 li ul li ( background:none; margin:0 0 5px ) ul.vmenu2 li ul li a ( background: url(". ./images/vmenu-arrow.png") derulare fără repetare 5px centru transparent !important; chenar: mediu nici unul; umplutură: 0 0 0 15px; ) ul.vmenu2 li ul li a:hover (culoare:#29719E;text -decor:subliniat) ul.vmenu2 li ul li.active a (culoare:#29719E;font-weight:bold)

Acest fișier conține stilurile ambelor opțiuni și puteți elimina stilurile opțiunii de meniu de care nu aveți nevoie.

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:

addScript ("http://code.jquery.com/jquery-latest.min.js"); //include cea mai recentă versiune a bibliotecii jQuery ?>

Vom obține ceva de genul acesta:

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!

Ți-a plăcut articolul? Impartasiti cu prietenii: