HTML/tutoriale/navigare/meniu derulant

Informații despre acest text

În acest capitol veți învăța funcționalitate o navigare verticală care poate fi deschisă și închisă cu mouse-ul și tastatura. Se adaptează receptiv la toate porturile de vizualizare.

Cuprins

Meniuri cu mai multe niveluri (imbricate) [Edit]

În multe cazuri, navigațiile în proiecte web mai mari nu conțin o listă secvențială de linkuri, dar le distribuie la diferite niveluri de navigare.

liste imbricate [edit]

Listele imbricate sunt potrivite pentru cartografierea logică a acestei structuri.

Chiar și fără CSS, structura listelor imbricate este foarte clară prin intermediul preferințelor browserului.

Toate linkurile pot fi selectate cu tastatura.

Flyout sau dropdown? [ A edita ]

La momentul aspectului perfect pentru pixeli, acum existau două variante:

Cu un meniu derulant, submeniurile „zboară” orizontal din structura verticală din dreapta
Cu un meniu derulant, submeniurile „cad” vertical din rândul orizontal

Ascunde submeniul [edit]

O caracteristică a meniului derulant este că submeniul este ascuns în starea sa inițială și este selectat și făcut vizibil doar atunci când selectați cu mouse-ul prin pseudo-clasa: hover sau cu tastatura prin: focus.

Listelor care conțin un submeniu ca element secundar li se dă tabindex = "0", astfel încât să poată fi tabulate.

Când este selectat cu mouse-ul sau tastatura, este afișat submeniul; următoarele elemente de listă alunecă în jos.

.este selectat submeniul, submeniul este afișat imediat ce este selectat primul element de listă, dar este ascuns din nou.

O variantă tactilă și tastatură poate fi accesată numai cu JavaScript:

meniu vertical vertical [Editați]

Acest meniu poate fi convertit într-un meniu vertical vertical în câțiva pași simpli:

Dacă nu utilizați nav li, elementele de meniu sunt aranjate unul sub celălalt. Poziția absolută a nav ul ul este aceeași cu cea de sus: -0,4em; umplerea elementului părinte și este lăsată: 8em; poziționat în dreapta elementului părinte.

Acest tip de navigație este oarecum greșit astăzi, deoarece zonei de conținut ar trebui să i se ofere lățimea completă. Studiile de citire au arătat că utilizatorii încep intuitiv să caute informații noi și importante în stânga și, prin urmare, sunt mai susceptibili de a fi descurajați să navigheze.

Avantajul acestui tip de navigație este că se pot integra cu ușurință legături lungi care nu ar putea fi incluse într-o navigație orizontală. Un alt plus este că poate fi ușor extins în jos, ceea ce poate deveni rapid prea lung și confuz după mai multe modificări. Ambele avantaje prezintă, așadar, pericolul de a face navigarea confuză și dificil de utilizat.

Excursus: Ascundeți elementele (alternative la afișare: nici unul) [editați]

Ascunderea submeniurilor cu afișaj: niciunul; (și decolorarea cu display: block;) ar trebui evitată deoarece acest lucru ascunde conținutul pentru utilizatorii cititorului de ecran.

O alternativă este deschiderea submeniurilor cu marginea-stânga: -9999px; să se deplaseze în afara zonei vizibile și să zboare din nou de acolo. Cu toate acestea, browserul creează apoi un element invizibil, dar imens, care are un impact negativ asupra performanței paginii.

O altă modalitate ar putea fi de a face submeniul invizibil cu text-indent:

Avantajul este că textul curge întotdeauna departe de element și, prin urmare, nu poate ieși niciodată chiar și cu texte lungi și că nu trebuie desenat un container de 9999px. Performanța este semnificativ mai bună, în special pe dispozitivele mobile.

O a treia opțiune mută elementul de meniu în spatele paginii cu un index z negativ. Pentru a dispărea de fapt, i se oferă o dimensiune de font zero.

Concluzie [editați]

Puteți controla și opera navigațiile prezentate aici cu mouse-ul. Cu tastatura puteți controla numai linkurile afișate, dar nu și linkurile ascunse.

O variantă cu adevărat accesibilă poate fi realizată numai cu JavaScript: