Vertikalni meni za sajt u obliku harmonike na jQuery

Poznato je da je meni sastavni dio sajta. Zanimljiva navigacija Internet resursa je u stanju da interesuje posetioce. Pored toga, bitna osobina bilo kog menija je njegova kompaktnost. Jednostavan vertikalni meni se lako kreira pomoću HTML-a i CSS-a. Ali idemo dalje: naučite kako napraviti meni harmonike sa jQuery.

Kreirajte meni- "harmonika"

Šta je vertikalni meni u obliku harmonike? Ovo je takva padajuća lista koja stvara pogodnu navigaciju i daje stilski izgled na sajtu. Meni, izvršen u ovom obliku, omogućava vam da uključite mnoge pod-stavke. Pristup njima se javlja kada kliknete na željenu stavku. Neko će reći da možete napraviti jednostavan meni u ovom stilu bez korišćenja jQuery-a. Da, jeste. Ali takav objekt neće biti vrlo zgodan za vlasnike tableta ili pametnih telefona. Kreirajmo vertikalni meni, atraktivan za sve. Zatim, promenom stila u boji ovakve navigacije, moguće je prilagoditi dizajn bilo koje lokacije.

HTML kod

Dakle, da bi kreirali naš vertikalni meni, prvo morate da unesete HTML kôd koji će sadržati sledeće linije:

Spremite ovaj kod u datoteku pod nazivom Accord_menu.html.

Kao što vidite, napravili smo neuređenu listu. Sastoji se od 3 glavne tačke:

- fotografije;

- filmovi;

- knjige.

Svaka stavka ima nekoliko pod-stavki. Gde je #, morate dodati veze. Sada je važno opisati stilove. Sve zavisi od toga kako izgleda tvoj Internet resurs. Vertikalni meni za sajt bi trebao harmonično uklopiti u njegov dizajn.

CSS

Sa stilovima, ne biste trebali imati poteškoća. Zapažamo samo da se u ovom primjeru koristi gradijentna popuna. Evo kako izgleda CSS:

CSS datoteka određuje boju, veličinu, markeri se uklanjaju levo od stavki liste. Određeno je kako će se svaka tačka i podmeni ponašati kada se nadmašite iznad njega. Na primjer:

# E1fee2 je svetlo-zelena boja podtočaka.

# C4f0f7 je suptilna nijansa podtačaka kada se nalazite nad njima.

Svojstvo prikaza je podešeno tako da blokira podešavanje potrebnih indentacija i veličina. Boja, veličina, tip fonta, lokacija - sve ovo takođe opisuje u CSS datoteki. Nazovite ga, na primer, accordionmenu_my1.css.

Povezivanje jQuery za poboljšanja menija

Kao što se sećate, naš cilj je kreiranje vertikalnog jQuery menija. Ako ste novi u ovoj tehnologiji, nemojte se obeshrabriti. Koristite Google spremište i povežite jQuery skriptu. Ovo će učiniti meni privlačnijim. JQuery je JavaScript biblioteka zasnovana na interakciji HTML i JavaScript-a sa hipertekstom. JQuery vam omogućava pristup sadržaju i atributima elemenata.

Dakle, povezali smo neophodnu skriptu u telo HTML-fajla i postavili pravila za čuvanje 2 varijabli, isključujući skokove elemenata. Napravićemo kod koji će zatvoriti ostale kartice kada otvorite onaj pomoću koga klikne mišem. Evo kako izgleda:

Sačuvajte sve promjene, pogledajte kako meni izgleda u pretraživaču. Evo celokupnog rezultata rada: Kao rezultat toga, imamo atraktivan meni koji se uvek može promeniti u zavisnosti od vaših želja. I sticanjem novih znanja iz oblasti jQuery, CSS, kreiraćete jedinstvene elemente sajta, poboljšavajući svoje praktične veštine.