Codul HTML pentru un meniu arbore

conținut

La proiectarea unui meniu copac, dezvoltatorii trebuie să clasifice diferitele secțiuni de conținut ale unui site. De exemplu, un site de vânzări de produse ar putea avea secțiuni pentru fiecare tip de produs cu subsecțiuni suplimentare în cadrul acestora pentru a împărți produsele în categorii. Uneori, dezvoltatorii web utilizează subdirectoare pentru a organiza conținutul site-ului, caz în care fiecare director poate corespunde unui element de nivel superior din arborele de meniuri. Fiecare element de meniu va fi în cele din urmă un link HTML, ca în exemplul următor: Îmbrăcăminte

Acest cod leagă un folder denumit "îmbrăcăminte", care se află în directorul rădăcină al site-ului web. Deoarece nu este indicată nicio pagină, linkul va deschide pagina index din acel director. În secțiunea de îmbrăcăminte din meniul copac, elementele pot fi legate de anumite pagini, după cum urmează: Pantaloni

liste

Meniurile de copaci HTML implică de obicei liste. Următorul exemplu de apelare arată un meniu care utilizează liste fără numere:

• îmbrăcăminte
• • pantaloni
  • Jachete
• Cadouri
• • alimente
  • Articole de noutate
  • DVD-uri

Acest meniu conține două secțiuni de nivel 1 pentru "îmbrăcăminte" și "cadouri". În cadrul fiecăruia dintre acestea sunt elemente suplimentare din listă. Fiecare element din listă poate conține o altă listă pentru site-uri complexe, un meniu copac poate implica mai multe nivele de adâncime. Dacă faceți clic pe un element de nivel superior, utilizatorul va ajunge la pagina din acea secțiune a paginii, făcând clic pe un anumit element vă va trimite la o anumită pagină dintr-o secțiune.

stil

Cele mai multe site-uri utilizează foi de stil în meniurile lor. În cadrul codului CSS, dezvoltatorii pot dicta aspecte diferite ale aspectului meniului, inclusiv designul, precum și caracteristicile vizibile ale fiecărui element din listă. Navigatoarele web afișează, de obicei, gloanțe în elementele de listă implicite, pe care mulți dezvoltatori le aleg să nu le afișeze. Următorul exemplu de cod CSS arată acest lucru:

ul {list-style-type: none; }

Pentru a alege un anumit stil de bullet, codul va fi după cum urmează: ul {list-style-type: square;}

Dezvoltatorii pot adăuga opțional atribute de clasă la liste la diferite niveluri dintr-un meniu arbore, adaptând CSS pentru fiecare dintre ele.

Scrierea scenariului

Multe site-uri utilizează funcții JavaScript pentru a îmbunătăți interactivitatea cu meniurile copacilor. Prin utilizarea acestora, dezvoltatorii pot specifica că anumite elemente nu sunt vizibile inițial de utilizator. De exemplu, dacă faceți clic pe un element din lista de nivel superior, este posibil ca începutul să apară dinamic. Funcțiile JavaScript pot utiliza proprietatea de prezentare sau vizibilitatea unui element pentru a le spune browserului să se afișeze sau să se ascundă. Următorul cod arată configurația unui element din lista ascunsă: element.style.visibility = "ascuns";

Următoarea alternativă folosește proprietatea de prezentare: element.style.display = "none";