Cum să faci un meniu drop-down în WordPress? Meniu vertical simplu derulant în WordPress

Descrierea celor mai bune pluginuri gratuite de meniu WordPress care vă vor permite să creați cu ușurință meniuri verticale și orizontale pe site-ul dvs.

Widget jQuery Mega Meniu vertical

Acest plugin WordPress vă va permite să adăugați un meniu vertical la coloanele dvs. atunci când creați un widget, trebuie doar să utilizați meniul utilizator din WordPress folosind acest plugin.

Caracteristici ale widgetului JQuery Vertical Mega Menu:

• Numerotarea elementelor într-o linie
• Efect de animație
• Controlul animației
• Viteza animației
• 8 huse diferite

Meniurile Admin Fixate

Acesta este unul dintre cele mai faimoase pluginuri gratuite de meniu pentru WordPress, care vă permite să adăugați o varietate de meniuri. Nu aveți nevoie de derulare suplimentară.

Caracteristici ale meniurilor de administrare remediate:

• Funcționează cu WordPress 3.5+
• Are trei meniuri de administrare opțiuni fixe
• Include tabloul de bord WordPress
• Integrat automat în WordPress
• Afișează elementul ferestrei admin

Widget jQuery Mega Menu

Creați diverse meniuri drop-down folosind meniul utilizator în WordPress pur și simplu folosind jQuery.

Caracteristici ale JQuery Mega Menu:

• Hover/Click
• Numerotarea elementelor într-o linie
• Coperți multiple
• Efect de animație
• Viteza animației
• Submeniu setat

Meniul WP-Easy

Generați automat clasificări pentru meniuri, postări personalizate și adăugați linkuri personalizate către site-ul dvs.

Caracteristici ale meniului WP-Easy:

• Pagini sau linkuri personalizate
• Crearea unui meniu încorporat
• Operare automată a meniului

Meniul dropdown jQuery

Creați meniuri derulante orizontale și verticale cu acest faimos plugin de meniu în WordPress

Caracteristici ale meniului dropdown jQuery:

• Culoare de fundal în meniul principal
• Borduri rotunjite (sau nu)
• Separarea butoanelor
• Indicatorul mouse-ului peste culoarea de fundal
• Setează dimensiunea și culoarea fontului în meniu

Meniu derulant Widget

Acest plugin gratuit de meniu WordPress vă permite să creați meniuri de navigare derulante personalizate și are o varietate de teme CSS care fac parte din caracteristicile de bază ale pluginului.

Caracteristici ale widgetului meniu dropdown:

• Meniu derulant numai pentru CSS
• Pagini de listare
• Aranjament vertical sau orizontal
• Selectarea temelor pentru widget

Meniul drop-down Admin Ozh

Creați un meniu vertical frumos orizontal folosind pluginul Ozh’ Admin Drop Down.

Caracteristici ale meniului drop-down Ozh’ Admin:

• Meniu derulant pentru CSS
• API pentru programatori
• Instalările WordPress nu sunt acceptate

Meniu WordPress vertical

Schimbați aspectul meniului de la vertical la orizontal, pluginul este compatibil cu WordPress 3.0 și o versiune ulterioară.

Caracteristici ale meniului WordPress Vertical:

• Meniu personalizat folosind diferite opțiuni
• Remediați poziția meniului în timpul derulării
• Efecte Flash frumoase
• Interfața este complet integrată în administrarea WordPress

Pluginul oficial pentru OpenMenu

Creați un meniu derulant folosind pluginul oficial pentru OpenMenu și distrați-vă cu el.

Caracteristici ale OpenMenu:

• Tipul de intrări de utilizator pentru OpenMenu
• Funcții personalizate
• Setări pentru lățimea site-ului
• Meniu Vizualizare Control

Vizualizare pagină Arboresc Meniu Admin

Numele acestui plugin de meniu gratuit pentru WordPress spune cum funcționează, puteți edita și vizualiza cu ușurință ordinea setată pentru meniul drop-down.

• Posibilitate de schimbare a comenzii
• Răsfoiți toate paginile
• Structura arborescentă ierarhică
• Compatibil WPML

Widget meniu taxonomii personalizate

Un meniu de clasificare foarte simplu poate fi creat folosind Widget-ul Meniu Taxonomii Personalizate și puteți utiliza panoul de control al widget-ului pentru opțiuni suplimentare.

Caracteristici ale widgetului meniu Taxonomii personalizate:

