Meniu ‘Drop Down’ doar cu CSS, in WordPress

Parte a diverselor proiecte la care am lucrat au fost meniurile de tip drop-down. Pentru ca toate implicau un design personalizat, fara teme gratuite sau comerciale, am avut ocazia sa experiementez cu diverse tehnici. Acest articol se aplica in WordPress dar informatia se poate folosi si in alte contexte.

Ce trebuie sa stim

WordPress are o clasa Walker care genereaza meniurile. Aceasta clasa poate sa fie suprascrisa integral sau partial, astfel incat ne putem customiza meniurile intr-o masura mai mare sau mica. E posibil sa-ti faci propria structura cap-coada cu putin efort sau poti alege doar modificarea unui meniu, a unui nivel intreg, etc.

Mai multe informatii despre clasa Walker se regasesc aici: http://codex.wordpress.org/Class_Reference/Walker

Structura unui meniu in WordPress

Daca ne uitam la structura unui meniu standard in WordPress, el arata cam asa (ca si exemplu folosesc un site al unui client).

meniu dropdown wordpress exemplu

Iar codul este (in cazul de fata clasa Walker a fost customizata):

<ul id="menu-main-menu" class="clearfix">
     <li id="menu-item-28" class="first_item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28">
         <a href="http://www.exemplu.com/product/" class=" link-level-0">Product</a>
         <div class="submenu clearfix">
               <ul class="sub-menu-level-0">......

Evident nu e tot meniul, dar ce ne intereseaza este potential ID-ul, dar cel mai important clasa menu-item-has-children si clasa submenu.

Ca sa rezumam, structura este: ul [parinte] > li [meniu individual] > div [submeniu]

submenu poate sa fie doar un ul, in cazul de fata e un div.

Ca si CSS, cu doar cateva linii avem un drop-down care apare la mouse-over.

#menu-main-menu li .submenu {
    display: none; /*astfel meniul nu se afiseaza deloc*/
}
#menu-main-menu li:hover, #menu-main-menu li a:hover, #menu-main-menu li:hover .submenu {
    display: block; /*cand e cursorul deasupra, afisam submeniul */
}
#menu-main-menu li .submenu li {
/*diverse stilizari, font, background, etc*/
}
#menu-main-menu li .submenu ul {
/*diverse stilizari, font, background, etc*/
}
#menu-main-menu li:hover {
    /*meniul individual on mouse-over*/
}

Concluzia

Este foarte de simplu sa facem un meniu drop-down. Cea mai mare parte a muncii este cu stilizarea, alinieri si asa mai departe. Cheia sunt doar doua linii cu display: none si display: block;

Atentia doar la distanta intre submeniu si meniu. Daca exista o distanta intre ele chiar si de 1pixel, la miscarea cursorului de pe meniul parinte inspre copil, submeniul va disparea.

Vezi exemplul de mai jos:

meniu dropdown wordpress exemplu comparatie

Ce se poate observa: meniul activat (via Firefox & Firebug) Product, este marcat in albastru (jumatatea stanga). Submeniul, copilul acestui parinte este in jumatatea dreapta. Se poate vedea cum submeniul incepe imediat dupa meniu, chiar daca aparent exista un spatiu.

Ai facut in ultima vreme meniuri drop-down sau te-a ajutat articolul asta? Spune-mi in comentariile de mai jos!

Published by

Cristian Raț

Lucrez ca si dezvoltator aplicatii web de mai bine de 10 ani. Sunt Senior PHP developer la o companie din Londra. Anterior am lucrat in diverse agentii digitale din Londra sau Romania, unde am avut propria companie. In general folosesc WordPress la proiectele freelance sau Symfony framework la jobul de zi cu zi.

Leave a Reply

Your email address will not be published. Required fields are marked *