Meniu vertical pentru site-ul sub forma unui acordeon cu jQuery

Meniul, după cum știți - o parte integrantă a site-ului. Interesant de resurse on-line de navigat este capabil vizitatorilor de interes. În plus, o proprietate importantă a oricărui meniu - compactitatea sale. Un meniu vertical simplu creat cu ușurință folosind HTML și CSS. Dar noi mergem mai departe: Să învățăm să creeze Meniu- „acordeon“, cu ajutorul jQuery.

Creați un „acordeon“ Meniu-

Ce este un meniu vertical sub forma unui acordeon? Aceasta este o listă drop-down, care creează un ușor de navigat și oferă un site elegant. Meniu, realizat în acest fel, vă permite să rândul său, o mulțime de sub-elemente. Accesul la acestea se produce atunci când faceți clic pe mouse-ul pe elementul dorit. Cineva ar putea spune că este posibil să se facă un meniu simplu, în acest mod, fără utilizarea de jQuery. Da, este. Dar acest obiect nu ar fi foarte util pentru proprietarii de smartphone-uri sau tablete. Să creeze un meniu vertical, apeland la toate. Apoi, schimbarea culorii coafare o navigare, va fi posibil să se adapteze designul la orice site.

codul HTML

Deci, pentru a crea meniul nostru vertical, trebuie să formați mai întâi codul HTML, care va conține următoarele linii:

Salvați acest cod într-un fișier numit Accord_menu.html.

După cum puteți vedea, am creat o listă neordonată. Se compune din 3 puncte principale:

- fotografii;

- filme;

- cărți.

Fiecare element are câteva paragrafe. În cazul în care sunt #, va trebui să adăugați link-uri. Acum este important pentru a descrie stilul. Totul depinde de aspectul resurselor Internet. meniu vertical pentru site-ul trebuie să se integreze armonios în designul său.

CSS-cod

Cu stiluri nu ar trebui să fie dificil. Remarcăm doar că, în acest exemplu utilizează un gradient de umplere. Aici este CSS-cod:

Culoarea este specificată în CSS-fișier, markeri de mărime sunt eliminate din elementele din lista din partea stângă. Acesta a determinat cum să se comporte în fiecare element și sub-meniu atunci când treceți peste el. De exemplu:

# E1fee2 - acest pal de culoare verde de sub.

# C4f0f7 -golubovaty umbra de sub atunci când treceți peste ele.

proprietate de afișare cere valoare de bloc pentru a ajusta padding și dimensiunea necesară. Culoarea, dimensiunea, tipul de font, locația - totul este așa cum este descris în fișierul CSS. Sunați-l, de exemplu, accordionmenu_my1.css.

Conectarea îmbunătățiri meniu jQuery

După cum vă amintiți, scopul nostru - pentru a crea un jQuery meniu vertical. Dacă nu sunteți familiarizați cu această tehnologie, nu vă faceți griji. Noi folosim magazia Google și conectați script-ul JQuery. Acest lucru face mai atractiv meniu va face. jQuery este o bibliotecă JavaScript bazat pe interacțiunea Hypertext Markup HTML și JavaScript. jQuery vă permite să accesați conținutul și atributele elementelor.

Deci, conectați script-ul necesar în corpul HTML dosar și a stabilit regulile de depozitare a 2 variabile, cu excepția elementelor de curse de cai. Contribuie cod, închideți alte file la deschiderea celei pe care există un clic de mouse. Iată cum arată:

Salvați toate modificările, vezi cum arată în meniul browserului. Acesta este un rezultat comun: Ca rezultat, am ajuns un meniu atractiv pe care o puteți modifica oricând, în funcție de preferințele lor. Și dobândirea de noi cunoștințe în domeniul jQuery, CSS, veți crea elementele unice ale site-ului, îmbunătățirea abilităților lor.