• Selectarea unei clasificări de utilizator de afișat
• Modificarea ordinii de afișare în clasificări personalizate
• Posibilitatea de a alege dacă să afișați clasificarea
• Posibilitatea de a alege dacă să afișați lista de termeni ca ierarhie

jQuery Accordion Menu Widget

Utilizați widget-uri și coduri scurte mai avansate pentru a crea meniuri derulante frumoase cu acest plugin gratuit pentru meniuri.

Caracteristici ale widgetului JQuery Accordion Menu:

• Faceți clic/Hover
• Extindere automată în funcție de pagina/articolul curent
• Dezactivează linkurile părinte
• Meniuri diverse
• Întârzierea trecerii cursorului

Vizualizare pagină Arboresc Meniu Admin

Meniuri convenabile de căutare și editare, crearea unui meniu derulant ierarhic și aranjarea tuturor meniurilor așa cum aveți nevoie.

Caracteristici ale vizualizării paginii arborelui meniului de administrare:

• Schimbarea ordinii paginilor
• Vizualizați toate paginile
• Compatibil WPML

Meniu de selectare receptiv

Încorporat automat în WordPress 3.0 și versiuni ulterioare, meniul din fereastra de selecție este cel mai bun pentru dispozitivele mobile. Acest plugin gratuit de meniu WordPress este destul de distractiv de utilizat.

Caracteristici ale meniului de selectare receptiv:

• Funcționare stabilă pe dispozitive mobile
• Navigare mai ușoară pentru dispozitivele cu ecran tactil
• Nu este necesar un cod PHP suplimentar

20.10.2012

admin

Cei care folosesc motorul WordPress probabil au observat că de multe ori nu este întotdeauna ușor să creezi meniul lateral dorit pe un site web. Cum să creați un meniu glisant vertical este exact ceea ce va discuta acest articol.

Nu este atât de dificil să plasezi un meniu orizontal de sus sau de jos în CMS-ul WordPress. Și pentru mulți începători nu va fi dificil să instaleze un astfel de meniu pe site-ul lor. Dar când vine vorba de navigare laterală, nu toată lumea știe exact cum să o facă. Dar locația meniului din stânga este considerată mai optimă din punctul de vedere al vizitatorului. Multe studii pot confirma acest lucru. Pentru că o persoană, după ce a intrat pe site, începe să-l monitorizeze, începând din partea stângă. Prin urmare, nu degeaba și Google și-a plasat navigarea în stânga rezultatelor căutării.

Instalarea unui meniu lateral în wordpress

Pentru a instala un meniu lateral în WordPress, puteți utiliza widget-ul „Meniu personalizat”. Cu toate acestea, înainte de aceasta, va trebui să vă creați propriul meniu unic. De exemplu, site-ul dvs. vinde echipamente de bucătărie, cum ar fi robinete, baterii și alte accesorii sanitare. Prin urmare, în primul rând, trebuie să creați pagini precum „Acasă”, „Produse”, „Articole”, „Despre noi”. În articole puteți posta materiale despre ce marcă să alegeți obiecte sanitare, cum să cumpărați o chiuvetă de bucătărie din piatră artificială, ce tipuri de robinete există etc. După care, ar trebui să mergeți la secțiunea „Meniu” din adminul WordPress. panoul și creați unul nou acolo meniu din aceste pagini, care va fi în lateral. Acum, așa cum am spus mai sus, puteți plasa un meniu lateral folosind un widget WordPress. Pentru a face acest lucru, trebuie doar să instalați widget-ul în bara laterală și să selectați meniul corespunzător din acesta. Sau puteți merge în altă direcție, utilizați un plugin special.

Instalarea video a pluginului jQuery Slick Menu

Crearea unui meniu vertical utilizând pluginul jQuery Vertical Accordion Menu

Acest plugin gratuit vă permite să creați un meniu glisant vertical. Mai mult, în mod implicit, există deja câteva opțiuni gata făcute pentru șabloanele de meniu, cu culori diferite. Cea mai importantă caracteristică a acestui plugin este că vă permite să creați un meniu glisant. Acest lucru este foarte convenabil dacă, să zicem, aveți mai multe sub-articole într-un singur element de meniu. Când treceți mouse-ul peste prima secțiune, se va deschide o listă suplimentară de articole. O altă caracteristică plăcută pe care o are Vertical Accordion Menu este prezența unui cod scurt pentru plugin special. Care pot fi plasate în postările site-ului în sine, creând astfel un meniu acolo.

