Meniu cu săgeată pentru submeniu, doar cu CSS

Meniu cu săgeată pentru submeniu, doar cu CSS

Meniu cu săgeată pentru submeniu, doar cu CSS

29/07/2015

cuvinte ()

Am scris mai jos o metodă foarte simplă de a marca meniurile care conțin submeniuri, fără a fi nevoie de clase css suplimentare sau de JavaScript. Este foarte utilă în cazurile în care markup-ul nu poate modificat — cum este cazul unor CMS-uri, sau pur și simplu se dorește un markup curat.

Toată „șmecheria” se bazează pe un selector și o pseudo-clasă CSS3 — singurul browser care nu le suportă este… Internet Explorer, versiunea 8 și mai vechi. Mai întâi adăugăm simbolul (care poate fi orice fel de conținut ce poate fi adăugat prin css) tuturor link-urilor de pe primul nivel, apoi, prin selectorul :only-child eliminăm simbolul de la acelea care nu au un „frate” (ul-ul secundar).

Singura cerință pentru a funcționa este ca structura meniului să fie standard, adică:

<ul>  
  <li> <!-- start primul nivel -->
    <a></a>
    <ul> <!-- start al doilea nivel -->
      <li>
        <a></a>
      </li>
    </ul> <!-- sfarsit al doilea nivel -->
  </li> <!-- sfarsit primul nivel -->
  ...
</ul>  

Mai jos, un demo funcțional pe Codepen.

Marius Stuparu - http://www.mariusstuparu.com

Frontend developer senior, cu afinitate pentru responsive web ?i tehnologii noi. Mare iubitor de Node.js, Sass ?i Angular. Dar ?i fotograf acreditat, Nikonist ?i iubitor de muzic? electronic?.