Vertikal meny for området i form av et trekkspill med jQuery

På menyen, som du vet - en integrert del av nettstedet. Interessant navigere online ressurs er i stand til å renter besøkende. I tillegg er en viktig egenskap for en meny - sin kompakthet. En enkel vertikale menyen enkelt laget ved hjelp av HTML og CSS. Men vi går videre: La oss lære å skape meny- "trekkspill" med hjelp av jQuery.

Lag en meny- "trekkspill"

Hva er en vertikal meny i form av et trekkspill? Dette er en rullegardinliste, noe som skaper en enkel å navigere og gir et stilig område. Meny, fremført på denne måten, kan du slå en masse underelementer. Tilgang til dem oppstår når du klikker med musen på ønsket element. Noen vil kanskje si at det er mulig å lage en enkel meny på denne måten uten bruk av jQuery. Ja, det er det. Men dette objektet ikke ville være svært nyttig for eiere av smarttelefoner og nettbrett. La oss lage en vertikal meny, som appellerer til alle. Deretter endre fargen styling en navigasjons, vil det være mulig å justere design til noen av sidene.

HTML-kode

Så, for å lage vår vertikale menyen, må du først slå HTML-kode, som vil inneholde følgende linjer:

Lagre denne koden i en fil kalt Accord_menu.html.

Som du kan se, har vi laget en sorterte liste. Det består av 3 hovedpunkter:

- bilder;

- filmer;

- bøker.

Hvert element har et par avsnitt. Hvor er #, må du legge til linker. Nå er det viktig å beskrive stilen. Det hele avhenger av utseendet på internett ressurs. Vertikal meny for området må integrere seg harmonisk inn i sin design.

CSS-kode

Med stiler du bør ikke være vanskelig. Vi merker bare at i dette eksemplet bruker en gradient fyll. Her er en CSS-kode:

fargen er spesifisert i CSS-filen, er størrelsesmarkører fjernet fra elementene i listen til venstre. Det bestemt hvordan man oppfører seg i hvert element, og sub-menyen når du holder markøren over det. For eksempel:

# E1fee2 - dette blek grønn farge sub.

# C4f0f7 -golubovaty skygge sub når du holder markøren over dem.

Displayet eiendom spør blokk verdi for å justere de nødvendige padding og størrelse. Farge, størrelse, skrifttype, hvor - er alt som beskriver i CSS-filen. Kall det for eksempel accordionmenu_my1.css.

Koble jQuery meny forbedringer

Som du kanskje husker, vårt mål - å skape en vertikal meny jQuery. Hvis du ikke er kjent med denne teknologien, ikke bekymre deg. Vi bruker Google depot og koble JQuery script. Dette vil gjøre det mer attraktivt menyen. jQuery er et Javascript-bibliotek basert på samspillet mellom Hypertext Markup HTML og Javascript. jQuery kan du få tilgang til innhold og egenskaper av elementer.

Så kobler du den nødvendige skript i kroppen av HTML-fil og setter reglene for oppbevaring av 2 variabler, med unntak av hesteveddeløp elementer. Bidra kode, lukke andre faner ved åpningen av en hvor det er et museklikk. Her er hvordan det ser ut:

Lagre alle endringer, se hvordan det ser ut i nettlesermenyen. Det er en vanlig følge av: Som et resultat, har vi kommet et attraktivt meny som du alltid kan endre, avhengig av deres preferanser. Og tilegne seg ny kunnskap innen jQuery, CSS, vil du skape unike elementer av nettstedet, forbedre sine ferdigheter.