Pluginul vă permite să creați meniuri de culori și stil diferite

Puteți instala pluginul prin intermediul panoului de administrare WordPress, tastând acolo „jQuery Vertical Accordion Menu” sau descărcați-l de pe site-ul oficial al autorului. După instalarea pluginului, trebuie să mergeți la „Widget-uri”, să găsiți widgetul plugin-ului acolo și să-l trageți în bara laterală. În widget-ul în sine veți găsi toate setările necesare pentru plugin. Aș dori să adaug că autorul jQuery Vertical Accordion Menu are și alte plugin-uri speciale care vă permit să creați diverse meniuri pe mai multe niveluri, atât verticale, cât și orizontale.

Astfel, crearea unui meniu vertical vertical (glisant) în WordPress nu este atât de dificilă dacă utilizați pluginuri speciale.

Toată lumea știe că navigarea pe site ar trebui să fie atât simplă, cât și cât mai convenabilă posibil. De aceea, mulți oameni folosesc un meniu derulant pe site-urile lor web. În acest articol ne vom uita pe scurt la cum să creați un meniu derulant pe site-ul dvs. WordPress și, mai precis, cum să faceți un meniu derulant sub antetul blogului.

Puteți crea un meniu drop-down atât pentru mai multe pagini, cât și pentru mai multe categorii, care sunt de obicei situate în partea dreaptă. Pentru ca meniul derulant WordPress să funcționeze corect, site-ul dvs. trebuie să aibă o pagină părinte și cel puțin o pagină secundară Iată cum va arăta întreaga bară de meniu:

1. Înainte de a crea un meniu derulant, asigurați-vă că ați eliminat meniul standard. Deschideți fișierul - sidebar.php, găsiți linia din el:

și îndepărtează-l cu îndrăzneală;

2. Acum deschideți fișierul - header.php, găsiți sfârșitul blocului „headerimg” și după acesta introduceți următoarele linii de cod:

Valoarea „meniu” indică faptul că meniul va fi pentru pagini, iar dacă modificați această valoare în „categorii”, atunci acest meniu va afișa toate categoriile create;

3. Acum trebuie să mergeți la style.css și să adăugați aceste stiluri acolo (de preferință după blocurile care sunt responsabile pentru antet):

/*responsabil pentru stilul general al blocului de meniu*/ #meniu ( înălțime: 30px; fundal: #4182b8; margine: 5px 20px 100px 20px; clar: ambele; font-size: 14px; ) /*responsabil pentru stilul de link-uri în meniu*/ #meniu li a( culoare: #fff; afișare: bloc; înălțime linie: 27px; padding: 0 10px; ) #meniu li a:hover ( fundal: #07599d; text-decor: niciunul; ) /*responsabil de stil pentru elementele de primul nivel, i.e. pagini copil*/ #menu li ( list-style: none; float: left; ) /*responsabil pentru stilul pentru elementele de meniu copil*/ #menu li ul li ( float: none; ) #menu ul ( background: #4182b8 ; marjă: 0;

4. În acest pas, vom schimba puțin CSS-ul astfel încât paginile active să fie evidențiate. Trebuie folosit următorul cod:

.current_page_item, .current_page_parent( fundal: #07599d; decor text: niciunul; )

5. Cel mai important și ultim pas este să faceți meniul drop-down. Pentru a face acest lucru, în style.css edităm ultimul bloc al stilului meniului derulant și îl facem astfel:

/*display:none line ascunde meniul drop-down*/ #menu ul( display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; )

Acum trebuie să conectăm jquery la șablonul nostru și pentru a face acest lucru mergem din nou la fișierul - header.php, scriem linia acolo:

Și adăugați codul care vă va permite să afișați meniul copil la hover:

jQuery(document).ready(function())( jQuery("#menu li").hover( function())( jQuery(this).find('ul').show(); ), function()) ( jQuery( this).find('ul').hide(); ) );

Iată cum va arăta meniul finit, care va mulțumi ochii vizitatorilor:

După cum înțelegeți, nu este nimic complicat în crearea unui meniu derulant și o puteți face singur pe site-ul dvs., principalul lucru este să faceți totul cu atenție.

Bună prieteni! Acum ne apropiem încet, dar sigur de configurația propriu-zisă a blogului, designul acestuia. Până în prezent, am depus deja multă muncă în vederea creării resursei noastre web.

