Okomiti izbornik za web mjesto u obliku harmonike na jQuery

računala

Poznato je da je izbornik sastavni dio web mjesta. Zanimljiva navigacija resursa Interneta može zanimati posjetitelje. Osim toga, važno svojstvo bilo kojeg izbornika je njegova kompaktnost. Jednostavan vertikalni izbornik lako se kreira pomoću HTML-a i CSS-a. Ali idemo dalje: naučite kako stvoriti izbornik za harmoniku s jQueryom.

Izradite izbornik "harmonika"

Koji je vertikalni izbornik u obliku harmonike? Ovo je takav padajući popis koji stvara prikladnu navigaciju i pruža moderan izgled web mjesta. Izbornik, izvršen u ovom obrascu, omogućuje vam da uključite mnoge pod-stavke. Pristup njima nastaje kada kliknete na željenu stavku. Netko će reći da možete napraviti jednostavan izbornik u ovom stilu bez korištenja jQuery. Da, jest. Ali takav objekt neće biti vrlo pogodan za vlasnike tableta ili pametnih telefona. Izradimo okomiti izbornik, atraktivan za sve. Zatim, promjenom boje dizajna takve navigacije, moguće je prilagoditi dizajn za bilo koju web stranicu.

HTML kod

Stoga, da biste izradili naš vertikalni izbornik, najprije trebate upisati HTML kôd koji će sadržavati sljedeće retke:

Okomiti izbornik
Spremite ovaj kôd u datoteku pod nazivom Accord_menu.html.

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

- fotografije;

- Filmovi;

- knjige.

Svaka stavka ima nekoliko podstavaka. Tamo gdje ima #, morat ćete dodati veze. Sada je važno opisati stilove. Sve ovisi o tome kako izgleda vaš Internet resurs. Okomiti izbornik za web mjesto trebao bi se skladno uklopiti u njegov dizajn.

CSS-koda

Uz stilove, ne biste trebali imati poteškoća. Imajte na umu da se u ovom primjeru koristi gradijentno ispunjavanje. Evo kako izgleda CSS:

Okomiti izbornik za web mjesto

CSS datoteka određuje boju, veličinu, oznake se uklanjaju lijevo od stavki popisa. Određuje se kako će se svaka stavka i podizbornik ponašati kada se zadržite iznad njega. Na primjer:

# e1fee2 svijetlo-zelena boja podvrsta.

# c4f0f7 je suptilna nijansa podpoziva kada se zadržite iznad njih.

Značajka prikaza postavljena je na blokiranjeprilagodite potrebnu udubljenja i veličinu. Boja, veličina, vrsta fonta, lokacija - sve to također opisuje u CSS datoteci. Nazovite ga, na primjer, accordionmenu_my1.css.

JQuery spajanje za poboljšanja izbornika

Kao što se sjećate, cilj nam je stvoriti okomicujQuery izbornik. Ako ste novi u ovoj tehnologiji, ne brinite. Upotrijebite Googleovo spremište i povežite jquery skriptu. To će učiniti izbornik privlačnijim. jQuery je JavaScript biblioteka koja se temelji na interakciji HTML i JavaScript hipertekstualnog označavanja. jQuery omogućuje pristup sadržaju i atributima elemenata.

Dakle, povezujemo potrebnu skriptu u tijeluHTML datoteku i postavite pravila za pohranu 2 varijable, isključujući skokove elementa. Unosimo kôd koji zatvara preostale kartice prilikom otvaranja onoga na kojem se miša klikne. Evo kako izgleda sve:

JQuery okomiti izbornik

Spremite sve promjene, pogledajte kako izgleda izbornik u pregledniku. Ovdje je opći rezultat rada:

Okomiti izbornik harmonika
Kao rezultat toga, imat ćemo atraktivan izbornikšto se uvijek može mijenjati ovisno o njihovim željama. Stjecanje novih znanja iz područja jQuery, CSS, izradit ćete jedinstvene elemente web mjesta, poboljšavajući njihove praktične vještine.