Lodret menu for webstedet i form af en harmonika med jQuery

Menuen, som du kender - en integreret del af sitet. Interessant navigere online ressource er i stand til at interesse besøgende. Desuden er en vigtig egenskab ved enhver menu - dens kompakthed. En simpel lodret menu nemt skabt ved hjælp af HTML og CSS. Men vi går videre: Lad os lære at skabe menu- "harmonika" med hjælp af jQuery.

Opret en menu- "harmonika"

Hvad er en lodret menu i form af en harmonika? Dette er en drop-down liste, hvilket skaber en let at navigere og giver en stilfuld sted. Menu, udført på denne måde, gør det muligt for dig at slå en masse underpunkter. Adgang til dem opstår, når du klikker med musen på det ønskede element. Nogen vil måske sige, at det er muligt at lave en simpel menu på denne måde uden brug af jQuery. Ja, det er. Men dette objekt ville ikke være meget nyttigt at ejere af smartphones eller tablets. Lad os oprette en lodret menu, der appellerer til alle. Derefter ændre farven styling et navigationssystem, vil det være muligt at tilpasse designet til et websted.

HTML-kode

Så for at skabe vores lodret menu, skal du først ringe til HTML-kode, som vil indeholde følgende linjer:

Gem denne kode i en fil kaldet Accord_menu.html.

Som du kan se, har vi skabt en uordnet liste. Den består af 3 hovedpunkter:

- billeder;

- film;

- bøger.

Hvert emne har et par stykker. Hvor er #, skal du tilføje links. Nu er det vigtigt at beskrive den stil. Det hele afhænger af udseendet af din Internet ressource. Lodret menu til sitet skal harmonisk integrere i sit design.

CSS-kode

Med stilarter bør du ikke være svært. Vi bemærker kun, at i dette eksempel bruger et farveforløb. Her er CSS-kode:

Farven angives som CSS-fil, er størrelsesmarkører fjernet fra elementerne på listen til venstre. Det bestemmes, hvordan man opfører sig i hvert emne og sub-menu, når du svæver over det. For eksempel:

# E1fee2 - denne lysegrønne farve sub.

# C4f0f7 -golubovaty skygge sub når du svæver over dem.

Display ejendom bede blok værdi for at justere den nødvendige polstring og størrelse. Den farve, størrelse, skrifttype, placering - alt er som at beskrive i CSS-fil. Kald det, for eksempel, accordionmenu_my1.css.

Tilslutning menu forbedringer jQuery

Som du måske husker, vores mål - at skabe en lodret menu jQuery. Hvis du ikke er bekendt med denne teknologi, så fortvivl ikke. Vi bruger Google-lageret, og tilslut JQuery script. Dette vil gøre det mere attraktivt menu. jQuery er en JavaScript-bibliotek baseret på interaktionen af Hypertext Markup HTML og JavaScript. jQuery gør det muligt at få adgang til indholdet og attributter af elementer.

Så tilslut den nødvendige script i kroppen af HTML-fil og sætte reglerne for opbevaring af 2 variabler, bortset fra hestevæddeløb elementer. Bidrage kode, lukke andre faner ved åbningen af den ene, hvor der er et museklik. Her er hvordan det ser ud:

Gem alle ændringer, se hvordan det ser ud i browserens menu. Det er et fælles resultat af: Som et resultat, er vi kommet et attraktivt menu, som du altid kan ændre, afhængigt af deres præferencer. Og tilegne sig ny viden inden for jQuery, CSS, vil du skabe de unikke elementer på webstedet, forbedre deres færdigheder.