Pentru cei care nu ni s-au alăturat încă, citiți articolele, urmați toți pașii și în curând ne veți ajunge din urmă. Și pentru confortul dumneavoastră și pentru a economisi timp, voi posta aici principalele postări de unde ar trebui să începeți:

Puteți găsi alte articole utile pe tema „Crearea unui blog” în secțiunea tematică de la link.

Mulți dintre voi, ca și mine, ați ales platforma pentru a vă crea proiectul, deoarece este foarte convenabil și simplu. Acest sistem are o funcție atât de minunată ca un meniu derulant, dar, din păcate, nu mulți oameni știu despre el. Deci, să vorbim cu tine despre cum să creezi un meniu drop-down în WordPress.

Tipuri de meniu

Există mai multe tipuri de site-uri WordPress:

1. Vertical, care se află în partea stângă a paginii, de obicei nu este suportat de șabloanele standard de pe site, așa că trebuie să descărcați pluginuri speciale care vă vor ajuta la configurarea acestui tip de meniu.

2. Orizontală- susținut de principalele teme WordPress, este destul de ușor de creat, deoarece nu sunt necesare programe suplimentare. Constructorul are practic instrumente speciale care vă permit să configurați liste derulante de diferite niveluri.

La ce este folosit meniul?

Care este avantajul creării acestui tip de listă? E simplu:

Economie de spațiu. Nu trebuie să încadrați mai multe secțiuni ale site-ului dvs. într-o singură linie de catalog principal. Puteți grupa eficient toate paginile în timp ce economisiți spațiu.

Frumuseţe. Doar să faci clic pe linkuri nu este la fel de interesant ca să arăți spre el și să vezi ce altceva este în secțiune.

Comoditate. Este mult mai convenabil pentru cititor să meargă imediat la linkul de interes decât să meargă de 10 ori de la o pagină la alta pentru a ajunge la rezultatul dorit.

În general, există o mulțime de avantaje, să aruncăm o privire mai atentă la cum să o facem?

Cum să faci un meniu derulant

Setarile sunt destul de simple. Să ne uităm mai întâi la cum să facem un meniu simplu, de exemplu, așa cum avem pe blogul nostru.

Configurarea listelor este foarte simplă. Pentru a face acest lucru, trebuie să mergeți la panoul administrativ, selectați „Aspect” și vom obține o listă.

Faceți clic pe „Meniu”.

Setările ni se vor deschide.

Aici facem clic pe butonul „Creați un meniu nou”.

Introduceți numele noului director (în exemplul în care am intrat Acasă) și faceți clic pe „Creare menu”.

Copiați site-ul dvs. din bara de adrese și inserați-l în linia „URL”, apoi faceți clic pe butonul „Adăugați la meniu”.

Apoi faceți clic pe fila „Pagini”.

Selectați-le pe cele de care avem nevoie și faceți clic pe „Adăugați la meniu”.

Un meniu simplu este gata!

Acum să vedem cum să facem un meniu derulant.

De asemenea, prin analogie cu meniul simplu, accesați panoul administrativ - aspect - meniu.

A apărut un nou element. Acum îl putem trage sub „Acasă”, astfel încât secțiunea să fie în ea, va apărea inscripția „Element copil”.

Notă: Dacă mutați o filă la același nivel cu celelalte, locația ei se va schimba pur și simplu, cu toate acestea, dacă o mutați la dreapta, va apărea cuvântul „copil”, aceasta va însemna că ați creat o parte a lista pop-up.

Apoi, făcând clic pe săgeata din fila „Navigație” din câmpul „URL”, ștergem toate informațiile.

Mișcăm toate celelalte elemente în același mod.

Avem primul nivel gata.

Acum vom folosi același principiu pentru al doilea nivel. Pentru a face acest lucru, avem nevoie de încă un element: categorii. Să-l adăugăm imediat, în același mod în care am adăugat elementul „Navigație”.

Să evidențiem tot ce avem nevoie și să-l adăugăm la cele principale.

Acum transferăm tot ce apare în „Categorii” și creăm elemente copil.

Pentru a vedea ce s-a întâmplat, trebuie să faceți clic pe „Salvați”.

Și apoi în câmpul „Gestionare zonă”, selectăm numele de care avem nevoie și facem clic pe „Salvare modificări”.

Mergem la proiectul nostru, indicăm butonul „Acasă” și apare o listă.

