Vertikalni izbornik za web stranice u obliku harmonike s jQuery

Izbornik, kao što znate - sastavni dio stranice. Zanimljivo navigaciju online resurs je u mogućnosti za posjetitelje interesa. Osim toga, važno svojstvo bilo kojeg izbornika - njegova kompaktnost. Jednostavan vertikalni izbornik jednostavno stvorene pomoću HTML i CSS. No, idemo dalje: Naučimo stvoriti Menu- „harmoniku” uz pomoć jQuery.

Stvaranje Menu- „harmoniku”

Što je vertikalni izbornik u obliku harmonike? To je padajućem popisu, što stvara jednostavan za navigaciju i daje moderan stranice. Meni, izvodi na taj način, omogućuje vam da pretvoriti puno pod-stavke. Pristup njima događa kada kliknete mišem na željenu stavku. Netko može reći da je moguće napraviti jednostavan izbornik na ovaj način, bez uporabe jQuery. Da, to je. Ali ovaj predmet ne bi bilo vrlo korisno za vlasnike pametnih telefona ili tableta. Idemo napraviti vertikalni izbornik, pozivajući se na sve. Zatim, mijenja boju styling za navigaciju, to će biti moguće prilagoditi dizajn na bilo kojem mjestu.

HTML kod

Dakle, kako bi stvorili našu vertikalni izbornik, najprije morate birati HTML-kod, koji će sadržavati sljedeće retke:

Spremite ovaj kod u datoteku pod nazivom Accord_menu.html.

Kao što možete vidjeti, stvorili smo neuređen popis. Sastoji se od 3 glavne točke:

- fotografije;

- folije;

- knjige.

Svaka stavka ima nekoliko paragrafa. Gdje #, morat ćete dodati linkove. Sada je važno opisati stil. To sve ovisi o izgledu vaše internet resursa. Vertikalni izbornik za web stranice mora integrirati skladno u svom dizajnu.

CSS-koda

Sa stilovima ne bi trebalo biti teško. Napominjemo samo da je u ovom primjeru koristi gradijent ispune. Ovdje je CSS-kod:

boja je navedeno u CSS-datoteke, veličina markeri su uklonjeni iz stavke u popisu na lijevoj strani. Ona određuje kako se ponašati u svakoj točki i podizbornika kada prelazite preko njega. Na primjer:

# E1fee2 - to blijedo zelene boje pod.

# C4f0f7 -golubovaty hlad pod kada prelazite preko njih.

Prikaz nekretnina pitati blok vrijednosti za podešavanje potrebne padding i veličinu. Boja, veličina, vrsta fonta, mjesto - sve što je opisao u CSS datoteci. Nazovite to, na primjer, accordionmenu_my1.css.

Povezivanje jQuery poboljšanja izbornika

Kao što se možda sjećate, naš cilj - stvoriti vertikalnu izbornika jQuery. Ako niste upoznati s ovom tehnologijom, ne brini. Koristimo Googleovo spremište i povezati jQuery skripta. To će ga učiniti atraktivnijim izbornika. jQuery je JavaScript biblioteka temelji se na interakciji Hypertext Markup HTML i JavaScript. jQuery omogućuje pristup sadržaju i atribute elemenata.

Dakle, spojite potrebnu skriptu u tijelu HTML-datoteke i postaviti pravila za skladištenje 2 varijable, osim za trkaći konj elemenata. Doprinijeti kod, zatvoriti ostale kartice na otvaranju onog na kojem se nalazi klikom miša. Evo kako to izgleda:

Spremite sve promjene, pogledajte kako to izgleda u izborniku preglednika. To je česta posljedica: Kao rezultat toga, došli smo atraktivan izbornik koji uvijek možete mijenjati, ovisno o njihovim željama. I stjecanje novih znanja u području jQuery, CSS, što će stvoriti jedinstvene elemente stranice, poboljšanje njihove vještine.