Indicăm către câmpurile „Navigație” și „Categorii” și se deschid următoarele file.

În acest mod simplu, puteți crea o varietate de meniuri pe WordPress. Nu există probleme, deoarece setările principale sunt în sistemul în sine, ceea ce nu este deloc greu de înțeles!

Mult succes in demersurile tale!

Ekaterina Kalmykova

10.01.2013 Romchik

O zi buna. Într-unul dintre proiectele mele a trebuit să creez o temă WordPress cu un meniu derulant. În acest articol vă voi spune, cum să faci un meniu derulant în wordpress, Și cum să schimbați afișarea meniului WordPress, adaptându-se la șablon. Crearea unui meniu drop-down în WordPress este de fapt destul de ușoară. Să facem din primul pas un meniu derulant, iar al doilea pas vom configura aspectul meniului derulant.

Pasul 1: Creați un meniu dropdown în WordPress

Un meniu drop-down în WordPress este creat în zona de administrare. Pentru a face acest lucru, accesați „Aspect” -> „Meniu”

Dacă, când accesați elementul „Meniu”, vedeți mesajul „Tema curentă nu acceptă crearea unui meniu...”, atunci nu vă supărați. Puteți citi cum să activați suportul pentru meniu într-o temă în articolul meu „Adăugarea suportului pentru propriul meniu într-o temă WordPress”

După ce mergem la elementul de meniu, vedem fereastra de editare a meniului:

Să creăm un nou meniu. Pentru a face acest lucru, în elementul „Numele meniului”, introduceți numele meniului și faceți clic pe „Creare meniu”.

Acum să adăugăm un element de meniu. De exemplu, pagina „Acasă”. Selectați-l în partea stângă și faceți clic pe „Adaugă la meniu”. Apoi, în partea dreaptă, faceți clic pe „Salvare meniu”. Toate elementele de meniu au fost adăugate.

O putem edita. Pentru a face acest lucru, faceți clic pe săgeata de lângă cuvintele „Pagină”. Putem schimba textul linkului. Pentru a face acest lucru, introduceți textul necesar în câmpul „Text link”. În câmpul „Atribut titlu” putem specifica titlul link-ului. Putem șterge acest element de meniu făcând clic pe linkul „Șterge” sau anulăm toate modificările făcând clic pe linkul „Anulare”. După ce ați făcut toate modificările, trebuie să faceți clic pe „Salvare meniu”.

Să mai creăm câteva elemente de meniu în același mod.

Dacă vrem să schimbăm ordinea elementelor, atunci pur și simplu trageți elementul dorit în poziția dorită. Deci, de exemplu, am vrut ca elementul „Necategorizat” să apară după elementul „Acasă”.

Acum dorim ca elementul „Necategorizat” să devină un subarticol al articolului „Acasă”. Pentru a face acest lucru, trageți pur și simplu elementul „Necategorizat” la dreapta.

După toate modificările, nu uitați să salvați meniul.

Am creat un meniu, am creat elemente de meniu și am creat sub-articole de meniu. Acum, partea cea mai interesantă - vom crea un meniu derulant.

Pasul 2. Personalizați aspectul meniului.

Să vedem cum arată meniul nostru. Pentru a face acest lucru, accesați site-ul nostru web:

Acum mutați cursorul mouse-ului la elementul „Acasă”.

După cum puteți vedea, a apărut un subarticol derulant „Fără ruboiki”.

Acum să aruncăm o privire mai atentă la codul html al meniului nostru:

• Toate meniurile sunt incluse implicit în div cu clasa meniu-meniu-container .
• Următoarea este o listă ul cu clasa meniul .
• Fiecare element de meniu este inclus în li cu multe clase, dar ne interesează două clase articol din meniuȘi element-de-meniu curent(Această clasă este doar pentru elementul curent de meniu)
• Sub-articolele unui anumit articol sunt incluse într-o listă ul cu clasa submeniu .
• Fiecare subclauză este cuprinsă în li cu aceleași clase ca și articolele din meniul părinte.

Acum, schimbând proprietățile CSS ale acestor clase, ne putem schimba cu ușurință meniul în orice formă. Permiteți-mi să vă reamintesc încă o dată că clasele de meniu date sunt clase WordPress implicite generate automat.

În acest articol, am analizat cum să creați un meniu în WordPress, cum să creați elemente de meniu și sub-articole în WordPress. Am atins, de asemenea, principalele clase CSS ale meniului WordPress